MouseOver highlights a style returning to standard after the second (called by Aero?)

Question

I'm trying to tweak my ComboBoxes to match the rest of the user interface, but I'm having issues with IsMouseOver highlighting. It is highlighted by the color that I point for a second and then fades to the default color, this is a cool effect, but not what I'm going to do. 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 leave the background color?

Answer 1

The problem is really related to the default template for 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 hides the red background.

Although this is a lot, for ComboBox at least you probably want to override the default template for ComboBox. You can get a basic idea of ​​what temlpate is for a ComboBox using the Show Me Template or Blend .

You can use the 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 WPF Visual Studio Designer, and then in the ComboBoxReadonlyToggleButton comment, comment out the ButtonChrome section and replace it with Border. Here is a link to the site where I found the solution - http://www.scriptscoop.net/t/d346cf01d844/cc-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 code to change the background color to DarkOrange - This code got into the ControlTemplate (in the section) for the style for 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 -->