How can I make the program draw objects in order after a certain interval of time?

Question

WPF

Let's say we have the following definition in the first file:

using System.Windows.Media;
using System.Windows.Shapes;

namespace Visual
{
    public class TPoint
    {

        // Coords of all objects in this project will be indicated by the upper left edge
        private Rectangle rectangle;
        private Brush pointColor;
        private int regardingPointSize;
        private int pointCoordX;
        private int pointCoordY;

        public TPoint(int _x, int _y, int _size, Brush _color)
        {
            pointColor = _color;
            pointCoordX = _x * TBasicConstants.getBasicSizeOfBlock();
            pointCoordY = _y * TBasicConstants.getBasicSizeOfBlock();
            regardingPointSize = _size * TBasicConstants.getBasicSizeOfBlock();

            rectangle = new Rectangle
            {

                Fill = pointColor,
                Width = regardingPointSize,
                Height = regardingPointSize
            };
        }

        public int getXCoord ()
        {
            return pointCoordX;
        }
        public int getYCoord ()
        {
            return pointCoordY;
        }
        public Rectangle getPoint()
        {
            return rectangle;
        }

    }
}

In the second, where the smallest constant is described:

namespace Visual
{
    class TBasicConstants
    {
        private const int basicSizeOfBlock = 15;

        public static int getBasicSizeOfBlock()
        {
            return basicSizeOfBlock;
        }
    }
}

And in the third where the elements are drawn:

using System.Threading;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace Visual
{
    /// <summary>
    /// Логика взаимодействия для MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {

        public MainWindow()
        {
            InitializeComponent();

            for (int i = 0; i <=5; i++)
            {
                TPoint point = new TPoint(5, i, 1, Brushes.Red);
                drawTPointElement(point);
            }
        }

        public void drawTPointElement(TPoint _rectangle)
        {
            Canvas.SetLeft(_rectangle.getPoint(), _rectangle.getXCoord());
            Canvas.SetTop(_rectangle.getPoint(), _rectangle.getYCoord());
            Thread.Sleep(1000);
            mainCanvas.Children.Add(_rectangle.getPoint());
        }

    }
}

So, what are the ways to make the elements in the loop appear in order after a certain interval of time?
And not as it happened: the program "sleeps" for one second after initializing each object, and then shows everything at once (that is, the program hangs before starting because of Thread.sleep 'number of iterations in the for loop * number specified in thread.sleep' seconds)

Answer 1

You have a problem due to the fact that you freeze the main thread (which should draw everything) all the time. And you do everything in the constructor, when no one has even shown the form yet.
Try changing yours drawTPointElementlike this:

public async Task drawTPointElement(TPoint _rectangle)
{
    Canvas.SetLeft(_rectangle.getPoint(), _rectangle.getXCoord());
    Canvas.SetTop(_rectangle.getPoint(), _rectangle.getYCoord());
    await Task.Delay(1000);
    mainCanvas.Children.Add(_rectangle.getPoint());
}

And in Main, wrap the loop in Task.Run like this:

Task.Run(async () =>
{
    for (int i = 0; i <=5; i++)
    {
        TPoint point = new TPoint(5, i, 1, Brushes.Red);
        await drawTPointElement(point);
    }
});

The only thing that you most likely will have errors with this approach is that adding to Children can occur from another thread, for this you can wrap mainCanvas.Children.Add(_rectangle.getPoint());it in something like Dispatcher.Invoke

Answer 2

According to the timer,
https://docs.microsoft.com/ru-ru/dotnet/api/system...
At startup, we create all objects for rendering, put them in a list or array, and draw them in order in the timer