Why is WPF ComboBox styling not as expected? - wpf

Question

I have a WPF app with a ComboBox where I want to style the items but get an unexpected behaviour depending upon which item is selected.
The following XAML snippet demonstrates the problem:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<Style x:Key="ItemStyle" TargetType="{x:Type ComboBoxItem}">
<Style.Triggers>
<Trigger Property="Content" Value="ABC">
<Setter Property="FontStyle" Value="Oblique"/>
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="BoxStyle" TargetType="{x:Type ComboBox}">
<Style.Triggers>
<Trigger Property="Text" Value="ABC">
<Setter Property="FontStyle" Value="Italic"/>
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</Page.Resources>
<Border Width="200">
<ComboBox Style="{StaticResource BoxStyle}"
ItemContainerStyle="{StaticResource ItemStyle}"
Height="20">
<ComboBoxItem>ABC</ComboBoxItem>
<ComboBoxItem>DEF</ComboBoxItem>
<ComboBoxItem>GHI</ComboBoxItem>
</ComboBox>
</Border>
</Page>
This displays a simple ComboBox with three items; ABC, DEF and GHI. Note that ABC is shown in the dropdown with oblique, red text and also in the selection box when selected.
However, if I then open the dropdown again all 3 items are shown oblique and red.
If the DEF or GHI items are selected then these show in normal font, black and on opening the dropdown again show correctly - with ABC still showing oblique, red.
What am I doing wrong?

Answer 1

This is because of Dependency Property Value Precedence. When ABC is selected the ComboBoxItems in the DropDown inherit the FontStyle and Foreground from the ComboBox.
This will fix the code as the ComboBoxItems won't inherit FontStyle and Foreground from the ComboBox:
<Page.Resources>
<Style x:Key="ItemStyle"
TargetType="{x:Type ComboBoxItem}">
<Setter Property="FontStyle"
Value="Normal" />
<Setter Property="Foreground"
Value="Black" />
<Style.Triggers>
<Trigger Property="Content"
Value="ABC">
<Setter Property="FontStyle"
Value="Oblique" />
<Setter Property="Foreground"
Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="BoxStyle"
TargetType="{x:Type ComboBox}">
<Style.Triggers>
<Trigger Property="Text"
Value="ABC">
<Setter Property="FontStyle"
Value="Italic" />
<Setter Property="Foreground"
Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</Page.Resources>
<Border Width="200">
<ComboBox Style="{StaticResource BoxStyle}"
ItemContainerStyle="{StaticResource ItemStyle}"
Height="20">
<ComboBoxItem>ABC</ComboBoxItem>
<ComboBoxItem>DEF</ComboBoxItem>
<ComboBoxItem>GHI</ComboBoxItem>
</ComboBox>
</Border>