Windows Phone 8.1中的ScrollViewer中的图像

Question

I have a FlipView which shows the pages of a leaflet as the user swipes through it. I want the user to be able to zoom in a page. What I found so far is that if I wrap my Image inside a ScrollViewer and set ZoomMode = Enabled , the user can zoom. The strange thing is that if I zoom in the right side of the page, it automatically goes back to the left side after I lift up my fingers from the screen. Any idea how to solve this issue?

XAML:

<Grid Name="grRoot">
    <FlipView x:Name="flipView1"
              BorderBrush="Black"
              ItemsSource="{Binding}">

        <FlipView.ItemTemplate>
            <DataTemplate>
                <ScrollViewer ZoomMode="Enabled" MinZoomFactor="1">
                    <Image Source="{Binding url_dotcom}"
                           Stretch="Fill" 
                           Holding="imgHolding"/>
                </ScrollViewer>
            </DataTemplate>
        </FlipView.ItemTemplate>
    </FlipView>
</Grid>

Setting the FlipView's width and height:

flipView1.Width = Window.Current.Bounds.Width;
flipView1.Height = Window.Current.Bounds.Height;

Answer 1

Try something like this:

<Grid Name="grRoot">
    <FlipView x:Name="flipView1"
              BorderBrush="Black"
              ItemsSource="{Binding}">

        <FlipView.ItemTemplate>
            <DataTemplate>
                <ScrollViewer ZoomMode="Enabled" MinZoomFactor="1"
                              HorizontalScrollBarVisibility="Auto"
                              VerticalScrollBarVisibility="Auto">
                    <Image Source="{Binding url_dotcom}"
                           Stretch="Fill" 
                           Holding="imgHolding"
                           MaxWidth="{Binding ElementName=YourPage, Path=DataContext.Width}"
                           MaxHeight="{Binding ElementName=YourPage, Path=DataContext.Height}"/>
                </ScrollViewer>
            </DataTemplate>
        </FlipView.ItemTemplate>
    </FlipView>
</Grid>

There are 2 important changes here:

• Set ScrollViewer's HorizontalScrollBarVisibility and VerticalScrollBarVisibility to Auto
• Bind Image's MaxWidth and MaxHeight to Window.Current.Bounds.Width and Window.Current.Bounds.Height respectively exposed through Width and Height public properties inside a ViewModel that is a DataContext to that specific page. This is for scenarios where your FlipView is taking up the whole page. If you need the FlipView to be smaller on the page, then set the Width and Height properties in the ViewModel based on the size you expect/need/want.

EDIT: More info in my blog post Why is my zoomable ScrollViewer snapping the image to the left?