WPF: unique style for each combo box item bound to dictionary

Question

A ComboBox bound to the dictionary (of Enum, String). Selected value path is dictionary's Key.

Is it possible to set individual style for each combo box item in XAML?

Answer 1

In the following I use a custom enum called Cards, that has constants Skull, Hearts and others for demonstration purposes. You can simply use your enum type instead.

Item Container Style Using Data Triggers

You could create an items container style with triggers for each enum value.

<Style x:Key="EnumComboBoxItemStyle"  TargetType="{x:Type ComboBoxItem}">
   <Style.Triggers>
      <DataTrigger Binding="{Binding Key}" Value="{x:Static local:Cards.Skull}">
         <Setter Property="Foreground" Value="Blue"/>
      </DataTrigger>
      <DataTrigger Binding="{Binding Key}" Value="{x:Static local:Cards.Hearts}">
         <Setter Property="Foreground" Value="Red"/>
      </DataTrigger>
   </Style.Triggers>
</Style>

<ComboBox ItemContainerStyle="{StaticResource EnumComboBoxItemStyle}" ...>

Item Container Style Selector

Another option is to create a style selector if you have multiple distinct styles like this:

<Style x:Key="SkullComboBoxItemStyle" TargetType="{x:Type ComboBoxItem}">
   <Setter Property="Foreground" Value="Green"/>
</Style>
<Style x:Key="HeartsComboBoxItemStyle" TargetType="{x:Type ComboBoxItem}">
   <Setter Property="Foreground" Value="Red"/>
</Style>
<!-- ...other styles. -->

The style selector determines the style based on the enum value.

public class CardsKeyStyleSelector : StyleSelector
{
   public override Style SelectStyle(object item, DependencyObject container)
   {
      if (container is FrameworkElement element && item is KeyValuePair<Cards, string> keyValuePair)
      {
         switch (keyValuePair.Key)
         {
            case Cards.Skull:
               return element.FindResource("SkullComboBoxItemStyle") as Style;
            case Cards.Hearts:
               return element.FindResource("HeartsComboBoxItemStyle") as Style;
            // ...other cases.
         }
      }

      return null;
   }
}

You can assign the style selector to your combo box and it will choose the right style.

<ComboBox ...>
   <ComboBox.ItemContainerStyleSelector>
      <local:CardsKeyStyleSelector/>
   </ComboBox.ItemContainerStyleSelector>
</ComboBox>