WinRT ItemsControl with Zoom, Horizontal scrolling and centered content

Question

I've been battling this for hours now, and cant seem to find a way to solve my problem.

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.

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.

However...

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.

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.

This behaviour is intensely frustrating as I cannot seem to fix it. Any help would be massively appreciated!

Here Is a minimal solution to repro the issue https://skydrive.live.com/redir?resid=EE9DF7D217DF3EA6!1060&authkey=!AJVGrLoTrOz8Hyk

Code follows if you want to recreate it :

ITEMSCONTROL.XAML

<Style x:Key="ItemsControlStyle" TargetType="ItemsControl">
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Horizontal" Margin="90,0" ManipulationMode="TranslateX"/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ItemsControl">
                <ScrollViewer ZoomMode="Enabled"
                              VerticalSnapPointsType="None"
                              MinZoomFactor="0.5"
                              VerticalScrollMode="Disabled"
                              VerticalScrollBarVisibility="Disabled"
                              HorizontalScrollMode="Enabled" 
                              HorizontalScrollBarVisibility="Visible"
                              VerticalContentAlignment="Center">
                    <ItemsPresenter VerticalAlignment="Center" IsHitTestVisible="False" ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled"/>
                </ScrollViewer>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

MAINPAGE.XAML (Excerpt)

<ItemsControl Grid.Row="1" ItemsSource="{Binding Pages}" Style="{StaticResource ItemsControlStyle}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border Padding="5" VerticalAlignment="Center"  Margin="10">
                    <Border.Background>
                        <ImageBrush ImageSource="../Images/Shadow.png"/>
                    </Border.Background>
                    <Grid>
                        <ProgressRing IsActive="True" VerticalAlignment="Center" HorizontalAlignment="Center" Height="50" Width="50" Foreground="White" Visibility="{Binding HasLoaded, Converter={StaticResource BooleanToVisibilityConverter}}"/>
                    <Image Opacity="0" Source="{Binding LocalUrl, Converter={StaticResource LocalImagePathConverter}}" Height="{Binding Height}" Width="{Binding Width}" ImageOpened="ImageLoaded" />
                    </Grid>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

Answer 1

Okay, so I tested:

1. On a touch monitor (local machine) - worked fine
2. On a touch monitor (simulator) - worked fine
3. On a Surface RT (remote machine) - worked fine
4. On a normal monitor (simulator) - worked fine

Have you tried touching your ear while you do it? :)

I don't think this is a universal problem, since I can't replicate it.