Keep ListView.HeaderTemplate visible/static/sticky in UWP

Question

I need to keep the HeaderTemplate of a ListView visible at all times, but I don't know what to set, or what part of the ListView's template to change to do that.

What I currently have causes the header of the ListView to scroll off the top when scrolling down through items.

How can I keep the header "row" of the ListView visible even when scrolling through the ListView's items??

Here's my 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

Apply this style to your ListView and you will have static 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

Based on the first answer (which works perfectly if horizontal scrolling is not required), here is a work around to achieve horizol scroll + sticky header (The FixedHeaderListViewStyle is same as above):

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