C # WPF ComboBox Mouse over color

Question

When the mouse hovers over my ComboBox, I get a terrible blue / light blue pair for the backgroung of my ComboBox. I tried the solutions here: ComboBox Mouse over color , WPF Combobox Mouse Over , How is the ComboBox Background style on a Hover mouse? or WPF combobox default hover color on togglebutton , but that doesn’t change anything, I still get the default colors on hover.

Any suggestions?

Thanks to everyone in advance, Demasiado.

Here is the XAML code:

<Window x:Class="Homepage.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" <Window.Resources> <Storyboard x:Key="TileZoomIn"> <ThicknessAnimation Storyboard.TargetProperty="Margin" From="10" To="1" Duration="0:0:0.1"/> </Storyboard> <Storyboard x:Key="TileZoomOut"> <ThicknessAnimation Storyboard.TargetProperty="Margin" From="1" To="10" Duration="0:0:0.1"/> </Storyboard> <DropShadowEffect x:Key="DropShadowEffect" BlurRadius="20" Opacity="1" ShadowDepth="0" Color="White"/> </Window.Resources> <Grid ShowGridLines="True"> <ComboBox Name="comboBoxTRIG" FontSize="40" Width="210" Height="98" HorizontalAlignment="Left" HorizontalContentAlignment="Center" Margin="40,-180,0,256" Background="Transparent" BorderBrush="Transparent" Foreground="White" BorderThickness="0"> <ComboBox Margin="25" Width="130" Height="50"> <ComboBox.Resources> <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Green"/> </ComboBox.Resources> </ComboBox> </ComboBox> </Grid> </Window> 

Answer 1

Your problem comes from ButtonChrome in the ToggleButton template. Remove it from ToggleButton.

  ComboBox -> ToggleButton -> ButtonChrome 

Steps:

1) Open Expression Blend and edit a copy of ComboBox Style, this will give you the ComboBox + it Template and all its TemplateParts, among which the problematic ToggleButton.

2) Find the ToggleButton and Style called ComboBoxReadonlyToggleButton.

3) In "ComboBoxReadonlyToggleButton" replace Themes: ButtonChrome with Border (as shown in the 3rd block of code below).

The default template for ComboBox (simplified!):

 <ControlTemplate TargetType="{x:Type ComboBox}"> <Grid x:Name="MainGrid" SnapsToDevicePixels="true"> <Popup x:Name="PART_Popup"> ..... </Popup> <ToggleButton Style="{StaticResource ComboBoxReadonlyToggleButton}"/> <ContentPresenter ... /> </Grid> </ControlTemplate> 

Switch button Style + Template (Simplified!).

 <Style x:Key="ComboBoxReadonlyToggleButton" TargetType="{x:Type ToggleButton}"> <Setter Property="Background" Value="Transparent"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ToggleButton}"> <Themes:ButtonChrome x:Name="Chrome" ....> <Grid> <Path x:Name="Arrow" /> </Grid> </Themes:ButtonChrome> </ControlTemplate> </Setter.Value> </Setter> </Style> 

What you need to do is to override the default ComboBox template and edit the style of the toggle button, replacing ButtonChrome with Border:

  <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ToggleButton}"> <Border x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true"> <Grid> <Path x:Name="Arrow" /> </Grid> </Border> </ControlTemplate> </Setter.Value> </Setter> 

Answer 2

you can override SystemColors.HighlightBrushKey in the ComboBox scope:

 <ComboBox.Resources> <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Green"/> </ComboBox.Resources> 

all XAML might be something like this:

 <Grid> <ComboBox Margin="25" Width="130" Height="50"> <ComboBox.Resources> <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Green"/> </ComboBox.Resources> <ComboBox.ItemsSource> <Binding Path="Collection" Source="{StaticResource viewmodel}"/> </ComboBox.ItemsSource> </ComboBox> </Grid> 

Comment on your comment:

To ignore the viewmodel and my ItemSource , you should use your own, this was just for demonstration.

as for your comment about

I could not get anything to work

I would suggest that you create a new project and test only this XAML (of course, with your ItemSource) and see if you can get the desired result. when you get it, you can go to your real project and see where the styles change and where the problem is.

EDIT # 2:

To change the color of a ToggleButton , it is best to override the entire ComboBox style.

I used

  <ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}"> 

The rest of the code and style is taken from here .

I would recommend you read this one .

Answer 3

There is no item in my ComboBox in a test project. I just hovered over it and the entire control was blue. Here is the .cs

 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace WpfApplication1 { /// <summary> /// Logique d'interaction pour MainWindow.xaml /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } } } 

Here is the haml:

 <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Grid> <ComboBox Name="comboBoxTRIG" FontSize="40" Width="210" Height="98" HorizontalAlignment="Left" HorizontalContentAlignment="Center" Margin="42,38,0,184" Background="Red" BorderBrush="Transparent" Foreground="White" BorderThickness="0"> <ComboBox Width="130" Height="50"> <ComboBox.Resources> <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Green"/> </ComboBox.Resources> </ComboBox> </ComboBox> </Grid> </Window> 

Answer 4

Override the comboxItem template in the resources of your window.

 <Style TargetType="{x:Type ComboBoxItem}" BasedOn="{StaticResource {x:Type ComboBoxItem}}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ComboBoxItem}"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Margin="{TemplateBinding Margin}" Padding="{TemplateBinding Padding}"> <ContentPresenter Margin="{TemplateBinding Margin}" VerticalAlignment="{TemplateBinding VerticalAlignment}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}"/> </Border> </ControlTemplate> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="Red"/> </Trigger> </Style.Triggers> </Style>