change button background when mouse is over the button

Question

I wanted to change button mousover color , When i could't to change it , I decided to change the background

I use this code but it doesn't work

<Button Name="btnClose" IsHitTestVisible="False">
            <Button.Style>
                <Style TargetType="Button">
                    <Setter Property="Width" Value="50"/>
                    <Setter Property="Height" Value="30"/>
                    <Setter Property="HorizontalAlignment" Value="Right"/>
                    <Setter Property="BorderBrush" Value="Transparent"/>
                    <Setter Property="Background" Value="Transparent"/>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="Red"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>

I use this in usercontrol

Thank you for answer

Was just about to ask that very same thing about `IsHitTestVisible=false`. +1 :D — Chris W., Jul 11 '17 at 05:43
I wanted to change button mousover color , When i could't to change it , I decided to change the background — MPERSIA, Jul 11 '17 at 05:51
AFAIK setting IsHitTestVisible to false will prevent IsMouseOver evaluating to true. — o_weisman, Jul 11 '17 at 05:57
Possible duplicate of [How to remove default mouse-over effect on WPF buttons?](https://stackoverflow.com/questions/3854317/how-to-remove-default-mouse-over-effect-on-wpf-buttons) — o_weisman, Jul 11 '17 at 06:21
Without a good [mcve] and a better explanation of how _exactly_ the code you have behaves, it's not possible to know what answer you need. [This answer below](https://stackoverflow.com/a/45026486) seems the most likely to be useful, but if so then your question really is a duplicate of [How to remove default mouse-over effect on WPF buttons](https://stackoverflow.com/questions/3854317/how-to-remove-default-mouse-over-effect-on-wpf-buttons) proposed above. Default style for `Button` will prevent you from changing the `Background` on mouse-over, because the stock template already sets it to blue — Peter Duniho, Jul 11 '17 at 06:29

score 0 · Accepted Answer · answered Jul 11 '17 at 05:57

For some elements you cannot just change properties in the style. Button is one of them. You really need to change the whole template.

Easiest way is to right click on your button and select Edit Template >> Edit a copy:

This will create you a new Style with the template which you can modify as you want:

<Window.Resources>
    <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>
    </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"/>
    <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="Red"/> <!--HERE-->
                            <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>
    </Style>
</Window.Resources>

Yes bro I tried. It works . But he needs his solution working my solutions works. But without IsHitTestVisible To true button events will not respond. — Ramankingdom, Jul 11 '17 at 07:00

score 0 · Answer 2 · answered Jul 11 '17 at 05:59

The IsHitTestVisible property is causing trouble. Its used only when you are making your own composite controls and don't want some parts to respond on interaction.

Your working XAML should be like

<Button Name="btnClose">
            <Button.Style>
                <Style TargetType="Button">
                    <Setter Property="Width" Value="50"/>
                    <Setter Property="Height" Value="30"/>
                    <Setter Property="HorizontalAlignment" Value="Right"/>
                    <Setter Property="BorderBrush" Value="Transparent"/>
                    <Setter Property="Background" Value="Transparent"/>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="Red"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>

thanks,but when ishittestvisible value is true I can't see background change — MPERSIA, Jul 11 '17 at 06:13

change button background when mouse is over the button

2 Answers2