WPF Multicolumn Combobox

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}"/>