Using ScrollViewer in a FlipView

advertisements

I have a Windows Phone 8.1 app with a FlipView. Each FlipView item represents a magazine page (PDF page rendered to bitmap with some overlay).

I need to enable pinch to zoom for all the pages. My FlipView ItemTemplate looks like this

<DataTemplate
        x:Key="SinglePageTemplate">
        <ScrollViewer
            ZoomMode="Enabled">
            <Grid>
                <ProgressRing
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    IsActive="{Binding IsRendered, Converter={StaticResource BooleanNegateConverter}}" />
                <Image
                    Source="{Binding Bitmap}"
                    VerticalAlignment="Stretch"
                    HorizontalAlignment="Stretch">
                </Image>
            </Grid>
        </ScrollViewer>

The problem is that when I zoom out the page and try to move it to the right, it always "jumps" back to the left.

Here is a video showing the problem: https://dl.dropboxusercontent.com/u/73642/fv.avi

Any ideas why and how to fix it?


Inside your scrollviewer you have to manually enable scrollbarvisiblity and mode

<ScrollViewer ZoomMode="Enabled"
              HorizontalScrollBarVisibility="Visible"
              VerticalScrollBarVisibility="Visible"
              HorizontalScrollMode="Enabled"
              VerticalScrollMode="Enabled">
        <Grid>
            <ProgressRing
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                IsActive="{Binding IsRendered, Converter={StaticResource BooleanNegateConverter}}" />
            <Image
                Source="{Binding Bitmap}"
                VerticalAlignment="Stretch"
                HorizontalAlignment="Stretch">
            </Image>
        </Grid>
 </ScrollViewer>

You can also optionally set the Max/MinZoomFactor to prevent overzoom