在 UWP 中保留 ListView.HeaderTemplate visible/static/sticky

Question

我需要让 ListView 的 HeaderTemplate 始终可见，但我不知道要设置什么，也不知道 ListView 模板的哪一部分改变去做那个。

我目前拥有的内容导致 ListView 的 header 在向下滚动项目时滚出顶部。

即使在滚动浏览 ListView 的项目时，如何保持 ListView 的 header "row" 可见？？

这是我的 XAML:

<ListView x:Name="permitResults"
          Grid.Row="1"
          AutomationProperties.AutomationId="PermitResults"
          AutomationProperties.Name="Permit Search Results"
          ItemsSource="{Binding Source={StaticResource ResultsSource}}" 
          ItemClick="permitResults_ItemClick"
          SelectionMode="None"
          TabIndex="1"
          Padding="0"
          Margin="0"
          BorderThickness="0"
          IsSwipeEnabled="True"
          IsItemClickEnabled="True"
          ScrollViewer.VerticalScrollBarVisibility="Auto" >
    <ListView.HeaderTemplate>
        <DataTemplate>
            <Grid Margin="0,0,0,0" Width="1366" Height="Auto" HorizontalAlignment="Left">
                <Grid.Resources>
                        <Style TargetType="TextBlock" BasedOn="{StaticResource SearchGridResultsHeaderTextBlock}">
                            <Setter Property="HorizontalAlignment" Value="Left"></Setter>
                        </Style>
                    </Grid.Resources>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="2*"/>
                        <ColumnDefinition Width="2*"/>
                        <ColumnDefinition Width="3*"/>
                        <ColumnDefinition Width="2*"/>
                        <ColumnDefinition Width="6*"/>
                        <ColumnDefinition Width="2*"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Text="Permit #" MaxLines="2" TextWrapping="WrapWholeWords"/>
                    <TextBlock Grid.Column="1" Text="County" TextWrapping="WrapWholeWords" />
                    <TextBlock Grid.Column="2" Text="Business Name" TextWrapping="WrapWholeWords" />
                    <TextBlock Grid.Column="3" Text="Status" TextWrapping="WrapWholeWords" />
                    <TextBlock Grid.Column="4" Text="Type" TextWrapping="WrapWholeWords" />
                    <TextBlock Grid.Column="5" Text="FY" TextWrapping="WrapWholeWords" />
                </Grid>
        </DataTemplate>
    </ListView.HeaderTemplate>
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid Margin="-11,0,0,0" Width="1366" Height="Auto">
                <Grid.Resources>
                    <Style TargetType="TextBlock" BasedOn="{StaticResource SearchGridResultsTextBlock}">
                        <Setter Property="HorizontalAlignment" Value="Left"></Setter>
                    </Style>
                </Grid.Resources>
                <Grid.RowDefinitions>
                    <RowDefinition Height="44"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition Width="3*"/>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition Width="6*"/>
                    <ColumnDefinition Width="2*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" Text="{Binding PermitNumber}" TextWrapping="WrapWholeWords" />
                <TextBlock Grid.Column="1" Text="{Binding County}" TextWrapping="NoWrap" />
                <TextBlock Grid.Column="2" Text="{Binding BusinessName}" TextWrapping="NoWrap" />
                <TextBlock Grid.Column="3" Text="{Binding Status}" TextWrapping="NoWrap" />
                <TextBlock Grid.Column="4" Text="{Binding PermitType}" TextWrapping="NoWrap" />
                <TextBlock Grid.Column="5" Text="{Binding EffFiscalYear}" TextWrapping="NoWrap" />
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Answer 1

将此样式应用于您的 ListView，您将拥有静态 header

    <Style TargetType="ListView" x:Key="FixedHeaderListViewStyle">
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="TabNavigation" Value="Once" />
        <Setter Property="IsSwipeEnabled" Value="True" />
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
        <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
        <Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled" />
        <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True" />
        <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
        <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
        <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True" />
        <Setter Property="UseSystemFocusVisuals" Value="True" />
        <Setter Property="ItemContainerTransitions">
            <Setter.Value>
                <TransitionCollection>
                    <AddDeleteThemeTransition />
                    <ContentThemeTransition />
                    <ReorderThemeTransition />
                    <EntranceThemeTransition IsStaggeringEnabled="False" />
                </TransitionCollection>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <ItemsStackPanel Orientation="Vertical" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListView">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" 
                            Background="{TemplateBinding Background}" 
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>

                            <ContentControl Content="{TemplateBinding Header}"
                                                ContentTemplate="{TemplateBinding HeaderTemplate}"
                                                ContentTransitions="{TemplateBinding HeaderTransitions}"/>

                            <ScrollViewer x:Name="ScrollViewer"
                                          Grid.Row="1"
                                        TabNavigation="{TemplateBinding TabNavigation}"
                                        HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                        IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
                                        VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                        VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                        IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
                                        IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                        IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                        ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
                                        IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                        BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
                                        AutomationProperties.AccessibilityView="Raw">
                                <ItemsPresenter 
                                                Footer="{TemplateBinding Footer}"
                                                FooterTemplate="{TemplateBinding FooterTemplate}"
                                                FooterTransitions="{TemplateBinding FooterTransitions}"
                                                Padding="{TemplateBinding Padding}" />
                            </ScrollViewer>

                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 2

基于第一个答案（如果不需要水平滚动则效果很好），这里有一个解决方法来实现 horizol scroll + sticky header（FixedHeaderListViewStyle 与上面相同）：

<ScrollViewer
   HorizontalScrollBarVisibility="Auto"
   HorizontalScrollMode="Auto"
   VerticalScrollBarVisibility="Disabled"
   VerticalScrollMode="Disabled">
   <ListView Style="{StaticResource FixedHeaderListViewStyle}">
      <!-- your list here -->
   </ListView>
</ScrollViewer>

Answer 3

Andrii 提供的样式绝对是答案，但您不需要包含所有其他内容。覆盖内在样式时，您需要做的就是为实际覆盖的内容提供设置器。您需要的最低代码是：

<Style x:Key="FixedHeaderListViewStyle"
       TargetType="ListView">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListView">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <ContentControl Content="{TemplateBinding Header}"
                                        ContentTemplate="{TemplateBinding HeaderTemplate}"
                                        ContentTransitions="{TemplateBinding HeaderTransitions}"/>
                        <ScrollViewer AutomationProperties.AccessibilityView="Raw"
                                      BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
                                      Grid.Row="1"
                                      HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                      HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                      IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                      IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                      IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
                                      IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                      IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
                                      x:Name="ScrollViewer"
                                      TabNavigation="{TemplateBinding TabNavigation}"
                                      VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                      VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                      ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                            <ItemsPresenter Footer="{TemplateBinding Footer}"
                                            FooterTemplate="{TemplateBinding FooterTemplate}"
                                            FooterTransitions="{TemplateBinding FooterTransitions}"
                                            Padding="{TemplateBinding Padding}"/>
                        </ScrollViewer>

                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

在 UWP 中保留 ListView.HeaderTemplate visible/static/sticky

Keep ListView.HeaderTemplate visible/static/sticky in UWP

xaml

listview

uwp-xaml