代码之家  ›  专栏  ›  技术社区  ›  BlackICE

保留ListView。在UWP中HeaderTemplate可见/静态/粘滞

  •  7
  • BlackICE  · 技术社区  · 8 年前

    我需要保留 HeaderTemplate 第页,共页 ListView 始终可见,但我不知道该设置什么,或 列表视图 的模板进行更改。

    我当前拥有的内容导致 列表视图

    如何保留 列表视图 即使滚动浏览 列表视图 的项目??

    这是我的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>
    
    3 回复  |  直到 6 年前
        1
  •  11
  •   Andrii Krupka    8 年前

    将此样式应用于 ListView 您将拥有静态头

        <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>
    
        2
  •  1
  •   Wendee Hsu    6 年前

    根据第一个答案(如果不需要水平滚动的话,这个答案非常有效),下面是一个解决方法 horizol scroll + sticky header ( FixedHeaderListViewStyle 同上):

    <ScrollViewer
       HorizontalScrollBarVisibility="Auto"
       HorizontalScrollMode="Auto"
       VerticalScrollBarVisibility="Disabled"
       VerticalScrollMode="Disabled">
       <ListView Style="{StaticResource FixedHeaderListViewStyle}">
          <!-- your list here -->
       </ListView>
    </ScrollViewer>
    
        3
  •  1
  •   Quark Soup    6 年前

    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>