Why squares inside canvas get distortion after page resize in uwp app

Question

I made a UWP app and in its xaml file I wrote the following:

<Viewbox Height="60" Width="205" VerticalAlignment="Center" HorizontalAlignment="Center">

        <Canvas x:Name="Mycanvas" Height="60" Width="205" />

    </Viewbox>

The intention is to show in Mycanvas with a picture. The picture was created from a Writeablebitmap loaded in a canvas and then some polygons drawn.

When the app is running and I made a resize, the canvas remain in center but the polygons get moved. Is it supposed all remain inside the Viewbox and keep the ratio ?

Answer 1

Hello @Gonzalez, Javier ,

To summarize the current problem. When the page is resized, the canvas remains centered but the polygon moves. This unexpected behavior can be avoided by drawing the polygon directly on the image streaming with WriteableBitmap.

public void DrawRectangleOnBitmap(WriteableBitmap bitmap, int x, int y, int width, int height, Color color)
{
    using (var stream = bitmap.PixelBuffer.AsStream())
    {
        for (int i = 0; i < width; i++)
        {
            // Draw top and bottom sides
            SetPixel(stream, bitmap.PixelWidth, x + i, y, color);
            SetPixel(stream, bitmap.PixelWidth, x + i, y + height - 1, color);
        }
        for (int i = 0; i < height; i++)
        {
            // Draw left and right sides
            SetPixel(stream, bitmap.PixelWidth, x, y + i, color);
            SetPixel(stream, bitmap.PixelWidth, x + width - 1, y + i, color);
        }
    }
}
private void SetPixel(Stream stream, int width, int x, int y, Color color)
{
    int index = (y * width + x) * 4;
    stream.Seek(index, SeekOrigin.Begin);
    stream.WriteByte(color.B);
    stream.WriteByte(color.G);
    stream.WriteByte(color.R);
    stream.WriteByte(color.A);
}

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.