Change button when hovered

Question

I am a beginner and I am looking for a simple way to make a button in WPF application move when it is hovered over.

public MainWindow()
{
    InitializeComponent();

}
private void btnNo_Click(object sender, RoutedEventArgs e)
{

}

Code would help. See here, but instead of changing image source property change position [how-do-i-change-an-image-on-hover-over-in-wpf](http://stackoverflow.com/questions/1502914/how-do-i-change-an-image-on-hover-over-in-wpf) — secretwep, Sep 30 '16 at 23:23
...and the down vote wasn't me, as I would never down vote someone's first question here as a matter of principle. Shrug it off. Just be sure to do a tiny bit more research, and post your current code no matter how simple it is. That gives us something to talk about and shows your willingness to compose a thorough post. — secretwep, Sep 30 '16 at 23:29
I did not post any code because I did not have anything, can't even find anything good on google... I added the button code though — Dominik N, Oct 01 '16 at 00:11

score 0 · Accepted Answer · answered Oct 01 '16 at 01:28

0

You may put the Button in a Grid, and changes its Margin in the button's MouseEnter event, like this:

private void ChangePosition(object sender, RoutedEventArgs e)
{
    var button = (Button)sender;
    var newPosition = new Thickness(10, 90, 40, 80); // assuming this is your new position
    button.Margin = newPosition;
}

answered Oct 01 '16 at 01:28

Ken Hung

752
5
13

This worked, but I would like for it to do it indefinitely, where it will keep changing position everytime hovered on... it works only once atm – Dominik N Oct 02 '16 at 21:27
The `newPosition` in the code is always the same as an example. You may set the `newPosition` based on the current position. – Ken Hung Oct 03 '16 at 05:44

score 0 · Answer 2 · answered Oct 01 '16 at 03:59

Assuming you want it to move back when you cease to hover over it, you can do this in pure XAML by using a style and a property trigger on the Button's IsMouseOver property. (A more typical use of style would be to create it as a resource and share it across various buttons).

    <Button x:Name="button" Content="Button" Height="40" Width="60">
        <Button.Style>
            <Style TargetType="Button">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="RenderTransform">
                            <Setter.Value>
                                <TranslateTransform X="10" Y="10"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>

Change button when hovered

2 Answers2