Zooming and panning a image in a ScrollView smaller than the image

[torleifat]

So I've been struggling a bit with finding a solution to this. The gist of it is: I have an Image I want to be able to zoom and pan through a ScrollView. The ScrollView will be smaller in dimension than the image, and most likely not have the same aspect ratio as the image.

What I found was that if I apply no stretching to the image and put it in a smaller ScrollView the image will only render the part of the image that is initially visible through the ScrollView. In other words when I pan around the image outside what was originally visible I only get a blank screen(or aquamarine as the background color in the case of the image below). The bounds on the panning seem to follow the image's original size.

The original image is this one:

In my case the ScrollView is half the size of the original image and that tracks with what is actually being rendered.

My code for this example is pretty much the same as the WinUI 3 Gallery App except that I made the ScrollView half the size and removed the alignment in the image so that it'll start from the top left corner and my app is in C++.

      <ScrollView Height="133" Width="200" ContentOrientation="None"
                  ZoomMode="Enabled" IsTabStop="True"
                  VerticalAlignment="Top" HorizontalAlignment="Left"
                  HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto"
                  VerticalScrollMode="Auto" VerticalScrollBarVisibility="Auto">
        <Image Source="ms-appx:///Assets/cliff.jpg" AutomationProperties.Name="cliff" Stretch="None" />
      </ScrollView>

So does anyone know if there's a way to force the whole image to be rendered? If my ScrollView was guaranteed to be the same aspect ratio as the image I could probably set Stretch to Fill and it would work, but that's not likely to be the case.

On a sidenote, I get a bucketload of messages in my output whenever I scroll in the ScrollView, like a hundred of these:

onecoreuap\windows\moderncore\inputv2\inputhost\inside\lifted\contentisland.cpp(2444)\Microsoft.UI.Input.dll!00007FF82725F43B: (caller: 00007FF822E2208F) ReturnHr(112) tid(a444) 80070490 Element not found.
onecoreuap\windows\moderncore\inputv2\inputhost\inside\lifted\contentisland.cpp(1264)\Microsoft.UI.Input.dll!00007FF82725F4B6: (caller: 00007FF82725F41C) ReturnHr(113) tid(a444) 80070490 Element not found.
    Msg:[Bridges should always configure HostProvider for WM_GETOBJECT __before__ GetAutomationHostProvider is called.] 
onecoreuap\windows\moderncore\inputv2\inputhost\inside\lifted\contentisland.cpp(2444)\Microsoft.UI.Input.dll!00007FF82725F43B: (caller: 00007FF822E2208F) ReturnHr(114) tid(a444) 80070490 Element not found.

So not sure what's going on there..

[torleifat]

Something I now realize (that I probably should have realized before posting) is that a possible workaround is to set the Stretch property to Uniform and then when the ImageOpened event fires zoom far enough to fill the ScrollBox dimensions. Then the ScrollView will keep the panning contained within the bounds of the image.

It looks kind of weird as the page is loading and the zoom is going on, but that part could be hidden by waiting for the zoom operation to finish and only then show the image probably.