ComboBox change selected item background color by trigger condition

Question

I am trying to do some operations on combo box in wpf, first thing first my combo box looks like:

<ComboBox SelectedValuePath="Key" DisplayMemberPath="Value.ModuleName" controls:TextBoxHelper.Watermark="All" Height="2" IsSynchronizedWithCurrentItem="True" 
    ItemsSource="{Binding Modules}" commands:PropertyChangeBehavior.Command="{Binding ModuleCommand}" 
    SelectedValue="{Binding SelectedModule, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}">

<ComboBox.ItemContainerStyle>
     <Style TargetType="ComboBoxItem">
         <Style.Triggers>
              <DataTrigger Binding="{Binding Path=Value.IsWarning }" Value="True">
                    <Setter Property="Background" Value="#FF6666" />
              </DataTrigger>
          </Style.Triggers>
      </Style>
</ComboBox.ItemContainerStyle>

</ComboBox>

And what it does is, when in combo box dictionary class property is warning is set to true i am getting coloured background, and it works fine. But it does not work when that element selected, is there any way to do when, selected element has is warning property set it would change it selected background as well and if its false it behaves normal, so far I tried adding one more trigger:

<DataTrigger Binding="{Binding Path=SelectedItem.Content}" Value="True">
   <Setter Property="Background" Value="#FF6666" />
</DataTrigger>

also:

  <Trigger Property="IsSelected" Value="true">
    <Setter Property="Background" Value="#FF6666"/>
  </Trigger>

But no luck, is such thing possible.

Answer 1

It certainly is possible, yes.

The problem is that the default styles for e.g. the ComboBox and ListBox set triggers for their selected items which cannot be overridden. Therefore we need to define a custom template for the ComboBoxItem.

So I came up with the following, very simple ComboBox style to be kind of a starting point to you. It's far from being complete or beautiful, but it provides the requested functionality.

<Style TargetType="{x:Type ComboBoxItem}">
     <Style.Resources>
         <SolidColorBrush x:Key="WarningBrush" Color="#FF6666" />
         <SolidColorBrush x:Key="WarningHighlightedBrush" Color="#FF8888" />
         <SolidColorBrush x:Key="DefaultHighlightedBrush" Color="LightBlue" />
     </Style.Resources> 
     
     <Setter Property="Background" Value="{StaticResource WarningBrush}" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                     <Border x:Name="myBorder" Background="{TemplateBinding Background}">
                        <ContentPresenter />
                     </Border>
                     <ControlTemplate.Triggers>
                         <MultiDataTrigger>
                             <MultiDataTrigger.Conditions>
                                 <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsSelected}" Value="True"/>
                                 <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=Value.IsWarning}" Value="True"/>
                             </MultiDataTrigger.Conditions>
                             <Setter TargetName="myBorder" Property="Background" Value="{StaticResource WarningHighlightedBrush}" />
                         </MultiDataTrigger>
                         <MultiDataTrigger>
                             <MultiDataTrigger.Conditions>
                                 <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsSelected}" Value="True"/>
                                 <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=Value.IsWarning}" Value="False"/>
                             </MultiDataTrigger.Conditions>
                             <Setter TargetName="myBorder" Property="Background" Value="{StaticResource DefaultHighlightedBrush}" />
                         </MultiDataTrigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>

The style above produces these results:

---

Let me know if it worked for you as well and if you have any other issues / question regarding the proposed style.