Question

I would like to move the circle by clicking the buttons. For Example;

There is circle on the position of (0,0) and I would like to move it by clicking on X+ button. This will increase X one by one without stopping and circle move on the X position. Then when I click on the Y+ button, It will increase Y just 20 times and the circle start the move on Y axis as well.

I have one code, but I couldn’t move it dynamically. It moves to predefined position.

XAML:

 <Window x:Class="circle_animation.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" Loaded="Window_Loaded" Closed="Window_Closed" >
<Canvas>
    <Ellipse Width="10" Height="10" Canvas.Left="0" Canvas.Top="0" Fill="Black" x:Name="el" />
    <Button Canvas.Left="255" Canvas.Top="266" Content="Move On X" Height="23"  Width="75" Click="Button_Click" />
    <Button Canvas.Left="139" Canvas.Top="272" Content="Move On Y+" Height="23" Name="button1" Width="75" Click="Button2_Click" />
</Canvas>

CODE:

    public int X;
    public int Y;

    public bool inside = true;


    private void Window_Loaded(object sender, RoutedEventArgs e)
    {


        if (inside)
        {

            DoubleAnimation animatex = new DoubleAnimation();

            animatex.To = X;
            el.BeginAnimation(Canvas.LeftProperty, animatex);

            DoubleAnimation animatey = new DoubleAnimation();
            animatey.To = Y;

            el.BeginAnimation(Canvas.TopProperty, animatey);

        }  
    } 


    public void Button_Click(object sender, RoutedEventArgs e)
    {

        if (inside)
        {
            X++;
        }
    }

    public void Button2_Click(object sender, RoutedEventArgs e)
    {

        Y = Y + 20;
    }

This was my idea to move it dynamically, but it doesnt work. Can you help me, please ? Where do I do wrong?

Answer 1

You are confusing a few things here.

First, an animation won’t run forever just because you do not set its duration. Instead the default duration of a DoubleAnimation is 1 second, then it stops.

Second, the animation’s To property won’t magically change just because you change the variable that you assigned it to beforehand. Changes to the animation`s properties would be ignored anyway after it has been started.

I think using animations is the wrong approach to solving your problem. What you want to achieve (a continuously moving object with changeable speed vector) is perhaps best done by utilizing a DispatcherTimer and cyclically updating the object’s position according to the elapsed time.

The following sample code may give you an idea about how this works. You can now change the speed vector however you like (by setting speed.X and speed.Y by some button clicks), and the object will move accordingly. A possible optimization would be not to start the timer immediately, but only when the vector becomes non-zero, and stop it again when speed becomes zero.

private DispatcherTimer timer = new DispatcherTimer(); // timer object
private Vector speed = new Vector(0, 0); // movement in pixels/second, initially zero

public MainWindow()
{
    InitializeComponent();

    timer.Interval = TimeSpan.FromMilliseconds(50); // update 20 times/second
    timer.Tick += TimerTick;
    timer.Start();
}

private void TimerTick(object sender, EventArgs e)
{
    // movement in one interval
    double dx = speed.X * timer.Interval.TotalSeconds;
    double dy = speed.Y * timer.Interval.TotalSeconds;
    // update position
    Canvas.SetLeft(el, Canvas.GetLeft(el) + dx);
    Canvas.SetTop(el, Canvas.GetTop(el) + dy);
}