C# WPF ComboBox Mouse over color

Question

When the mouse hover over my ComboBox, I get an awful blue/lightblue pair of color for the backgroung of my ComboBox. I tried the solutions here :ComboBox Mouse over color,

Answer 1

Redefine your comboxItem Template in your window resources

<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>

Answer 2

There it no item in my ComboBox in the test project. I just hover the mouse over it and the whole control is 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 xaml :

<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 3

Your problem arises from ButtonChrome in the ToggleButton's template. Remove it from the ToggleButton.

   ComboBox -> ToggleButton -> ButtonChrome 

Steps :

1) Open Expression Blend and edit a copy of ComboBox's Style , This will give you the Style of the ComboBox + it's Template and all it's TemplateParts , Among them is the problematic ToggleButton.

2) Locate the ToggleButton and it's Style called "ComboBoxReadonlyToggleButton" .

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

The ComboBox's default template (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>

The toggle 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 toggle button's style by replacing ButtonChrome with a 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 4

you can override SystemColors.HighlightBrushKey within the ComboBox scope:

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

the entire XAML can 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>

A followup to your comment:

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

as for your comment about

I could not get anything to work

i would suggest that you will create a new project and test only this XAML (with your ItemSource of course) and see if you can get the result you want. when you will get that, you can move to your real project and see where the styles changes and where is the problem exists.

EDIT#2:

In order to change the color of the ToggleButton i think is best to override the entire ComboBox Style.

i used the

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

The rest of the code and style taken from here.

i would recommend you to read this as well.