ZoomContentControl: Items on Canvas not visible in negative quadrants

[vatsashah45]

Master Issue: #1290

Current behavior

Only items in Quadrant 1 are visible. Panning to negative quadrants is not possible.

Expected behavior

All rectangles in all quadrants should be visible, and panning should allow scrolling to negative quadrants.

How to reproduce it (as minimally and precisely as possible)

1. Use the provided XAML code (CanvasZoomWithScrollApp) for drawing rectangles on the Canvas.
2. Observe that items in Quadrants 2, 3, and 4 are not visible.

Nuget Package:

Affected platform(s):

• WebAssembly
• Android
• iOS
• macOS (AppKit)
• Mac Catalyst
• Skia
  • WPF
  • GTK (Linux)
  • Linux Framebuffer
  • Tizen
• Windows

Anything else we need to know?

From the client:

The code is quite simple: it draws Rectangles on Canvas in all four Quadrants with different colors:

<utu:ZoomContentControl IsZoomAllowed="True" IsPanAllowed="True" >
    <Canvas x:Name="MyCanvas"
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        Loaded="Canvas_Loaded">
        <!--Quadrant 1: (+, +) -->
        <Rectangle Width="20" Height="20" Stroke="Black" Fill="LightCoral" Canvas.Left="0" Canvas.Top="0"/>
        <Rectangle Width="20" Height="20" Stroke="Black" Fill="LightCoral" Canvas.Left="500" Canvas.Top="0"/>
        <Rectangle Width="20" Height="20" Stroke="Black" Fill="LightCoral" Canvas.Left="0" Canvas.Top="500"/>
        <Rectangle Width="20" Height="20" Stroke="Black" Fill="LightCoral" Canvas.Left="500" Canvas.Top="500"/>
        <!--Quadrant 2: (-, +) -->
        <Rectangle Width="20" Height="20" Stroke="Black" Fill="LightBlue" Canvas.Left="-20" Canvas.Top="0"/>
        <Rectangle Width="20" Height="20" Stroke="Black" Fill="LightBlue" Canvas.Left="-500" Canvas.Top="0"/>
        <Rectangle Width="20" Height="20" Stroke="Black" Fill="LightBlue" Canvas.Left="-20" Canvas.Top="500"/>
        <Rectangle Width="20" Height="20" Stroke="Black" Fill="LightBlue" Canvas.Left="-500" Canvas.Top="500"/>
        <!--Quadrant 3: (-, -) -->
        <Rectangle Width="20" Height="20" Stroke="Black" Fill="LightGreen" Canvas.Left="-20" Canvas.Top="-20"/>
        <Rectangle Width="20" Height="20" Stroke="Black" Fill="LightGreen" Canvas.Left="-500" Canvas.Top="-20"/>
        <Rectangle Width="20" Height="20" Stroke="Black" Fill="LightGreen" Canvas.Left="-20" Canvas.Top="-500"/>
        <Rectangle Width="20" Height="20" Stroke="Black" Fill="LightGreen" Canvas.Left="-500" Canvas.Top="-500"/>
        <!--Quadrant 4: (+, -) -->
        <Rectangle Width="20" Height="20" Stroke="Black" Fill="Wheat" Canvas.Left="0" Canvas.Top="-20"/>
        <Rectangle Width="20" Height="20" Stroke="Black" Fill="Wheat" Canvas.Left="500" Canvas.Top="-20"/>
        <Rectangle Width="20" Height="20" Stroke="Black" Fill="Wheat" Canvas.Left="0" Canvas.Top="-500"/>
        <Rectangle Width="20" Height="20" Stroke="Black" Fill="Wheat" Canvas.Left="500" Canvas.Top="-500"/>
    </Canvas>
</utu:ZoomContentControl>

In "code behind" I calculate the area occupied by all rectangles in all quadrants and modify the size of a canvas to fit them all.

private void UpdateCanvasSize()
{
    Rect totalArea = CalculateCanvasTotalArea();

    MyCanvas.Width = totalArea.Width;
    MyCanvas.Height = totalArea.Height;
}

private Rect CalculateCanvasTotalArea()
{
    Rect totalArea = default;

    var canvasItems = MyCanvas.Children;
    foreach (UIElement canvasItem in canvasItems)
    {
        Vector2 size = canvasItem.ActualSize;
        Vector3 pos = canvasItem.ActualOffset;

        var nodeArea = new Rect(pos.X, pos.Y, size.X, size.Y);

        if (totalArea == default)
        {
            totalArea = nodeArea;
        }
        else
        {
            totalArea.Union(nodeArea);
        }
    }

    return totalArea;
}

Problem:
Items on canvas in quadrant 1 are visible, but these on quadrants 2,3,4 are not visible.
ZoomContentControl has ability to Pan to negative values, so it should be somehow possible to scroll to negative quadrants, but I cannot figure out how should I do it.