How do you change Background for a Button MouseOver in WPF? How do you change Background for a Button MouseOver in WPF? wpf wpf

How do you change Background for a Button MouseOver in WPF?


To remove the default MouseOver behaviour on the Button you will need to modify the ControlTemplate. Changing your Style definition to the following should do the trick:

<Style TargetType="{x:Type Button}">    <Setter Property="Background" Value="Green"/>    <Setter Property="Template">        <Setter.Value>            <ControlTemplate TargetType="{x:Type Button}">                <Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="1">                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>                </Border>            </ControlTemplate>        </Setter.Value>    </Setter>    <Style.Triggers>        <Trigger Property="IsMouseOver" Value="True">            <Setter Property="Background" Value="Red"/>        </Trigger>    </Style.Triggers></Style>

EDIT: It's a few years late, but you are actually able to set the border brush inside of the border that is in there. Idk if that was pointed out but it doesn't seem like it was...


All of the answers so far involve completely replacing the default button behavior with something else. However, IMHO it is useful and important to understand that it's possible to change just the part you care about, by editing the existing, default template for a XAML element.

In the case of dealing with the hover effect on a WPF button, the change in appearance in a WPF Button element is caused by a Trigger in the default style for the Button, which is based on the IsMouseOver property and sets the Background and BorderBrush properties of the top-level Border element in the control template. The Button element's background is underneath the Border element's background, so changing the Button.Background property doesn't prevent the hover effect from being seen.

With some effort, you could override this behavior with your own setter, but because the element you need to affect is in the template and not directly accessible in your own XAML, that approach would be difficult and IMHO overly complex.

Another option would be to make use the graphic as the Content for the Button rather than the Background. If you need additional content over the graphic, you can combine them with a Grid as the top-level object in the content.

However, if you literally just want to disable the hover effect entirely (rather than just hiding it), you can use the Visual Studio XAML Designer:

  1. While editing your XAML, select the "Design" tab.
  2. In the "Design" tab, find the button for which you want to disable the effect.
  3. Right-click that button, and choose "Edit Template/Edit a Copy...". Select in the prompt you get where you want the new template resource to be placed. This will appear to do nothing, but in fact the Designer will have added new resources where you told it, and changed your button element to reference the style that uses those resources as the button template.
  4. Now, you can go edit that style. The easiest thing is to delete or comment-out (e.g. Ctrl+E, C) the <Trigger Property="IsMouseOver" Value="true">...</Trigger> element. Of course, you can make any change to the template you want at that point.

When you're done, the button style will look something like this:

<p:Style x:Key="FocusVisual">  <Setter Property="Control.Template">    <Setter.Value>      <ControlTemplate>        <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>      </ControlTemplate>    </Setter.Value>  </Setter></p:Style><SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/><SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/><SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/><SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/><SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/><SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/><SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/><SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/><SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/><p:Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">  <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>  <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>  <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>  <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>  <Setter Property="BorderThickness" Value="1"/>  <Setter Property="HorizontalContentAlignment" Value="Center"/>  <Setter Property="VerticalContentAlignment" Value="Center"/>  <Setter Property="Padding" Value="1"/>  <Setter Property="Template">    <Setter.Value>      <ControlTemplate TargetType="{x:Type Button}">        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">          <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>        </Border>        <ControlTemplate.Triggers>          <Trigger Property="IsDefaulted" Value="true">            <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>          </Trigger>          <!--<Trigger Property="IsMouseOver" Value="true">            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>          </Trigger>-->          <Trigger Property="IsPressed" Value="true">            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>          </Trigger>          <Trigger Property="IsEnabled" Value="false">            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>            <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>          </Trigger>        </ControlTemplate.Triggers>      </ControlTemplate>    </Setter.Value>  </Setter></p:Style>

(Note: you can omit the p: XML namespace qualifications in the actual codeā€¦I provide them here only because the Stack Overflow XML code formatter gets confused by <Style/> elements that don't have a fully-qualified name with XML namespace.)

If you want to apply the same style to other buttons, you can just right-click them and choose "Edit Template/Apply Resource" and select the style you just added for the first button. You can even make that style the default style for all buttons, using the normal techniques for applying a default style to elements in XAML.


This worked well for me.

Button Style

<Style x:Key="TransparentStyle" TargetType="{x:Type Button}">    <Setter Property="Template">        <Setter.Value>            <ControlTemplate TargetType="Button">                <Border>                    <Border.Style>                        <Style TargetType="{x:Type Border}">                            <Style.Triggers>                                <Trigger Property="IsMouseOver" Value="True">                                    <Setter Property="Background" Value="DarkGoldenrod"/>                                </Trigger>                            </Style.Triggers>                        </Style>                    </Border.Style>                    <Grid Background="Transparent">                        <ContentPresenter></ContentPresenter>                    </Grid>                </Border>            </ControlTemplate>        </Setter.Value>    </Setter></Style>

Button

<Button Style="{StaticResource TransparentStyle}" VerticalAlignment="Top" HorizontalAlignment="Right" Width="25" Height="25"        Command="{Binding CloseWindow}">    <Button.Content >        <Grid Margin="0 0 0 0">            <Path Data="M0,7 L10,17 M0,17 L10,7" Stroke="Blue" StrokeThickness="2" HorizontalAlignment="Center" Stretch="None" />        </Grid>    </Button.Content></Button>

Notes

  • The button displays a little blue cross, much like the one used to close a window.
  • By setting the background of the grid to "Transparent", it adds a hittest, which means that if the mouse is anywhere over the button, then it will work. Omit this tag, and the button will only light up if the mouse is over one of the vector lines in the icon (this is not very usable).