C# WPF ComboBox Mouse over color

c#, combobox, wpf

Solution

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>

Problem

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

Original source

Related problems