CODEWITHSUNDEEP
xamlzoomingscrollvieweruwp
stonecompass
stonecompass

Reputation: 548

Disabling snap points/bounce back on ScrollViewer in XAML

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.

Upvotes: 0

Views: 512

Answers (1)

Igor Ralic
Igor Ralic

Reputation: 15006

I wrote a blog post exactly about this issue: Why is my zoomable ScrollViewer snapping the image to the left?

The first part of the problem is the ScrollViewer itself, it needs the HorizontalScrollBarVisibility and VerticalScrollBarVisibility set to Auto.

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

For that to really work, you'll need to limit the Image size to some width/height, like this:

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

You can find more details in my blog post, and full source code on GitHub.

Upvotes: 3

Related Questions