Search code examples
c#wpflistdata-bindingcombobox

WPF ComboBox bound with object list and display less different value in selected item than in the item list


I have this ComboBox:

<ComboBox
    ItemsSource="{Binding imageFormats}">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <DockPanel>
                <TextBlock DockPanel.Dock="Left" Text="{Binding Extension}" />
                <TextBlock DockPanel.Dock="Left" Text=" - " />
                <TextBlock DockPanel.Dock="Right" Text="{Binding Description}" />
            </DockPanel>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

Which is bound to this list: private List<ImageFormatModel> imageFormats = new List<ImageFormatModel>();

public MainWindow()
{
    ComboBoxImages.ItemsSource = imageFormats;
}

The Object ImageFormatModel consists of two strings:

public class ImageFormatModel
{
    public string Extension { get; set; }
    public string Description { get; set; }
}

Is possible that the selected item shows only the extension but in the dropdown menu both are shown?

Both values should be shown in this menu:

Dropdown Menu

But if I select one, only the extension should be visible. Not like this: enter image description here


Solution

  • You could apply a Style with a DataTrigger to the TextBlock elements to be hidden:

    <DataTemplate>
        <DockPanel>
            <DockPanel.Resources>
                <Style x:Key="tbStyle" TargetType="TextBlock">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ComboBoxItem}}" Value="{x:Null}">
                            <Setter Property="Visibility" Value="Collapsed"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </DockPanel.Resources>
            <TextBlock DockPanel.Dock="Left" Text="{Binding Extension}" />
            <TextBlock DockPanel.Dock="Left" Text=" - " Style="{StaticResource tbStyle}" />
            <TextBlock DockPanel.Dock="Right" Text="{Binding Description}" Style="{StaticResource tbStyle}" />
        </DockPanel>
    </DataTemplate>