Scrollviewer zoom issue at higher resolution

Question

I'm creating a Windows 8.1 Store App and I've stumbled upon this strange behavior that has me completely stumped. I have an ItemsControl control that I use to display a grid of images and text, and I've placed it inside a ScrollViewer so that I can pan and zoom the grid. XAML code looks like this:

<ScrollViewer x:Name="ScrollView" Margin="0" Background="White"
                      VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch"
                      HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled"
                      HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"
                      VerticalAlignment="Stretch" HorizontalAlignment="Stretch" ZoomMode="Enabled" IsScrollInertiaEnabled="False">
        <ItemsControl Name="ImageListControl">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel >
                        <Image Source="{Binding imageSource}" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center" Height="500" Width="500" ></Image>
                        <TextBlock Text="{Binding imageDesc}" Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24" FontWeight="Bold" Height="30"></TextBlock>
                        <Image Source="{Binding imageSource}" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center" Height="500" Width="500"></Image>
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal">
                    </StackPanel>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </ScrollViewer>

I've tested this in the simulator and on an actual Surface and Windows 8 desktop and it works fine. It zooms and pans as I expect it to.

However, further testing using a very high resolution display (2560 x 1440) has uncovered anomalous behavior. Once I start zooming in, the grid becomes clipped at the top and refuses to pan down. 

All other (smaller) resolutions work fine except for this higher one. I've tested it on an actual high res Win 8.1 desktop and that behavior is there and is not an anomaly of the simulator. I have no idea what's causing it and how to fix it.

Here is a link to a small VS2013 project that duplicates this behavior:

https://dl.dropboxusercontent.com/u/104931823/ZoomTest.zip

Answer 1

Hi,

I test your project in my computer. When i change the resolution in simulator(also change to very high resolution display (2560 x 1440)) , everything is ok in my computer. So I cannot reproduce your problem.

Best Wishes!

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 2

Hi Anne,

Here's what I do to reproduce the bug. Open the solution and run it in the Surface simulator at 2560x1440. You'll get a bunch of images like this:

https://dl-web.dropbox.com/get/Public/screenshot_03242014_163138.png?_subject_uid=104931823&w=AACUFjKOYCDeFZzeTGCe2zjDvfaVvvg3T9IXQy9JphsFeA

Now, pinch zoom a bit until the images are cropped a bit at top. Something like this:

https://dl-web.dropbox.com/get/Public/screenshot_03242014_163208.png?_subject_uid=104931823&w=AADGEUXwEyFROW9kBiMH7FE1nZBdRRJEtnnkNqWaBg1bCQ

Now, try to pan the images down so that the top of the images is in view again. What happens with me is that it does pan down, but once I release it goes back to the cropped view.

Answer 3

Up..

Answer 4

I have a Windows Store app targeting Windows 8.1 on both the Surface and the Desktop. It has a grid of images and text that is created using an ItemsControl. This in turn is hosted inside a ScrollViewer since it's too big to fit in a screen and I want to enable zooming and panning. The XAML code looks like this:

<ScrollViewer x:Name="ScrollView" Margin="0" Background="White"
                      VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch"
                      HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled"
                      HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"
                      VerticalAlignment="Stretch" HorizontalAlignment="Stretch" ZoomMode="Enabled" IsScrollInertiaEnabled="False">
    <ItemsControl Name="ImageListControl">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel >
                    <Image Source="{Binding imageSource}" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center" Height="500" Width="500" ></Image>
                    <TextBlock Text="{Binding imageDesc}" Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24" FontWeight="Bold" Height="30"></TextBlock>
                    <Image Source="{Binding imageSource}" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center" Height="500" Width="500"></Image>
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal">
                </StackPanel>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</ScrollViewer>

The output looks something like this:

This works perfectly fine for the most part. Except when I test it in a 2560 x 1440 display. I've tested this on a Desktop and a high resolution Surface simulator, and I'm getting the same strange behavior. Once I start zooming in, the grid becomes clipped at the top and refuses to pan down. Here's what it's stuck at:

Here is a download link to get a solution that replicates this behavior. To reproduce the bug: run this solution on a 2560 x 1440 Surface simulator. When you get the image grid pinch zoom into the image so that top part of it is partially hidden (like the second image above). Now try to pan the image downwards so that you can see the hidden part. What happens with me is that as soon as I release the panning the image snaps back, hiding the top part again.