ComboBox Mouse over color

Question

<ComboBox Grid.Column="1" Grid.Row="1" ItemsSource="{Binding Locations}" SelectedItem="{Binding SelectedLocation}" Margin="5" MinWidth="125">
    <ComboBox.ItemContainerStyle>
        <Style TargetType="{x:Type ComboBoxItem}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Background" Value="Red" />
                    <Setter Property="BorderBrush" Value="Red" />
                    <Setter Property="BorderThickness" Value="2" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </ComboBox.ItemContainerStyle>
</ComboBox>

Now the Border gets applied but the background color is still the standard windows selection color how do i overwrite it?

Answer 1

You need to override your SystemColors.HighlightBrushKey to override default brush for highlight. Add key to your combobox resources like this -

<ComboBox Grid.Column="1" Grid.Row="1" ItemsSource="{Binding Locations}" SelectedItem="{Binding SelectedLocation}" Margin="5" MinWidth="125">
  <ComboBox.Resources>
     <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red"/>
  </ComboBox.Resources>
    <ComboBox.ItemContainerStyle>
        <Style TargetType="{x:Type ComboBoxItem}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="BorderBrush" Value="Red" />
                    <Setter Property="BorderThickness" Value="2" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </ComboBox.ItemContainerStyle>
</ComboBox>

Answer 2

ok

i would do this (without changing the SystemColors.HighlightBrushKey)

<ComboBox Grid.Column="1"
          Grid.Row="1"
          ItemsSource="{Binding Locations}"
          SelectedItem="{Binding SelectedLocation}"
          Margin="5"
          MinWidth="125">
  <ComboBox.ItemContainerStyle>
    <Style TargetType="{x:Type ComboBoxItem}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type ComboBoxItem}">
            <Border x:Name="Bd"
                    SnapsToDevicePixels="true"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Padding="{TemplateBinding Padding}">
              <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
            </Border>
            <ControlTemplate.Triggers>
              <Trigger Property="IsHighlighted"
                       Value="true">
                <Setter Property="Background"
                        Value="Red" />
                <Setter Property="Foreground"
                        Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
                <Setter Property="BorderThickness"
                        Value="2" />
                <Setter Property="BorderBrush"
                        Value="Blue" />
              </Trigger>
              <Trigger Property="IsEnabled"
                       Value="false">
                <Setter Property="Foreground"
                        Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </ComboBox.ItemContainerStyle>

Answer 3

I had the same problem. The only thing which worked for me was to override ComboBoxItems Template.

   <Style TargetType="ComboBoxItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                    <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
                        <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                          ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="False"/>
                                <Condition Property="IsMouseOver" Value="True"/>
                                <Condition Property="IsKeyboardFocused" Value="False"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" TargetName="Bd" Value="Red"/>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="#A826A0DA"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="True"/>
                                <Condition Property="IsMouseOver" Value="False"/>
                                <Condition Property="IsKeyboardFocused" Value="True"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" TargetName="Bd" Value="#3D26A0DA"/>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="#FF26A0DA"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="True"/>
                                <Condition Property="IsMouseOver" Value="True"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" TargetName="Bd" Value="Red"/>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="#99006CD9"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="True"/>
                                <Condition Property="IsMouseOver" Value="False"/>
                                <Condition Property="IsKeyboardFocused" Value="False"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" TargetName="Bd" Value="#3DDADADA"/>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="#FFDADADA"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="False"/>
                                <Condition Property="IsMouseOver" Value="False"/>
                                <Condition Property="IsKeyboardFocused" Value="True"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="#FF26A0DA"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="False"/>
                                <Condition Property="IsMouseOver" Value="True"/>
                                <Condition Property="IsKeyboardFocused" Value="True"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" TargetName="Bd" Value="Red"/>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="#FF26A0DA"/>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>