Sticky scrolling issue in WinRT XAML GridView

Question

I have a very simple GridView control defined on the Windows Store App page that looks like this:

<GridView x:Name="myGridView" Grid.RowSpan="2" Padding="30,137,40,46" ItemsSource="{Binding Source={StaticResource myItemsViewSource}}" ItemTemplate="{StaticResource My500x500ItemTemplate}" SelectionMode="Multiple" IsSwipeEnabled="True" IsItemClickEnabled="True"> <GridView.ItemsPanel> <ItemsPanelTemplate> <VirtualizingStackPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </GridView.ItemsPanel> <GridView.GroupStyle> <GroupStyle> <GroupStyle.HeaderTemplate> <DataTemplate> <Grid Margin="1,0,0,6"> <Button Style="{StaticResource TextPrimaryButtonStyle}"> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" /> <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/> </StackPanel> </Button> </Grid> </DataTemplate> </GroupStyle.HeaderTemplate> <GroupStyle.Panel> <ItemsPanelTemplate> <VariableSizedWrapGrid/> </ItemsPanelTemplate> </GroupStyle.Panel> </GroupStyle> </GridView.GroupStyle> </GridView> 

At run time, data bound to myItemsViewSource is displayed in the GridView control, as you would expect.

However, I experience a strange scroll problem when there are more items in the data source than can be displayed on the screen. The scrollbar seems to “resist” my efforts to scroll through the collection and only slightly move the viewport until it “breaks”, and I can scroll through the rest of the elements:

The same thing happens on the way back, from right to left: scrolling runs smoothly until I come close enough to the beginning of the scrolled area where the “stick” appears again:

Thinking that the problem had something to do with virtualization, I tried changing the ItemsPanel for the GridView to a StackPanel instead of VirtualizingStackPanel , but this had an even worse effect to prevent any of the items from showing. Note. GridView does not fit in any other scroll area or canvas.

I will talk about my workaround below, but I hope someone will have a more satisfactory answer.

Answer 1

You must remove the left margin and padding in the real GridView and add it to the ItemsPanel declaration. A bit confusing as the default template has an add-on defined in gridview.

Here is the start of the GridView that comes with the default template with my editing in addition to the GridView control and margin set in the VirtualizationStackPanel ItemsPanel declaration.

 <GridView x:Name="itemGridView" AutomationProperties.AutomationId="ItemGridView" AutomationProperties.Name="Grouped Items" Grid.RowSpan="2" Padding="0,137,40,46" ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" ItemTemplate="{StaticResource Standard250x250ItemTemplate}" SelectionMode="None" IsSwipeEnabled="false" IsItemClickEnabled="True" ItemClick="ItemView_ItemClick"> <GridView.ItemsPanel> <ItemsPanelTemplate> <VirtualizingStackPanel Margin="116,0,0,0" Orientation="Horizontal"/> </ItemsPanelTemplate> </GridView.ItemsPanel> 

Answer 2

Removing the GridView.Padding property and replacing it with GridView.Margin solves the sticky scrolling problem:

  <GridView x:Name="myGridView" Grid.RowSpan="2" Margin="30,137,40,46" <!-- replaced 'Padding' with 'Margin' --> ItemsSource="{Binding Source={StaticResource myItemsViewSource}}" ItemTemplate="{StaticResource My500x500ItemTemplate}" ... 

This puzzles me, however, because the Visual Studio GridView project template uses Padding, not Margin.

Does anyone know of a more satisfactory solution?

Edit: Deleted a misleading statement.

Answer 3

The problem is

 <VirtualizingStackPanel Margin="116,0,0,0" Orientation="Horizontal"/> 

Change this to: <StackPanel Margin="116,0,0,0" Orientation="Horizontal"/>