Change control background when mouse is over it

Question

I have found different pieces of codes that are supposed to change the background of a control when the mouse hovers it. I haven't been able to make any of them work. This is the piece of code that I'm using right now. I don't know what I'm missing, I'm specifying everything.

<Window.Resources>
    <Style x:Key="HoverButton" TargetType="{x:Type Button}">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="#FFA9DE4E"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

Im also specifying the Style I want to apply to the specific control, in this case is a button.

<!-- Start button -->
    <Button x:Name="btnStart" Style="{StaticResource HoverButton}" Content="Start" Margin="503,411,10,10" FontWeight="Bold" BorderBrush="#FFA9DE4E" Click="BtnNext_Click" Foreground="#FFA9DE4E" Background="#FF222831">
        <Button.Effect>
            <DropShadowEffect Color="#FFA9DE4E" ShadowDepth="1" BlurRadius="20" Direction="320"/>
        </Button.Effect>
    </Button>

When I hover the button nothing changes.

I got it from that post however I took out the setters since I'm already setting those properties through the Properties menu. Leaving those setters would make the buttons lose the original hover color. — Frank Fernandez, Jul 15 '19 at 15:30
Honestly your code seems to be all correct, it is working with me, I have just removed the margin from Button as I could not see the button with such a large value of Margin. — Umar, Jul 16 '19 at 18:42
Let me know if the above helps you. Also, if it doesn't help, I would look into it again. — Umar, Jul 16 '19 at 18:58

score 0 · Answer 1 · answered Jul 17 '19 at 08:50

Try to modify the button template like this:

<Button Content="Button" HorizontalAlignment="Center" Click="Button_Click" VerticalAlignment="Center" Width="75">
                    <Button.Template>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border x:Name="bdr_main" BorderThickness="1" BorderBrush="Black" Background="LightGray">
                                <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="bdr_main" Property="Background" Value="#FFA9DE4E"/>
                                </Trigger>
    //You can also change the color at the click like this:
                                <Trigger Property="IsPressed" Value="True">
                                    <Setter TargetName="bdr_main" Property="Background" Value="Red"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                </Button.Template>
            </Button>

By modifying the template, you can stylize your button as you wish.

Hoping to help you.

Change control background when mouse is over it

1 Answers1