WinRT XAML GridView控件中的“粘性滚动”问题

Question

我有一个非常基础的GridView控件，在Windows Store应用程序页面中定义如下：

    <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>

运行时，与myItemsViewSource绑定的数据将出现在GridView控件中，就像我期望的那样。

然而，当数据源中的项目数量超过屏幕可显示的数量时，我遇到了一个奇怪的滚动问题。滚动条似乎会“阻力”我的滚动操作，并且只会轻微移动视口，直到它“突然解除”，我才能浏览其余的项目：

同样的情况也发生在从右到左的滚动过程中：滚动是平稳的，直到我接近滚动区域的起点，那里似乎又“卡住”了：

我认为这个问题与虚拟化有关，于是我尝试将GridView的ItemsPanel更改为StackPanel而不是VirtualizingStackPanel，但这会导致更糟糕的结果，因为没有任何项目被显示。注意：GridView未托管在任何其他滚动区域或画布中。

我将在下面发布我的解决方法，但我希望有人能给出更令人满意的答案。

- Cameron Flint

---

我遇到了同样的问题。我认为问题出在计算错误的内部itemtemplate上。事实上，滚动条不仅是粘性的，而且还会逐英寸调整大小。 - Youngjae

Answer 1

你应该在实际的GridView中去除左边界和内边距，并将其添加到ItemsPanel声明中。默认模板确实在gridview上设置了padding，有点令人困惑。

以下是带有我的编辑的默认模板的GridView开头，其中GridView控件的padding已进行了更改，而VirtualizingStackPanel ItemsPanel声明的margin已设置好。

<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>

- Ant

---

谢谢，这样做可以达到相同的效果，而不会影响滚动条的偏移量。 - Cameron Flint

如果您可以使用触摸设备进行测试（例如Win8平板电脑或像我一样的Lenovo ThinkPad x230t），则可滚动区域会有所不同（使用鼠标滚动可实现更大的宽度...？）。此外，当用户使用触摸将“GridView”向右滑动到最右侧时，“GridView”会有些颤动。 - Youngjae

Answer 2

移除 GridView.Padding 属性并替换为 GridView.Margin 可解决“滚动粘滞”问题：

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

        ...

这让我感到困惑，因为Visual Studio GridView项目模板使用的是Padding而不是Margin。

有没有人知道更令人满意的解决方案？

编辑：删除了一个误导性的陈述。

- Cameron Flint

---

从填充到外边距的变更也会移动底部滚动条的位置。有没有办法防止滚动条移动？ - Unknown1987

Answer 3

问题在于

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

将此更改为：<StackPanel Margin="116,0,0,0" Orientation="Horizontal"/>

- Evox

---

你会失去虚拟化 :-). 是的，这是一个解决方案，但如果您想保持性能，则不是解决方案。核心问题实际上是在该场景中已知的问题，在Windows 8.1中已经得到修复。 - Tim Heuer