OK. I have a ComboBox with blue background and white text. The items shown in this ComboBox are of two kinds: Ones that have children and ones that do not.
- The ones that do not have children are shown as simple
TextBlock
. - The ones that have children are shown as
Expander
, with its Header set to a simpleTextBlock
and its body set to an ItemsControl showing all the children.
I want to show these items in the dropdown list in BLACK color, whereas when selected, I want to show them in WHITE color in the TextBox area of the ComboBox (i.e. not in the dropdown list).
So I googled and found this post. After much trial and error, I have achieved the following:
<Style x:Key="MyComboStyle" TargetType="ComboBox">
<Setter Property="Background" Value="Blue" />
<Setter Property="Foreground" Value="White" />
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<DataTemplate.Resources>
<DataTemplate DataType="{x:Type localVM:CostCenterVM}" x:Key="CCWithoutChildren" >
<TextBlock Text="{Binding CCNumberName}" />
</DataTemplate>
<DataTemplate DataType="{x:Type localVM:CostCenterVM}" x:Key="CCWithChildren">
<Expander>
<Expander.Header>
<TextBlock VerticalAlignment="Center" Text="{Binding CCNumberName}" />
</Expander.Header>
<Expander.Content>
<ItemsControl ItemsSource="{Binding Children}" DisplayMemberPath="CCNumberName"
Background="Transparent" Padding="10,0,0,0" />
</Expander.Content>
</Expander>
</DataTemplate>
</DataTemplate.Resources>
<ContentControl Content="{Binding}">
<ContentControl.Style>
<Style TargetType="ContentControl">
<Style.Triggers>
<DataTrigger Binding="{Binding HasChildren}" Value="False">
<Setter Property="ContentTemplate" Value="{StaticResource CCWithoutChildren}" />
</DataTrigger>
<DataTrigger Binding="{Binding HasChildren}" Value="True">
<Setter Property="ContentTemplate" Value="{StaticResource CCWithChildren}" />
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="Foreground" Value="Black" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border x:Name="Bd"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<ContentPresenter.Resources>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="Black" />
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="True">
<Setter TargetName="Bd" Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
This works for the most part, except in one case. If I select an item from the dropdown that has children, the selected item is shown in BLACK color in the TextBox area, unlike the child-less items which are correctly shown in WHITE. How can I fix this?