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, WPF Combobox Mouse Over, How to style ComboBox Background on Mouse Hover? or WPF combobox default hover color on togglebutton, but it doesn't change anything, I still get the default colors while hovering.

Any suggestions ?

Thank you all 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 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>