how to show selected text in combobox using custom template - wpf

Question

I'm new in WPF, implementing application to show 2 combobox with different formated text.
I have created custom controltemplate for combobox
<ControlTemplate x:Key="GridGenreComboboxTemplate" TargetType="{x:Type ComboBox}">
<ControlTemplate.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
</ControlTemplate.Resources>
<StackPanel>
<ToggleButton
IsTabStop="False" x:Name="DropDownToggle"
HorizontalContentAlignment="Left"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
<ContentPresenter Content="{TemplateBinding SelectedItem}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="10,4"
VerticalAlignment="Center"
HorizontalAlignment="Left">
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="{Binding Path=Foreground,RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}"/>
</Style>
</ContentPresenter.Resources>
<ContentPresenter.ContentTemplate>
<DataTemplate>
<TextBlock Text ="{Binding}"></TextBlock>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
</ToggleButton>
<!-- Popup for dropdown when combobox is clicked and open -->
<Popup x:Name="PART_Popup" AllowsTransparency="True"
Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource TemplatedParent}}"
Placement="Bottom" IsOpen="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}"
PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}">
<Grid MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="Splitter" BorderThickness="0,3,0,0">
<Border.BorderBrush>
<SolidColorBrush>
<SolidColorBrush.Color>
<Color R="58" G="64" B="70" A="255"/>
</SolidColorBrush.Color>
</SolidColorBrush>
</Border.BorderBrush>
</Border>
<Grid Margin="0,3,0,0">
<Border CornerRadius="0,0,2,2" BorderThickness="1,0,1,1" x:Name="DropDownBorder"
Background="Green">
<Border.BorderBrush>
<SolidColorBrush Opacity="0.9">
<SolidColorBrush.Color>
<Color R="96" G="96" B="97" A="255"/>
</SolidColorBrush.Color>
</SolidColorBrush>
</Border.BorderBrush>
</Border>
<ScrollViewer CanContentScroll="true" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" x:Name="Content"
KeyboardNavigation.DirectionalNavigation="Continue" HorizontalAlignment="Stretch"/>
</ScrollViewer>
</Grid>
</Grid>
</Popup>
</StackPanel>
</ControlTemplate>
in one combobox want to show formated text i.e. 1000 x 900, 200 x 300,.. and in another want to show
text like 1000 900 topology, 200 300 topology
I have formated combobox item and it shows correct value but selected value doesn't show on combobox.
how to do this using single combobox item template?
<ComboBox Grid.Row="0" ItemsSource="{Binding PossibleTopologysNew}"
SelectedItem="{Binding SelectedTopologyNew}"
Template="{StaticResource GridGenreComboboxTemplate}"
>
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Margin="10">
<TextBlock.Text>
<MultiBinding StringFormat="{}{0} x {1}">
<Binding Path="LeftNumber"/>
<Binding Path="RightNumber"/>
</MultiBinding>
</TextBlock.Text>
</TextBlock>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<ComboBox Grid.Row="0" ItemsSource="{Binding PossibleTopologysNew}"
SelectedItem="{Binding SelectedTopologyNew}"
Template="{StaticResource GridGenreComboboxTemplate}"
>
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Margin="10">
<TextBlock.Text>
<MultiBinding StringFormat="{}{0} {1} topology">
<Binding Path="LeftNumber"/>
<Binding Path="RightNumber"/>
</MultiBinding>
</TextBlock.Text>
</TextBlock>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>

Answer 1

Your fix is simple... just don't declare a new ControlTemplate for the ComboBox - use the default one. If you really need to provide your own ControlTemplate, then just define one that contains the TextBox used to display the selected value. If you are new to WPF, then I very much doubt that you actually need to define your own ControlTemplate.
If however, you do need to declare your own ControlTemplate, then you should start with the default one (which you can find in the ComboBox Styles and Templates page on MSDN) and slowly and carefully remove the bits that you don't need and add the new bits that you do need. However, when declaring a ControlTemplate, you have to replace like with like. For example, look at the ContentPresenter from the default ControlTemplate:
<ContentPresenter x:Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="3,3,23,3"
VerticalAlignment="Stretch"
HorizontalAlignment="Left">
Now look at yours:
<ContentPresenter
Content="{TemplateBinding SelectedItem}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="10,4"
VerticalAlignment="Center"
HorizontalAlignment="Left">
To start with, you are attempting to data bind the ContentPresenter.Content property to a different property from the original ControlTemplate. So if I were you, I'd get rid of you non-working ControlTemplate and replace it with the original one. Ensure that it displays correctly before starting to change it and test it regularly as you continue to change it.