WPF combo box header

Question

I need to show only the Icon in the combo box if the combo box is clicked the icon and the text needs to be shown. As I am not familiar with how to achieve this.

Please help me in achieving this.

<ComboBox Name="cmbColors">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Rectangle Fill="{Binding Name}" Width="16" Height="16" Margin="0,2,5,2" />
                        <TextBlock Text="{Binding Name}" />
                    </StackPanel>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>

This will show the rectangle and text in the combo box and the drop down of the combo box. But my requirement is only to show the color filled rectangle in the combo box.

It sounds like you need to attach a command to the combobox (selectionchanged event would probably be appropriate) and create a binding to the visibility property of your textblock that changes when selected. — Sudsy1002, Apr 02 '18 at 14:42
You mean you want a different template for the selecteditem which is shown when the combo is NOT dropped down to the template of the items shown in the popup when it's dropped down? https://stackoverflow.com/questions/21776117/show-selected-item-in-combobox-with-custom-item-template — Andy, Apr 02 '18 at 15:00

Xavier · Accepted Answer · 2018-04-03T05:13:16.283

I am not sure whether I understand what you are trying to do, but my best guess is that you want to hide the text block if some other control has focus. If so, you can do something like this:

<ComboBox>
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Rectangle Fill="{Binding Name}" Width="16" Height="16" Margin="0,2,5,2" />
                <TextBlock x:Name="text" Text="{Binding Name}" />
            </StackPanel>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Value="False">
                    <Setter TargetName="text" Property="Visibility" Value="Collapsed" />
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

If you are instead trying to say that you want a different template for the header than for the dropdown, then you could do something like described in one of the answers to this question.

<ComboBox>
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Rectangle Fill="{Binding Name}" Width="16" Height="16" Margin="0,2,5,2" />
                <TextBlock x:Name="text" Text="{Binding Name}" />
            </StackPanel>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type ComboBoxItem}}}" Value="{x:Null}">
                    <Setter TargetName="text" Property="Visibility" Value="Collapsed" />
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

My requirement is the second one, I will try this in my sample and let you know whether it is working for me. Thanks for the help. — Venkat, Apr 03 '18 at 06:47

WPF combo box header

1 Answers1