Question

I have a very basic GridView control defined in a 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 runtime, the data bound to myItemsViewSource appears in the GridView control as I would expect.

However, I am experiencing a strange scrolling issue when there are more items in the data source than can be displayed on the screen. The scrollbar seems to “resist” my effort to scroll the collection and only slightly moves the viewport, until it “breaks free” and I can scroll through the rest of the items:

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

Thinking that the problem had something to do with virtualization, I tried changing the ItemsPanel for the GridView to a StackPanel instead of a VirtualizingStackPanel, but this had the even worse effect of preventing any of the items from being shown. Note: the GridView is not hosted in any other scrolling area or canvas.

I’ll post my workaround below, but I’m hoping someone has a more satisfying answer.

Answer 1

You should remove the left margin and padding on the actual GridView and add it to the ItemsPanel declaration. A bit confusing as the default template does have padding set on the gridview.

Here is the start of the GridView that comes with the default template with my edit to the padding on the GridView control and margin set on the VirtualizingStackPanel 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>