Strange behavior of ListView with WrapGrid in Windows Phone 8.1 XAML

Question

I have a Windows Phone 8.1 XAML app with a ListView nad WrapGrid as its ItemsPanel to display items in two columns

<ListView x:Name="ListV" ItemClick="ListV_ItemClick" IsItemClickEnabled="True">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapGrid Orientation="Horizontal" ItemWidth="160" ItemHeight="280" MaximumRowsOrColumns="2" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Background="Red" Margin="12" Width="100" Height="100"></Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

The cache mode of the page is set to NavigationCacheMode.Required.

I scoll in the list, tap an item and navigate to another screen. When I navigate back to the page with the ListView, the ListView remebers the scoll position (NavigationCacheMode.Required) but gets "broken", when I tap on items, they just jump strangely.

Here is a complete simple solution to reproduce the problem: https://dl.dropboxusercontent.com/u/73642/listview.zip.

Here is a video showing the problem: https://dl.dropboxusercontent.com/u/73642/listview.wmv

Anyone else experienced this? Is there a way around this issue?

Answer 1

One workaround I've found is to wrap the ListView in a ScrollViewer. Here's a style for vertical scroll viewer:

<Style x:Key="VerticalScrollViewerStyle" TargetType="ScrollViewer">
    <Setter Property="HorizontalScrollBarVisibility" Value="Disabled" />
    <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
    <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
    <Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled" />
    <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
</Style>

And then you wrap the ListView like this:

<ScrollViewer Style="{StaticResource VerticalScrollViewerStyle}">
    <ListView ...>
        ...
    </ListView>
</ScrollViewer>

This way the ListView's internal ScrollViewer is not used, and this seems to solve your problem. Now, there might be some issues with some features of the ListView that depend on the internal ScrollViewer to be used (e.g. incremental loading). You'll test it and you'll see if what you need works.