Change displayed text in XAML Combobox multi selection

Question

I have the following code to allow users to select multiple items from a combobox. However when they click one item, it makes this the displayed text when combobox closes. Can I change the displayed text to something that isnt just the item selected. For example if the users select items A,B and D, I want the text part of the combobox to show "A, B, D"

<ComboBox ItemsSource="{Binding ListOfItems}">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}" Width="20" />
                        <TextBlock Text="{Binding DisplayName}" Width="110" />
                    </StackPanel>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>

Thanks

score 2 · Accepted Answer · edited May 23 '17 at 12:24

You could use a ContentControl with a Style that changes the ContentTemplate property for the selected item. The following sample markup should give you the idea.

<ComboBox ItemsSource="{Binding ListOfItems}">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <ContentControl Content="{Binding}">
                <ContentControl.Style>
                    <Style TargetType="ContentControl">
                        <Setter Property="ContentTemplate">
                            <Setter.Value>
                                <!-- the template for the items in the dropdown list -->
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal">
                                        <CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}" Width="20" />
                                        <TextBlock Text="{Binding DisplayName}" Width="110" />
                                    </StackPanel>
                                </DataTemplate>
                            </Setter.Value>
                        </Setter>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ComboBoxItem}}" Value="{x:Null}">
                                <Setter Property="ContentTemplate">
                                    <Setter.Value>
                                        <!-- the template for the selected item-->
                                        <DataTemplate>
                                            <ItemsControl ItemsSource="{Binding ItemsSource, RelativeSource={RelativeSource AncestorType=ComboBox}}">
                                                <ItemsControl.ItemsPanel>
                                                    <ItemsPanelTemplate>
                                                        <WrapPanel />
                                                    </ItemsPanelTemplate>
                                                </ItemsControl.ItemsPanel>
                                                <ItemsControl.ItemTemplate>
                                                    <DataTemplate>
                                                        <TextBlock Text="{Binding DisplayName}" Margin="0 0 5 0"/>
                                                    </DataTemplate>
                                                </ItemsControl.ItemTemplate>
                                            </ItemsControl>
                                        </DataTemplate>
                                    </Setter.Value>
                                </Setter>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </ContentControl.Style>
            </ContentControl>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

Please refer to the following similar question for more information.

Can I use a different Template for the selected item in a WPF ComboBox than for the items in the dropdown part?

Thanks for this. But what I want to know is how do I bind to a property thats not the item that is selected. I have 2 properites - the List of items which is shown in the dropdown, but then a string property which combines all selected items and I want this shown instead of the selected item. — Danhol86, Jan 25 '17 at 12:19
I ended up using RelativeSource to bind to value from data context - — Danhol86, Jan 25 '17 at 14:09

Change displayed text in XAML Combobox multi selection

1 Answers1