Displaying one element in combobox from comboboxitems - wpf

Question

I'm sorry the title is badly worded and change it if you must, but this is what I am trying to achieve.
I have styled a combobox and added some items:
When an item is selected I wish only the title to be displayed, at the moment the whole content is displayed:
I have been playing around with using Tags to define the textblock with text "Title" as a header and display that however it's not working :(.
Here is the XAML Styling within app.xaml, I haven’t placed in a resource dictionary yet as I’m just testing:
<Application x:Class="WpfApplication14.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication14"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
<Grid Height="50" Width="200">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Border x:Name="NormalBorder"
Background="#FF4F4F4F"
Grid.ColumnSpan="2"
BorderBrush="White"
BorderThickness="1.5"
CornerRadius="10,10,10,10"
/>
<Border x:Name="MouseOverBorder"
Background="#737373"
BorderBrush="White"
Grid.ColumnSpan="2"
BorderThickness="1.5"
CornerRadius="10,10,10,10"
Opacity="0"
/>
<Border x:Name="PressedBorder"
Background="#262626"
Grid.ColumnSpan="2"
CornerRadius="10,10,10,10"
Opacity="0"
/>
<Path
x:Name="Arrow"
Grid.Column="1"
Fill="White"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z"
/>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Normal" To="MouseOver" GeneratedDuration="0:0:0.15"/>
<VisualTransition From="MouseOver" To="Normal" GeneratedDuration="0:0:0.15"/>
<VisualTransition From="Normal" To="Checked" GeneratedDuration="0:0:0.05"/>
<VisualTransition From="Checked" To="MouseOver" GeneratedDuration="0:0:0.05"/>
<VisualTransition From="MouseOver" To="Checked" GeneratedDuration="0:0:0.05"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MouseOverBorder" Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame Value="1" KeyTime="0:0:0.15"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PressedBorder" Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame Value="1" KeyTime="0:0:0.05"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
<Style x:Key="ComboBox" TargetType="ComboBox">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid Height="50" Width="200">
<ToggleButton
Name="ToggleButton"
Template="{StaticResource ComboBoxToggleButton}"
Grid.Column="2"
Focusable="false"
IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
</ToggleButton>
<ContentPresenter x:Name="Content" Content="{TemplateBinding SelectionBoxItem}" Margin="5,0,0,0" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<Popup
Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
Height="400" Width="190"
PopupAnimation="Slide">
<Grid Name="DropDown"
SnapsToDevicePixels="True">
<Border
x:Name="DropDownBorder"
Background="#FF3F3F3F"
BorderThickness="1"
BorderBrush="#888888"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="ComboBoxItem" x:Key="ComboBoxItem">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="#262626"/>
<Setter Property="Height" Value="50"/>
<Setter Property="Width" Value="200"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Grid Height="50" Width="200" Margin="0,2,0,2">
<Border x:Name="DropDownNormalBorder"
Background="{TemplateBinding Background}"
Height="50" Width="200"
/>
<Border x:Name="DropDownMouseOverBorder"
Background="#808080"
Grid.ColumnSpan="2"
Opacity="0"
/>
<ContentPresenter HorizontalAlignment="Left" VerticalAlignment="Center" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Normal" To="MouseOver" GeneratedDuration="0:0:0.15"/>
<VisualTransition From="MouseOver" To="Normal" GeneratedDuration="0:0:0.15"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DropDownMouseOverBorder" Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame Value="1" KeyTime="0:0:0.15"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
Here is the mainwindow.xaml, the combobox item is repeated four times in the screenshot above:
<Window x:Class="WpfApplication14.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication14"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid Background="Black">
<ComboBox Style="{DynamicResource ComboBox}" Height="50" Width="200">
<ComboBoxItem Style="{DynamicResource ComboBoxItem}">
<Grid>
<StackPanel Orientation="Horizontal">
<Image Source="C:\Users\ceefax\Documents\Visual Studio 2015\Projects\WpfApplication14\WpfApplication14\spanner-clip-art.png"
Height="40" Width="40" />
<StackPanel Orientation="Vertical" Margin="5,0,0,0">
<TextBlock FontWeight="Bold">Title</TextBlock>
<TextBlock>Content</TextBlock>
</StackPanel>
</StackPanel>
</Grid>
</ComboBoxItem>
</ComboBox>
</Grid>

Answer 1

You can use a Combined Template.
<Window x:Class="WpfApplication14.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication14"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ResourceDictionary>
<DataTemplate x:Key="NormalItemTemplate" >
<Grid>
<StackPanel Orientation="Horizontal">
<Image Source="C:\Users\ceefax\Documents\Visual Studio 2015\Projects\WpfApplication14\WpfApplication14\spanner-clip-art.png"
Height="40" Width="40" />
<StackPanel Orientation="Vertical" Margin="5,0,0,0">
<TextBlock FontWeight="Bold">Title</TextBlock>
<TextBlock>Content</TextBlock>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
<DataTemplate x:Key="SelectionBoxTemplate" >
<Grid>
<StackPanel Orientation="Horizontal">
<Image Source="C:\Users\ceefax\Documents\Visual Studio 2015\Projects\WpfApplication14\WpfApplication14\spanner-clip-art.png"
Height="40" Width="40" />
<StackPanel Orientation="Vertical" Margin="5,0,0,0">
<TextBlock FontWeight="Bold">Title</TextBlock>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
<DataTemplate x:Key="CombinedTemplate">
<ContentPresenter x:Name="Presenter"
Content="{Binding}"
ContentTemplate="{StaticResource NormalItemTemplate}" />
<DataTemplate.Triggers>
<DataTrigger
Binding="{Binding RelativeSource={RelativeSource FindAncestor,ComboBoxItem,1}}"
Value="{x:Null}">
<Setter TargetName="Presenter" Property="ContentTemplate"
Value="{StaticResource SelectionBoxTemplate}" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ResourceDictionary>
</Window.Resources>
<Grid Background="Black">
<ComboBox ItemsSource="{Binding Items}" SelectedItem="{Binding Item}"
ItemTemplate="{StaticResource CombinedTemplate}"
Height="50" Width="200">
</ComboBox>
</Grid>
</Window>
Note Binding Items and Item.