Question

I have a Grid with an Image inside a ScrollViewer. The user needs to be able to zoom in and out of the image. The problem is when I zoom the scrollviewer seems to snap back to the left side of the image although I want the viewer to stay at the zoomed position. The XAML code looks like this

<ScrollViewer Name="ScrollViewer" HorizontalSnapPointsType="None" VerticalSnapPointsType="None" ZoomSnapPointsType="None">
    <Grid x:Name="RenderedGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Image x:Name="RenderedImage" Stretch="Fill" />
        <canvas:CanvasControl Name="DrawingCanvas" Draw="CanvasControl_Draw" ClearColor="Transparent"/>

    </Grid>
</ScrollViewer>

I thought it would be enough with setting the SnapPointType to "None", but that doesn't seem to work.

Answer 1

我写了一篇关于这个问题的博客文章：Why is my zoomable ScrollViewer snapping the image to the left?

问题的第一部分是ScrollViewer本身，需要将HorizontalScrollBarVisibility和VerticalScrollBarVisibility设置为自动。

<ScrollViewer ZoomMode="Enabled" 
              MinZoomFactor="1"
              MaxZoomFactor="4"
              HorizontalScrollBarVisibility="Auto"
              VerticalScrollBarVisibility="Auto">

为了真正起作用，您需要将图像大小限制为某个宽度/高度，如下所示：

<Image Source="{Binding ImageUri}"
       MaxWidth="{Binding DataContext.PageWidth, ElementName=MyPage}"
       MaxHeight="{Binding DataContext.PageHeight, ElementName=MyPage}"/>

您可以在我的博客文章中找到更多详细信息，并在GitHub上找到完整的源代码。

Disabling snap points/bounce back on ScrollViewer in XAML

1 个答案: