WPF canvas drawing very slow

Question

I am building a map editor to easily create 2d levels. To visualize how my level looks like I am using a canvas. On this canvas I can select which block is filled with a certain type ( like solid ). I did add click and drag but because I am live drawing on the canvas it goes very slow and if you draw at a decent speed it skips several block which needs to be drawn.

I already have tried several options ( doing it in another thread. Putting it first in a queue ) but none had a good result. It works now but not with the perfomance I prefer. Because it skips blocks it needs to draw.

I use the following code to draw my rectangles:

 if (currentMap != null)
    {
        mapCanvas.Children.Clear();
        mapCanvas.Width = (currentMap.Breedte * blockScale);
        mapCanvas.Height = (currentMap.Hoogte * blockScale);
        for (int i = 0; i < currentMap.Hoogte; i++)
        {
            for (int j = 0; j < currentMap.Breedte; j++)
            {
                Rectangle blok = new Rectangle();

                blok.Stroke = new SolidColorBrush(Colors.Black);
                blok.StrokeThickness = 0.3;
                blok.Width = blockScale;
                blok.Height = blockScale;
                switch (currentMap.GetElement(j, i))
                {
                    case 0:
                        blok.Fill = new SolidColorBrush(Colors.LightGray);
                        break;
                    case 1:
                        blok.Fill = new SolidColorBrush(Colors.Red);
                        break;
                    case 2:
                        blok.Fill = new SolidColorBrush(Colors.Green);
                        break;
                    case 3:
                        blok.Fill = new SolidColorBrush(Colors.Orange);
                        break;
                    case 4:
                        blok.Fill = new SolidColorBrush(Colors.Yellow);
                        break;
                    default:
                        blok.Fill = new SolidColorBrush(Colors.Black);
                        break;

                }
                blok.SetValue(Canvas.LeftProperty, (double)(blockScale * j));
                blok.SetValue(Canvas.TopProperty, (double)(blockScale * i));

                mapCanvas.Children.Add(blok);
            }
        }
    }

I did came across a solution to draw faster on a canvas on this link: https://stackoverflow.com/questions/23976163/speed-up-adding-objects-to-canvas-in-wpf

But the problem I cannot seem to get it working in my current project or a test project.

I hope you guys can help me to speed the drawing up or at least that it can recognize every block it needs to draw.

For further question please ask I will try to give as much detail as needed

Answer 1

I can't tell from the code sample where the loop is being called from. It seems like it's in the update method, in which case you're updating the entire map of rectangles with every change? This would be very slow. In general when dealing with GDI, GDI+, and WPF, you want to avoid doing any unnecessary work, since it is just slow.

Only update the rectangles that have actually changed between update calls.

You can do this by having a separate map initialisation function that sets up all the rectangles once, and an update function which takes a list of cell references for cells that have changed, and updates just the colour of those cells.