ZoomContentControl does not work with ScrollViewer

[MartinZikmund]

Current behavior

the size seems to not be updated correctly and scrollbars do not pop up as they should

Expected behavior

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

Nuget Package:

Package Version(s):

Affected platform(s):

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

IDE:

• Visual Studio 2022
• Visual Studio 2019
• Visual Studio Code
• Visual Studio for Mac
• Rider Windows
• Rider macOS

Relevant plugins:

Anything else we need to know?

[MartinZikmund]

@vatsashah45 Please tag @kucint to ask for additional information regarding this issue

[vatsashah45]

Hi @kucint! Could you please share some additional information about this issue? What exactly is the problem, and what are the steps to reproduce it? Thanks!

[kucint]

Hi @vatsashah45, I am on my way to give you some feedback. Need a bit of time though...

[kucint]

Hi @vatsashah45, I investigated the ZoomContentControl in more depth.
Good news, it seems to behave correctly.
The problem is my lack of knowledge:

• I do not know how to correctly use the ScrollViewer in my scenario
• I do not know how to correctly use the ScrollViewer together with ZoomContentControl in my scenario.

I created the repo project, quite simple, and I will try to explain my issues with help of it.
Have a look please: CanvasZoomWithScrollApp.
Feel free to modify the repo.

Issue 1:

App works on Desktop, but crashes on WindowsAppSdk.

Issue 2:

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.

Issue 3:

zoom out shall automatically pan
(coming soon)
This issue may be a side effect of Issue 2 so I suggest to postpone it till it Issue 2 is addressed.

Issue 4:

zoom into mouse position shall be optional
(coming soon)
not sure of it,
This issue may be a side effect of Issue 2 so I suggest to postpone it till it Issue 2 is addressed.

Issue 5:

I would like to have a possibility to define what triggers the 'pan' action.
For example:

• the pan is triggered when
  • dragging is started with a specific mouse button, e.g. Right MB
  • and some modifier key is pressed e.g. CTRL
  • and mouse button has been pressed and dragged directly on canvas, but not on any of its children (rectangles on canvas)

Hi @vatsashah45,
I think that's all for the moment.
Looking forward for your feedback!

[kucint]

@vatsashah45,
please note that I do not clip Canvas per purpose here to make elements "out of range" visible. In final implementation, the clipping must be active.

[vatsashah45]

@kucint! Thanks for getting back to me with the details!

Issue 1:

The WinAppSdk build should be fixed by this PR: #1297

Issue 2:

Issue 3:

(waiting for more details)

Issue 4:

(waiting for more details)

Issue 5:

Currently, the ZoomContentControl supports panning when using Shift + Zoom In/Out, but it sounds like you’d like additional flexibility in defining how panning is triggered.

Could you clarify your requirements? Thanks.

And here's the link to the documentation of ZoomContentControl
Note: These docs are not yet published on our website, but this is for your reference :)

[jeromelaban]

@vatsashah45 would you mind splitting this issue in 5 issues? Thanks!