MouseOver highlighting style returning to default after a second (Caused by Aero?)

Question

I'd trying to style my ComboBoxes to match the rest of the UI but I'm having problems with the IsMouseOver highlighting. It highlights with the color I specify for a second and then fades back to the default color, kind of a cool effect but not what I'm going for. Here is my style:

<Style TargetType="ComboBox">
    <Style.Triggers>
        <Trigger Property="ComboBox.IsMouseOver" Value="True">
            <Setter Property = "Background" Value="Red"/>
        </Trigger>
    </Style.Triggers>
</Style>

What can I do to make the background color stay?

Answer 1

The problem is indeed due to the default template for the ComboBox. If you use Reflector to open the PresentationFramework.Aero assembly you can take a look at the ButtonChrome class. There is a method called OnRenderMouseOverChanged that is hiding the Red background.

Even though it is a lot of work, for ComboBox at least, you probably will want to override the default template for the ComboBox. You can get the basic idea of what the ComboBox temlpate is like by using Show Me The Template or Blend.

You can use your same style to override the template.

<Style TargetType="{x:Type ComboBox}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBox}">
                <!-- Template Here -->
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 2

You can override this behavior by getting a copy of the default template from the WPF Visual Studio Designer and then in the ComboBoxReadonlyToggleButton style comment out the ButtonChrome section and replace it with a Border. Here is a link to the site where I found the solution - http://www.scriptscoop.net/t/d346cf01d844/c-c-wpf-combobox-mouse-over-color.html

Here is my code snippet

<Style x:Key="ComboBoxReadonlyToggleButton" TargetType="{x:Type ToggleButton}">
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="IsTabStop" Value="false"/>
  <Setter Property="Focusable" Value="false"/>
  <Setter Property="ClickMode" Value="Press"/>
  <Setter Property="Background" Value="Transparent"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ToggleButton}">
        <!-- Replace the ButtonChrome - this eliminated the following
             problem:  When the mouse was moved over the ComboBox
             the color would change to the color defined in ___ but 
             then would  
             immediately change to the default Aero blue
             gradient background of 2 powder blue colors  - 
             Had to comment out the          
             below code and replace it as shown
             <Themes:ButtonChrome x:Name="Chrome" BorderBrush="                 {TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" SnapsToDevicePixels="true">
               <Grid HorizontalAlignment="Right" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
                 <Path x:Name="Arrow" Data="{StaticResource DownArrowGeometry}" Fill="Black" HorizontalAlignment="Center" Margin="3,1,0,0" VerticalAlignment="Center"/>
               </Grid>
             </Themes:ButtonChrome>-->

         <!-- Here is the code to replace the ButtonChrome code -->
         <Border x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
           <Grid HorizontalAlignment="Right" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
             <Path x:Name="Arrow" Data="{StaticResource DownArrowGeometry}" Fill="Black" HorizontalAlignment="Center" Margin="3,1,0,0" VerticalAlignment="Center"/>
           </Grid>
         </Border>
       <!-- End of code to replace the Button Chrome -->

I also added some code to change the background color to DarkOrange - This code went into the ControlTemplate (in the section) for the Style for the ComboBox.

<!-- Hover Code - Code that was added to change the ComboBox background 
     color when the use hovers over it with the mouse -->
<Trigger Property="IsMouseOver" Value="True">
   <Setter Property="Background" Value="DarkOrange"></Setter>
</Trigger>
<!-- Hover Code - End -->