Сохраняйте ListView.HeaderTemplate видимым / статическим / липким в UWP

Мне нужно, чтобы HeaderTemplate из ListView всегда был виден, но я не знаю, что установить или какую часть шаблона ListView изменить для этого.

То, что у меня сейчас есть, заставляет заголовок ListView прокручиваться сверху при прокрутке вниз по элементам.

Как я могу сохранить "строку" заголовка ListView видимой даже при прокрутке элементов 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>

listview xaml uwp-xaml
person BlackICE    schedule 21.07.2016    source источник
comment
Похоже, ваш заголовок статичен. Так почему бы вам не вытащить заголовок из ListView за пределы Listview. А также. Почему вы устанавливаете ширину 1366? А как насчет меньших экранов? Дайте мне знать, если вы думаете, что это плохая идея, я опубликую ответ, чтобы сделать это по-другому.   -  person AVK    schedule 21.07.2016
comment
@AVKNaidu Я мог бы это сделать, но у меня их около 10 в приложении, поэтому, если есть место, я могу применить к нему стиль, чтобы добиться этого, что было бы лучше. Настройка ширины была просто так, чтобы я мог видеть все в режиме дизайна, и я забыл удалить.   -  person BlackICE    schedule 22.07.2016
comment
Оберните представление списка в средство просмотра прокрутки. У средства просмотра прокрутки есть шаблон верхнего заголовка. Загрузите туда свой шаблон заголовка. И контент будет просто вашим списком. Убедитесь, что горизонтальное выравнивание слева, а вертикальное выравнивание вверху для просмотра списка. Посмотрим, поможет ли это. Или дайте мне знать   -  person AVK    schedule 22.07.2016
comment
хорошо, я попробую и посмотрю, что у меня получится, спасибо   -  person BlackICE    schedule 22.07.2016
comment
попробуй мой ответ) @BlackICE   -  person Andrii Krupka    schedule 12.08.2016

Ответы (3)


arrow_upward
11
arrow_downward

Примените этот стиль к своему 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>
person Andrii Krupka    schedule 11.08.2016
comment
Спасибо, я попробую и выложу тот, который у меня есть, если он другой - person BlackICE; 13.08.2016
comment
Пробовал это. Спасибо @Andrii. Прекрасно работает и делает именно то, что написано на банке. Однако в ситуации, в которой я нахожусь, мне также нужна горизонтальная прокрутка. К сожалению, это решение не обеспечивает горизонтальную прокрутку заголовков вместе с элементами (при их отслеживании). Но все же отличный ответ, если вам не нужна горизонтальная прокрутка :) - person Geoff James; 06.03.2017
comment
Помогло мне - просто извлекли часть шаблона сеттера, и listview заработал и выглядел как стандарт, но со статическим заголовком. - person Lindsay; 30.08.2017
comment
Ух ты, куча кода для выполнения небольшой задачи. Спасибо за помощь! - person Borzh; 09.01.2018
comment
@Borzh - На первый взгляд, я согласен с вами, но, подумав еще немного, я не вижу другого варианта. Дизайнер мог бы выбрать, чтобы атрибут сворачивал одно визуальное дерево и делал другое видимым, если у вас 'FixedHeader' == true, или наоборот, но это было бы чертовски уродливо и могло бы не работать так же хорошо. - person Quarkly; 06.06.2019
comment
Ok. Я нашел лучший способ добиться этого с помощью горизонтальных полос прокрутки и виртуализации без необходимости ограничивать высоту представления списка - это сгруппировать запрос по идентификатору и использовать CollectionViewSource с шаблоном заголовка группы. - person peterincumbria; 27.07.2019

arrow_upward
1
arrow_downward

Основываясь на первом ответе (который отлично работает, если горизонтальная прокрутка не требуется), вот работа для достижения horizol scroll + sticky header (FixedHeaderListViewStyle такое же, как указано выше):

<ScrollViewer
   HorizontalScrollBarVisibility="Auto"
   HorizontalScrollMode="Auto"
   VerticalScrollBarVisibility="Disabled"
   VerticalScrollMode="Disabled">
   <ListView Style="{StaticResource FixedHeaderListViewStyle}">
      <!-- your list here -->
   </ListView>
</ScrollViewer>
person Wendee Hsu    schedule 21.05.2019
comment
Проблема в том, что вы отключили виртуализацию с помощью ScrollViewer. - person peterincumbria; 19.07.2019
comment
@peterincumbria, что ты имеешь в виду? Я отключил вертикальную прокрутку в scrollViewer, потому что ListView уже включает вертикальную прокрутку. - person Wendee Hsu; 20.07.2019
comment
Привет, Вы могли быть правы, пожалуйста, проверьте это. У меня было несколько проблем с виртуализацией, если у вас будет время протестировать, дайте мне знать результат - может быть интересно. docs.microsoft. com / en-us / windows / uwp / debug-test-perf / - person peterincumbria; 20.07.2019

arrow_upward
1
arrow_downward

Стиль, предложенный Андреем, определенно является ответом, но вам не нужно включать все эти вещи. При переопределении внутреннего стиля все, что вам нужно сделать, это предоставить сеттеры для того, что вы фактически переопределяете. Минимальный необходимый вам код:

<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>
person Quarkly    schedule 06.06.2019
comment
это выглядит как хорошая альтернатива, гораздо меньше кода, но я какое-то время не работал с WPF, поэтому я не могу сказать, работает ли он наверняка, надеюсь, кто-то попробует! - person BlackICE; 18.06.2021