WPF Multicolumn Combobox - wpf

Question

I have the following data template used for a multicolumn combo box:
<DataTemplate x:Key="ShipViaKey">
<Grid Height="23" Width="Auto" ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Code}"/>
<TextBlock Grid.Column="1" Text="{Binding Carrier}"/>
</Grid>
</DataTemplate>
The combo box is defined like this:
<ComboBox Grid.Row="0" Grid.Column="1" x:Name="CboShipVia" SelectedValue="{Binding FkCarrier, Mode=TwoWay}" SelectedValuePath="PkCarrier" IsEnabled="{Binding HasData}" ItemTemplate="{StaticResource ShipViaKey}"/>
This is all fine; except I want to only display the "Code" of the selected item in the combo box, not both values. Is there a way to do this?

Answer 1

Instead of ItemTemplate, use ItemContainerStyle:
<ComboBox.ItemContainerStyle>
<Style TargetType="ComboBoxItem">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid Height="23" Width="Auto" ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Code}"/>
<TextBlock Grid.Column="1" Text="{Binding Carrier}"/>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</ComboBox.ItemContainerStyle>
Also, set DisplayMemberPath to Code property.

Answer 2

I came up with this solution that provides columns vertical alignment thanks to the SharedSizeGroup feature.
Resources:
<DataTemplate x:Key="advancedComboxItemDataTemplate">
<Grid Width="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Caption}" Margin="5" Grid.Column="0" TextAlignment="Left"/>
<TextBlock Text="{Binding Description}" Margin="5" Grid.Column="1" TextAlignment="Left">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ComboBoxItem}, Path=IsSelected}" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
</DataTemplate>
<ItemsPanelTemplate x:Key="advancedComboxItemsPanelTemplate">
<StackPanel Grid.IsSharedSizeScope="True" IsItemsHost="True"/>
</ItemsPanelTemplate>
Usage:
<ComboBox Width="300"
ItemsSource="{Binding ReferentialData.BankReferences}"
SelectedItem="{Binding SelectedObject.PayTermBankReference}"
ItemTemplate="{StaticResource advancedComboxItemDataTemplate}"
ItemsPanel="{StaticResource advancedComboxItemsPanelTemplate}"/>