title: Pinch To Zoom & Panning in a FlipView Control? Windows Phone 8.1 XAML Winrt App
body: <p>I am trying to create a photo viewer using a flipview which needs to have pinch to zoom functionality.</p>
  
  <p>I am using a scrollviewer to enable the capability to zoom and this is my XAML.</p>
  
  <pre><code>&lt;FlipView x:Name="FlipView1"&gt;
      &lt;FlipView.ItemTemplate&gt;
           &lt;DataTemplate&gt;
               &lt;ScrollViewer HorizontalScrollBarVisibility="Visible"
                             VerticalScrollBarVisibility="Visible"
                             VerticalAlignment="Stretch" 
                             HorizontalAlignment="Stretch" 
                             ZoomMode="Enabled" MinZoomFactor="1" MaxZoomFactor="3"
                             ViewChanged="ScrollViewer_ViewChanged"
                             SizeChanged="ScrollViewer_SizeChanged"&gt;
                             &lt;StackPanel Orientation="Horizontal"&gt;
                                  &lt;Image Source="{Binding Image}" Stretch="Uniform" /&gt;
                              &lt;/StackPanel&gt;
               &lt;/ScrollViewer&gt;
           &lt;/DataTemplate&gt;
       &lt;/FlipView.ItemTemplate&gt;
  &lt;/FlipView&gt;
  </code></pre>
  
  <p>In my code-behind I am changing the image size to scrollviewer.viewport height and width respectively.</p>
  
  <pre><code>private void ScrollViewer_SizeChanged(object sender, SizeChangedEventArgs e)
          {
              ScrollViewer x = sender as ScrollViewer;
              Image img = FindFirstElementInVisualTree&lt;Image&gt;(FlipView1);
              img.Height = x.ViewportHeight;
              img.Width = x.ViewportWidth;
          }
  </code></pre>
  
  <p>The problems that I face are:</p>
  
  <p>1) When an image is big in size, the image does not resize to fit uniformly and overflows the control/screen area. The Scrollviewer_sizeChanged handler takes care of the first image only and the rest images in the flipview remain big.</p>
  
  <p>2) When we pinch to zoom in, the black/unused area ie. the blank area which does not have the image also gets zoomed in and scroll area is not restricted to the image only. How should I do this, as this really spoils the experience.</p>
  
  <p>Please help! I have already seen a lot of resources/stackoverflow questions but nothing helps, as a lot of them pertain to Silverlight or the previous versions of windows phone.</p>
  
  <p>PLEASE NOTE, we are developing for Windows Phone 8.1 XAML (WINRT) App.</p>