网格视图水平方向的页脚模板

本文关键字：视图 水平 方向 网格 | 更新日期: 2023-09-27 18:26:38

我开发了Win8.1通用应用程序。

我正在使用GridView和WrapGrid作为内部的ItemsPanel。垂直滚动被禁用，用户只需要水平滚动。我使用增量源集合作为ItemsSource，当用户向右滚动到GridView的末尾时，会动态添加新项目。除了一件事，一切都很好。我想使进度指示器正确对齐，并且它必须在加载新页面时可见。我试图为网格视图设置页脚模板，但它是隐藏的（bc可能默认情况下，页脚被添加到itemspanel或其他）。

以下是我用来为GridView定义控件模板并将Footer放在右边的代码。

<GridView.Template>
                    <ControlTemplate TargetType="GridView">
                        <Border BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}" 
                                Background="{TemplateBinding Background}">
                            <ScrollViewer x:Name="ScrollViewer" 
                                          AutomationProperties.AccessibilityView="Raw"
                                          BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" 
                                          HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" 
                                          HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" 
                                          IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" 
                                          IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" 
                                          IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" 
                                          IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" 
                                          IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" 
                                          TabNavigation="{TemplateBinding TabNavigation}" 
                                          VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" 
                                          VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" 
                                          ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                                <StackPanel Orientation="Horizontal">
                                    <ItemsPresenter HeaderTemplate="{TemplateBinding HeaderTemplate}"
                                                    Header="{TemplateBinding Header}"
                                                    HeaderTransitions="{TemplateBinding HeaderTransitions}"
                                                    Padding="{TemplateBinding Padding}"/>
                                    <ContentControl Transitions="{TemplateBinding FooterTransitions}"
                                                    ContentTemplate="{TemplateBinding FooterTemplate}" 
                                                    Content="{TemplateBinding Footer}"/>
                                </StackPanel>
                            </ScrollViewer>
                        </Border>
                    </ControlTemplate>
                </GridView.Template>

然后我将ProgressRing设置为页脚模板。

<GridView.FooterTemplate>
                    <DataTemplate>
                        <ProgressRing VerticalAlignment="Stretch"
                                      HorizontalAlignment="Stretch"
                                      IsActive="{Binding IsBusy}"
                                      Margin="0,24"
                                      Width="50"
                                      Height="50"
                                      Foreground="{StaticResource LightGreyBorderBrush}"
                                      Style="{StaticResource ProgressRingStyle}" />
                    </DataTemplate>
                </GridView.FooterTemplate>

但当我试图滚动时，事情变得疯狂了。GridView总是一个接一个地调用下一页加载，但滚动位置几乎为0（在GridView的开头）。所以我得到了无限页面加载。

有人能帮我吗？非常感谢！

编辑：我创建了一个小样本来复制。请看一看。这是链接。

网格视图水平方向的页脚模板

开箱即用支持右对齐的FooterTemplate。只需使用ItemsWrapGrid（默认情况下在GridView中使用），而不使用WrapGrid作为ItemsPanel。您也不需要重新定义Template。以下是示例中的工作代码：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <GridView x:Name="TestGridView">
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsWrapGrid ItemHeight="100"
                          Orientation="Vertical"
                          MaximumRowsOrColumns="5" />
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
        <GridView.ItemTemplate>
            <DataTemplate>
                <Border Background="DarkSlateGray"
                        Height="100"
                        Width="100"
                        Margin="20">
                    <TextBlock Foreground="#FFFFFF"
                               Text="{Binding Number}" />
                </Border>
            </DataTemplate>
        </GridView.ItemTemplate>
        <GridView.FooterTemplate>
            <DataTemplate>
                <ProgressRing IsActive="True"
                              Margin="0,24"
                              Width="50"
                              Height="50" />
            </DataTemplate>
        </GridView.FooterTemplate>
    </GridView>
</Grid>

请注意，每次向右滚动时会加载2页，因为GridView认为一页不够。

希望这能有所帮助。

相关文章：