CODEWITHSUNDEEP
c#wpf
shootstuff007
shootstuff007

Reputation: 31

C# WPF Make a Button Randomly Move When Moused Over

I'm making a WPF application using C# and Visual Studio and I need a button to jump to a random location in the window when the mouse hovers over it. I then need the same thing to happen when you hover over it again. I also don't need an animation, just for it to jump there.

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void butNo_MouseEnter(object sender, MouseEventArgs e)
    {

    }
}

I tried this but it didn't work and is also an animation:

<Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation From="0" To="100" Duration="0:0:2" Storyboard.TargetProperty="(Canvas.Left)" AutoReverse="False" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>

Any help would be much appreciated, thanks.

Edit:

Tried this but 'Location' comes with error code CS1061 in VS.

private void butNo_MouseEnter(object sender, MouseEventArgs e)
    {
        Random x = new Random();
        Point pt = new Point(int.Parse(x.Next(200).ToString()), int.Parse(x.Next(250).ToString()));
        butNo.Location = pt;
    }

Upvotes: 3

Views: 3280

Answers (2)

Mike Eason
Mike Eason

Reputation: 9723

Here's a solution using a Canvas and animations.

<Canvas Name="cnv">
    <Button Name="btn"
            Content="Click Me!"
            IsTabStop="False"
            Canvas.Left="0"
            Canvas.Top="0"
            MouseEnter="Button_MouseEnter"/>
</Canvas>

And the code-behind:

Random rnd = new Random();

private void Button_MouseEnter(object sender, MouseEventArgs e)
{
    //Work out where the button is going to move to.
    double newLeft = rnd.Next(Convert.ToInt32(cnv.ActualWidth - btn.ActualWidth));
    double newTop = rnd.Next(Convert.ToInt32(cnv.ActualHeight - btn.ActualHeight));

    //Create the animations for left and top
    DoubleAnimation animLeft = new DoubleAnimation(Canvas.GetLeft(btn), newLeft, new Duration(TimeSpan.FromSeconds(1)));
    DoubleAnimation animTop = new DoubleAnimation(Canvas.GetTop(btn), newTop, new Duration(TimeSpan.FromSeconds(1)));

    //Set an easing function so the button will quickly move away, then slow down
    //as it reaches its destination.
    animLeft.EasingFunction = new CubicEase() { EasingMode = EasingMode.EaseOut };
    animTop.EasingFunction = new CubicEase() { EasingMode = EasingMode.EaseOut };

    //Start the animation.
    btn.BeginAnimation(Canvas.LeftProperty, animLeft, HandoffBehavior.SnapshotAndReplace);
    btn.BeginAnimation(Canvas.TopProperty, animTop, HandoffBehavior.SnapshotAndReplace);
}

And here is a gif of it in action.

Upvotes: 1

TrialAndError
TrialAndError

Reputation: 1854

I really don't normally like doing homework problems for people, but I'm bored at work so here you go.

You need to just use the Margin and update the Left and Top values to random numbers within the height/width of your grid so it doesn't go outside of the view.

Also, make sure to use IsTabStop="False" otherwise, you could tab to it and still click it.

So, for the simplest case using codebehind:

XAML:

<Window x:Class="mousemove.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid x:Name="Grid1">
    <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="0,0,0,0" Name="button1" Width="75" MouseEnter="button1_MouseEnter" IsTabStop="False"/>
</Grid>

MainWindow.xaml.cs

    private void button1_MouseEnter(object sender, MouseEventArgs e)
{
    int maxLeft = Convert.ToInt32(Grid1.ActualWidth - button1.Width);
    int maxTop = Convert.ToInt32(Grid1.ActualHeight - button1.Height);
    Random rand = new Random();
    button1.Margin = new Thickness(rand.Next(maxLeft), rand.Next(maxTop), 0, 0);
}

Upvotes: 0

Related Questions