Drawing an ellipse and then move it to another position

Question

I have drawn an ellipse using an EllipsePoints array which defines the height width and color of the ellipse.

Then using a for loop to get the position of the ellipse using the ellipse points and a random number to set its position:

Random rand = new Random();     

Int32 randomNumber = rand.Next(0, 310);
Int32 randomNumber2 = rand.Next(0, 500);

for (int j = 0; j < 60; j++)
{
    ellipsePoints[j] = new Ellipse() { Width = 20, Height = 20, Fill = Brushes.Red };

    canvas1.Children.Add(ellipsePoints[j]);
}

for (int i = 0; i < 60; i++)
{
    Canvas.SetLeft(ellipsePoints[i], randomNumber2);
    Canvas.SetTop(ellipsePoints[i], randomNumber);
}

What could I do to make the ellipse vanish after a certain amount of time and then appear in another random location?

Answer 1

There are 2 important aspects to this question.

• Timer - In WPF we use the System.Windows.Threading.DispatcherTimer.

• Remove elements- One way is to maintain a copy of the UI element before adding it to the Canvas. I have saved it in a class variable so that I can later remove it from the canvas using the following method

  PaintCanvas.Children.Remove(ellipse);

Create you WPF and add a canvas called PaintCanvas

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="889" Width="1080">
    <Canvas Name="PaintCanvas">
        <Button Canvas.Left="46" Canvas.Top="274" Content="Button" Height="23" Name="button1" Width="75" Click="button1_Click" />
    </Canvas    >
</Window>

The Code. I have documented it.

public partial class MainWindow : Window
{
    int loopCounter;
    private System.Windows.Threading.DispatcherTimer timer;
    Random rand = new Random();
    Ellipse ellipse = null;

    public MainWindow()
    {
        InitializeComponent();

        //Initialize the timer class
        timer = new System.Windows.Threading.DispatcherTimer();
        timer.Interval = TimeSpan.FromSeconds(1); //Set the interval period here.
        timer.Tick += timer1_Tick;            
    }       

    private void button1_Click(object sender, RoutedEventArgs e)
    {
        loopCounter = 10;
        timer.Start();
    }

    private void timer1_Tick(object sender, EventArgs e)
    {
        //Remove the previous ellipse from the paint canvas.
        PaintCanvas.Children.Remove(ellipse);

        if (--loopCounter == 0)
            timer.Stop();

        //Add the ellipse to the canvas
        ellipse=CreateAnEllipse(20,20 );
        PaintCanvas.Children.Add(ellipse);

        Canvas.SetLeft(ellipse, rand.Next(0, 310));
        Canvas.SetTop(ellipse, rand.Next(0, 500));
    }

    // Customize your ellipse in this method
    public Ellipse CreateAnEllipse(int height,int width)
    {
        SolidColorBrush fillBrush = new SolidColorBrush() { Color = Colors.Red };
        SolidColorBrush borderBrush = new SolidColorBrush() { Color = Colors.Black };

        return new Ellipse()
        {
            Height = height,
            Width = width,
            StrokeThickness = 1,
            Stroke = borderBrush,
            Fill = fillBrush
        };     
    }
}