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?
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.