uwpscrollviewerzoomingpanning

UWP: SCrollViewer.ChangeView doesn't scroll if zoom factor is greater than 1


I added a ScrollViewer to my UWP app for Windows 10.

I want to use it both for zooming and panning.

Here is my XAML:

<Page
    x:Class="LiquidTextUWP.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:lt="using:LiquidTextUWP.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
  <ScrollViewer VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden" 
                ZoomMode="Enabled" Background="DarkSeaGreen" Name="ScrollArea" 
                Width="10000" Height="10000">
    <Grid Background="LightGray" Name="Workspace">
      <!-- here I put all my other controls -->
    </Grid>
  </ScrollViewer>
</Page>

For Panning, I added a small event handler for the PointerMoved event, like this:

private double previousX = 0;

public void OnPointerMoved(object sender, PointerRoutedEventArgs e)
{
    if (!(sender is ScrollViewer scrollViewer))
        return; 
    PointerPoint pp = e.GetCurrentPoint(null);
    double deltaX = pp.Position.X - previousX;
    previousDeltaX = pp.Position.X
    bool res = scrollViewer.ChangeView(scrollViewer.HorizontalOffset - deltaX, null, null);
    e.Handled = true;
}

It works nicely (i.e. it actually pans horizontally, and res = true) when scrollViewer.ZoomFactor > 1.

When instead scrollViewer.ZoomFactor < 1, it does nothing (and res = false).

EDIT: I also noticed that when scrollViewer.ZoomFactor < 1, the properties ScrollableWidth and ScrollableHeight goes to 0, while when scrollViewer.ZoomFactor > 1, the properties ScrollableWidth and ScrollableHeight are positive.

How can I enable the ScrollViewer to return true for ChangeView also when the zoom factor is less than 1?


Solution

  • For the sake of the people that will bump into this topic in the future, here's how I solved it:

    I had to set a Width/Height of the ScrollArea way less than the Width/Height of the Workspace element.

    My issue was to set the Width/Height of the ScrollArea to 10000. If I set instead to Auto (or leave it unexpressed) and instead I set the Width/Height of the Workspace to 10000, then I have the wanted effect.