Question

I would like to draw a simple circle and move it to the defined position on X,Y axis by coding.

For example;

There will be 2 buttons on WPF window and there will be a circle on 0,0(x,y). When I clicked on the 1st button, it will go to X = 150 and Y= 40. But the shape has to go there smoothly. I mean I dont want it to be disapear at the current position and appear on the defined position. I want it to go there. How should I do this? Can you explain me the steps? and if possible some example code ?

UPDATED CODE:

    int X = 0;
    int Y = 0;

    public bool inside = true;

    private void Button_Click_1(object sender, RoutedEventArgs e)
    {

        if (inside)
        {
            DoubleAnimation animatex = new DoubleAnimation();
            animatex.To = X++;
            // animatex.Duration = new Duration(TimeSpan.FromSeconds(1));
            // animatex.RepeatBehavior = RepeatBehavior.Forever;
            el.BeginAnimation(Canvas.LeftProperty, animatex);

            DoubleAnimation animatey = new DoubleAnimation();
            animatey.To = Y++;
            // animatey.RepeatBehavior = RepeatBehavior.Forever;
            el.BeginAnimation(Canvas.TopProperty, animatey);
        }
    }

Answer 1

xaml is something like
<Canvas>
<Ellipse Width="10" Height="10" Canvas.Left="0" Canvas.Top="0" Fill="Black" x:Name="el"/>
</Canvas>
Click event of button is something like this

Hope this will work. I have tried it and it worked.