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> 

Border is now applied, but the background color is still the default window selection color, how can I rewrite it?

Answer 1

You need to override SystemColors.HighlightBrushKey to override the default brush for the selection. Add a key to 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 it (without changing 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 think you need to work with the Item template, not with the item container.

Answer 4

I had the same problem. The only thing that worked for me was to override the 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>