title: WinRT ItemsControl with Zoom, Horizontal scrolling and centered content
body: <p>I've been battling this for hours now, and cant seem to find a way to solve my problem.</p>
  
  <p>My issue is, I have an items control which takes up the whole screen. It displays a horizontal list of images, which can ONLY scroll horizontally. They are centered vertically and initially take up around 33% of the screen.</p>
  
  <p>I want the user to be able to zoom in to this list until the images take up 100% of the available space. I have done this by setting Scrollviewer.ZoomEnabled="true" which works fine. By setting the vertical content alignment of the itemscontrols scrollviewer to "Center" the app zooms in and out around the center fine. </p>
  
  <p>However...</p>
  
  <p>When I run it on a device with touch or the simulator using touch, the zoom behaviour works as expected UNTIL I use touch input and attempt to scroll vertically.</p>
  
  <p>The items then 'jump' to the bottom instantly rather than the center, and the only way to position them correctly again is to zoom back out and in again.</p>
  
  <p>This behaviour is intensely frustrating as I cannot seem to fix it. Any help would be massively appreciated!</p>
  
  <p>Here Is a minimal solution to repro the issue <a href="https://skydrive.live.com/redir?resid=EE9DF7D217DF3EA6!1060&amp;authkey=!AJVGrLoTrOz8Hyk" rel="nofollow">https://skydrive.live.com/redir?resid=EE9DF7D217DF3EA6!1060&amp;authkey=!AJVGrLoTrOz8Hyk</a></p>
  
  <p>Code follows if you want to recreate it : </p>
  
  <p><strong>ITEMSCONTROL.XAML</strong></p>
  
  <pre><code>&lt;Style x:Key="ItemsControlStyle" TargetType="ItemsControl"&gt;
      &lt;Setter Property="ItemsPanel"&gt;
          &lt;Setter.Value&gt;
              &lt;ItemsPanelTemplate&gt;
                  &lt;VirtualizingStackPanel Orientation="Horizontal" Margin="90,0" ManipulationMode="TranslateX"/&gt;
              &lt;/ItemsPanelTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="ItemsControl"&gt;
                  &lt;ScrollViewer ZoomMode="Enabled"
                                VerticalSnapPointsType="None"
                                MinZoomFactor="0.5"
                                VerticalScrollMode="Disabled"
                                VerticalScrollBarVisibility="Disabled"
                                HorizontalScrollMode="Enabled" 
                                HorizontalScrollBarVisibility="Visible"
                                VerticalContentAlignment="Center"&gt;
                      &lt;ItemsPresenter VerticalAlignment="Center" IsHitTestVisible="False" ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled"/&gt;
                  &lt;/ScrollViewer&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p><strong>MAINPAGE.XAML (Excerpt)</strong></p>
  
  <pre><code>&lt;ItemsControl Grid.Row="1" ItemsSource="{Binding Pages}" Style="{StaticResource ItemsControlStyle}"&gt;
          &lt;ItemsControl.ItemTemplate&gt;
              &lt;DataTemplate&gt;
                  &lt;Border Padding="5" VerticalAlignment="Center"  Margin="10"&gt;
                      &lt;Border.Background&gt;
                          &lt;ImageBrush ImageSource="../Images/Shadow.png"/&gt;
                      &lt;/Border.Background&gt;
                      &lt;Grid&gt;
                          &lt;ProgressRing IsActive="True" VerticalAlignment="Center" HorizontalAlignment="Center" Height="50" Width="50" Foreground="White" Visibility="{Binding HasLoaded, Converter={StaticResource BooleanToVisibilityConverter}}"/&gt;
                      &lt;Image Opacity="0" Source="{Binding LocalUrl, Converter={StaticResource LocalImagePathConverter}}" Height="{Binding Height}" Width="{Binding Width}" ImageOpened="ImageLoaded" /&gt;
                      &lt;/Grid&gt;
                  &lt;/Border&gt;
              &lt;/DataTemplate&gt;
          &lt;/ItemsControl.ItemTemplate&gt;
      &lt;/ItemsControl&gt;
  </code></pre>