making the XAML list view header sticky with full scroll bar

Question

I have a list view which has a header template

<Grid Margin="70,0,0,0">
  <ListView x:Name="LanguagesListView"  DataContext="{x:Bind ViewModel}" Grid.Row="2" Style="{StaticResource LanguagesListViewStyle}" ItemsSource="{x:Bind ViewModel.Languages}" SelectedItem="{x:Bind ViewModel.SelectedLanguage, Mode=TwoWay}" HorizontalAlignment="Stretch" >              
            <ListView.HeaderTemplate>
                <DataTemplate>
                    <Grid Margin="0,0,70,0" >
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Text="{Binding Strings.ui_language_setting}" Style="{ThemeResource H1TextBlockStyle}" TextTrimming="CharacterEllipsis" TextWrapping="WrapWholeWords"/>
                        <TextBlock Grid.Row="1" Text="{Binding Strings.ui_language_copy}" Style="{ThemeResource BodyTitleTextBlockStyle}" Foreground="{StaticResource Gray9Brush}" TextWrapping="WrapWholeWords" HorizontalAlignment="Left" Margin="0,10,0,30" TextTrimming="CharacterEllipsis"/>
                    </Grid>
                </DataTemplate>
            </ListView.HeaderTemplate>
  </ListView>
</Grid>

and the style for the list view is

<Style x:Key="LanguagesListViewStyle" TargetType="ListView">
        <Setter Property="TabNavigation" Value="Local" />
        <Setter Property="Padding" Value="0,0,50,55" />
        <Setter Property="IsItemClickEnabled" Value="True" />
        <Setter Property="ItemContainerStyle" Value="{StaticResource LanguagesListViewItemContainerStyle}" />
        <Setter Property="ItemTemplate" Value="{StaticResource LanguagesListViewItemTemplate}" />
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
        <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
        <Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled" />
        <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
        <Setter Property="ScrollViewer.IsHorizontalScrollChainingEnabled" Value="False" />
        <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True" />
        <Setter Property="ScrollViewer.IsVerticalScrollChainingEnabled" Value="True" />
        <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>

My aim is to make the Header of the list view sticky which works but I would like to have the scroll viewer of the list view to span across the header area as well. Currently the scroll bar appears below the header.

I would like to get the scroll viewer to the top right, still keeping the header sticky.

Any helps appreciated.

score 1 · Accepted Answer · answered Jul 13 '21 at 12:56

I found an alternate solution for this. Basically keeping the header out of the list view header and move it to a Grid with 2 rows. Header content and the list view will be in the same row and keeping a padding for the list view to keep the list view below the Header. use a ListViewClipBehavior to fix the scrolling issue.

<Grid Margin="70,0,0,0">
        <Grid Margin="0,58,70,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" Text="{x:Bind Strings.ui_language_setting}" Style="{ThemeResource H1TextBlockStyle}" TextTrimming="CharacterEllipsis" TextWrapping="WrapWholeWords"/>
            <TextBlock Grid.Row="1" Text="{x:Bind Strings.ui_language_copy}" Style="{ThemeResource BodyTitleTextBlockStyle}" Foreground="{StaticResource Gray9Brush}" TextWrapping="WrapWholeWords" HorizontalAlignment="Left" Margin="0,10,0,0" TextTrimming="CharacterEllipsis"/>
        </Grid>
        <ListView x:Name="LanguagesListView" Style="{StaticResource LanguagesListViewStyle}" ItemsSource="{x:Bind ViewModel.Languages}" SelectedItem="{x:Bind ViewModel.SelectedLanguage, Mode=TwoWay}" HorizontalAlignment="Stretch" Padding="0,160,0,0" Margin="0,0,0,0">
            <interactivity:Interaction.Behaviors>
                <behaviors:ListViewClipBehavior Padding="0,160,0,0" />
            <interactivity:Interaction.Behaviors>
        </ListView>
</grid>

score 0 · Answer 2 · answered Jul 09 '21 at 06:57

making the XAML list view header sticky with full scroll bar

The problem is you have placed the header out of the ScrollViewer, it could make the header sticky but the scroll bar will not full.

You have many ways to make sticky header, derive from your screenshot. it looks contain only one group. please check Windows Community Toolkit ScrollHeader, and use StickyHeaderBehavior directly.

For example

<ListView Name="listView">
    <interactivity:Interaction.Behaviors>
        <behaviors:StickyHeaderBehavior  />
    </interactivity:Interaction.Behaviors>
    <ListView.Header>
        <Grid MinHeight="100" Background="#FF0078D7">
            <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Sample Text"/>
        </Grid>
    </ListView.Header>
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="x:String">
            <Grid MinHeight="25" Margin="10">
                <TextBlock Text="{Binding}" VerticalAlignment="Center" />
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.Items>
        <x:String>One</x:String>
        <x:String>Two</x:String>
        <x:String>Three</x:String>
        <x:String>Four</x:String>
        <x:String>Five</x:String>
        <x:String>Six</x:String>
        <x:String>Seven</x:String>
        <x:String>Eight</x:String>
        <x:String>Nine</x:String>
        <x:String>Ten</x:String>
        <x:String>Eleven</x:String>
        <x:String>Twelve</x:String>
        <x:String>Thirteen</x:String>
        <x:String>Fourteen</x:String>
        <x:String>Fifteen</x:String>
        <x:String>Sixteen</x:String>
        <x:String>Seventeen</x:String>
        <x:String>Eighteen</x:String>
        <x:String>Nineteen</x:String>
        <x:String>Twenty</x:String>
    </ListView.Items>
</ListView>

making the XAML list view header sticky with full scroll bar

2 Answers2