WPF：ListView自定义scrollviewer导致列标题消失

Question

I am have been writing a custom ScrollViewer style for my ListView. Upon applying the style (see code below) it removes the Column Header from the view, leaving only the items in the list.

I can only seem to have:

• Working headers without custom scroll viewer
• Working custom scroll viewer without headers

I cannot work out why this is happening. What I should do to get this to work?

EDIT:

I believe this is due to the fact that I am defining an empty ItemsPresenter in my style (below) but this is what other people seem to be doing/recommending.

The list view style

<Style x:Key="StandardListView" TargetType="{x:Type ListView}">
    <Setter Property="Background" Value="{DynamicResource TransparentWhite}" />
    <Setter Property="Foreground" Value="{DynamicResource TextParagraphLightGreyP1}" />
    <Setter Property="BorderBrush" Value="{DynamicResource ControlOutlineDisabled}" />
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListView">
                <ScrollViewer Style="{DynamicResource StandardScrollViewer}">
                    <ItemsPresenter >
                    </ItemsPresenter>
                </ScrollViewer>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Custom Scroll Viewer Style

<Style x:Key="StandardScrollViewer" TargetType="{x:Type ScrollViewer}">
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="BorderBrush" Value="{DynamicResource BackgroundGreyLevel2}" />
        <Setter Property="Background" Value="{DynamicResource CollectionControlBackgroundGradient}" />
        <Setter Property="VerticalScrollBarVisibility" Value="Auto"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollViewer}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <ScrollContentPresenter Grid.ColumnSpan="2" Grid.RowSpan="2"/>
                        <ScrollBar Name="PART_VerticalScrollBar"
                                   HorizontalAlignment="Right"
                                   Opacity="0.5" 
                                   Grid.Column="1"
                                   Value="{TemplateBinding VerticalOffset}"
                                   Maximum="{TemplateBinding ScrollableHeight}"
                                   ViewportSize="{TemplateBinding ViewportHeight}"
                                   Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
                        <ScrollBar Name="PART_HorizontalScrollBar"
                                   VerticalAlignment="Bottom"
                                   Orientation="Horizontal"
                                   Opacity="0.5"
                                   Grid.Row="1"
                                   Value="{TemplateBinding HorizontalOffset}"
                                   Maximum="{TemplateBinding ScrollableWidth}"
                                   ViewportSize="{TemplateBinding ViewportWidth}"
                                   Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

The list in the view

<ListView x:Name="Licences" Margin="2,20,2,25" Style="{DynamicResource StandardListView}">
...

Answer 1

The GridView headers are part of the ScrollViewer . This template should work:

<ControlTemplate TargetType="ListView">
    <ScrollViewer Style="{DynamicResource {x:Static GridView.GridViewScrollViewerStyleKey}}">
        <ItemsPresenter >
        </ItemsPresenter>
    </ScrollViewer>
</ControlTemplate>

If you want a custom ScrollViewer with headers, you need to create one. You can start from the default GridView.GridViewScrollViewerStyleKey style below and modify it as per your requirements:

<Style x:Key="{x:Static GridView.GridViewScrollViewerStyleKey}" TargetType="{x:Type ScrollViewer}">
    <Setter Property="UIElement.Focusable" Value="false"/>
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollViewer}">
                <Grid Background="{TemplateBinding Control.Background}" SnapsToDevicePixels="true">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <DockPanel Margin="{TemplateBinding Control.Padding}">
                        <ScrollViewer DockPanel.Dock="Top" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"
                            Focusable="false">
                            <GridViewHeaderRowPresenter Margin="2,0,2,0" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"
                                            ColumnHeaderContainerStyle="{Binding Path=TemplatedParent.View.ColumnHeaderContainerStyle, RelativeSource={RelativeSource TemplatedParent}}"
                                            ColumnHeaderTemplate="{Binding Path=TemplatedParent.View.ColumnHeaderTemplate, RelativeSource={RelativeSource TemplatedParent}}"
                                            ColumnHeaderTemplateSelector="{Binding Path=TemplatedParent.View.ColumnHeaderTemplateSelector, RelativeSource={RelativeSource TemplatedParent}}"
                                            ColumnHeaderStringFormat="{Binding Path=TemplatedParent.View.ColumnHeaderStringFormat, RelativeSource={RelativeSource TemplatedParent}}"
                                            AllowsColumnReorder="{Binding Path=TemplatedParent.View.AllowsColumnReorder, RelativeSource={RelativeSource TemplatedParent}}"
                                            ColumnHeaderContextMenu="{Binding Path=TemplatedParent.View.ColumnHeaderContextMenu, RelativeSource={RelativeSource TemplatedParent}}"
                                            ColumnHeaderToolTip="{Binding Path=TemplatedParent.View.ColumnHeaderToolTip, RelativeSource={RelativeSource TemplatedParent}}">
                                <GridViewRowPresenterBase.Columns>
                                    <Binding Path="TemplatedParent.View.Columns" RelativeSource="{RelativeSource TemplatedParent}"/>
                                </GridViewRowPresenterBase.Columns>
                            </GridViewHeaderRowPresenter>
                        </ScrollViewer>
                        <ScrollContentPresenter Name="PART_ScrollContentPresenter" KeyboardNavigation.DirectionalNavigation="Local"
                                      Content="{TemplateBinding ContentControl.Content}"
                                      ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
                                      CanContentScroll="{TemplateBinding ScrollViewer.CanContentScroll}"
                                      SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"/>
                    </DockPanel>
                    <ScrollBar Name="PART_HorizontalScrollBar" Orientation="Horizontal" Grid.Row="1" Minimum="0.0"
                       Maximum="{TemplateBinding ScrollViewer.ScrollableWidth}"
                       ViewportSize="{TemplateBinding ScrollViewer.ViewportWidth}"
                       Visibility="{TemplateBinding ScrollViewer.ComputedHorizontalScrollBarVisibility}" Cursor="Arrow"
                       Value="{Binding Path=HorizontalOffset, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"/>
                    <ScrollBar Name="PART_VerticalScrollBar" Orientation="Vertical" Grid.Column="1" Minimum="0.0"
                       Maximum="{TemplateBinding ScrollViewer.ScrollableHeight}"
                       ViewportSize="{TemplateBinding ScrollViewer.ViewportHeight}"
                       Visibility="{TemplateBinding ScrollViewer.ComputedVerticalScrollBarVisibility}" Cursor="Arrow"
                       Value="{Binding Path=VerticalOffset, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"/>
                    <DockPanel Grid.Column="1" Grid.Row="1" LastChildFill="false"
                       Background="{Binding Path=Background, ElementName=PART_VerticalScrollBar}">
                        <Rectangle DockPanel.Dock="Left" Width="1" Fill="White"
                         Visibility="{TemplateBinding ScrollViewer.ComputedVerticalScrollBarVisibility}"/>
                        <Rectangle DockPanel.Dock="Top" Height="1" Fill="White"
                         Visibility="{TemplateBinding ScrollViewer.ComputedHorizontalScrollBarVisibility}"/>
                    </DockPanel>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 2

mm8's answer did the trick. Essentially it seems that I was incorrectly placing the GridViewHeaderRowPresenter in the ListView style, when in actual fact it should have been placed in the ScrollViewer style as below:

   <Style x:Key="StandardScrollViewer" TargetType="{x:Type ScrollViewer}">
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="BorderBrush" Value="{DynamicResource BackgroundGreyLevel2}" />
        <Setter Property="Background" Value="{DynamicResource CollectionControlBackgroundGradient}" />
        <Setter Property="VerticalScrollBarVisibility" Value="Hidden"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollViewer}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <DockPanel Margin="{TemplateBinding Padding}" Grid.ColumnSpan="2" Grid.RowSpan="2">
                            <ScrollViewer DockPanel.Dock="Top" Grid.ColumnSpan="2" Grid.RowSpan="2" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" Focusable="False">
                                <GridViewHeaderRowPresenter x:Name="GridViewHeaderRowPresenter" Margin="2,0,2,0" Columns="{Binding Path=TemplatedParent.View.Columns, RelativeSource={RelativeSource TemplatedParent}}" ColumnHeaderContainerStyle="{Binding Path=TemplatedParent.View.ColumnHeaderContainerStyle, RelativeSource={RelativeSource TemplatedParent}}" ColumnHeaderTemplate="{Binding Path=TemplatedParent.View.ColumnHeaderTemplate, RelativeSource={RelativeSource TemplatedParent}}" ColumnHeaderTemplateSelector="{Binding Path=TemplatedParent.View.ColumnHeaderTemplateSelector, RelativeSource={RelativeSource TemplatedParent}}" AllowsColumnReorder="{Binding Path=TemplatedParent.View.AllowsColumnReorder, RelativeSource={RelativeSource TemplatedParent}}" ColumnHeaderContextMenu="{Binding Path=TemplatedParent.View.ColumnHeaderContextMenu, RelativeSource={RelativeSource TemplatedParent}}" ColumnHeaderToolTip="{Binding Path=TemplatedParent.View.ColumnHeaderToolTip, RelativeSource={RelativeSource TemplatedParent}}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </ScrollViewer>
                            <ScrollContentPresenter Name="PART_ScrollContentPresenter" KeyboardNavigation.DirectionalNavigation="Local" CanContentScroll="{TemplateBinding CanContentScroll}" Grid.ColumnSpan="2" Grid.RowSpan="2"/>
                        </DockPanel>
                        <ScrollBar Name="PART_VerticalScrollBar"
                                   HorizontalAlignment="Right" 
                                   Grid.Column="1"
                                   Grid.Row="0"
                                   MaxHeight="{TemplateBinding ViewportHeight}"

                                   VerticalAlignment="Stretch"
                                   Value="{TemplateBinding VerticalOffset}"
                                   Maximum="{TemplateBinding ScrollableHeight}"
                                   ViewportSize="{TemplateBinding ViewportHeight}"
                                   Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
                        <ScrollBar Name="PART_HorizontalScrollBar"
                                   VerticalAlignment="Bottom"
                                   Orientation="Horizontal"
                                   Grid.Row="1"
                                   Value="{TemplateBinding HorizontalOffset}"
                                   Maximum="{TemplateBinding ScrollableWidth}"
                                   ViewportSize="{TemplateBinding ViewportWidth}"
                                   Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

I then updated the ListView style as follows:

<Style x:Key="StandardListView" TargetType="{x:Type ListView}">
    <Setter Property="Background" Value="{DynamicResource TransparentWhite}" />
    <Setter Property="Foreground" Value="{DynamicResource TextParagraphLightGreyP1}" />
    <Setter Property="BorderBrush" Value="{DynamicResource ControlOutlineDisabled}" />
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListView">
                <ScrollViewer Style="{DynamicResource StandardScrollViewer}">
                    <DockPanel>
                        <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                    </DockPanel>
                </ScrollViewer>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>