为自定义 ViewBase (ListView.View) 添加列标题

引言

通常只有 GridView 才有列标题，当然你可以创建一个自定义控件并将其放置在 ListView 之上，但在 WPF 中，你可以通过对模板进行少量修改来放置列标题。

如何实现？

GridViewHeaderRowPresenter

查看 MSDN 中的 ListView 控件模板

GridView.GridViewScrollViewerStyleKey 被 ListView 的 ScrollViewer 使用，它有一个 GridViewHeaderRowPresenter ，该 Presenter 绑定到 ListView.View.Columns。虽然这个样式键是为 GridView 设计的，并且只有 GridView 才有 Columns 字段，但是，如果我更改模板，使 ListView 的 ScrollViewer 始终以 GridViewScrollViewerStyleKey 样式化，那么其他 View 可以使用类似的属性来获取列标题。

更新从 ViewBase 派生的视图

因此，我在我的 VirtualWrapPanelView 中添加了该属性

public class VirtualWrapPanelView : ViewBase
{
  ...
  private GridViewColumnCollection _columns = new GridViewColumnCollection();

  public GridViewColumnCollection Columns
  {
    get { return _columns; }
  }
}

为了使其看起来更好并防止调试消息，你还需要添加一些属性

public static readonly DependencyProperty ColumnHeaderContainerStyleProperty =
            GridView.ColumnHeaderContainerStyleProperty.AddOwner
		(typeof(VirutalWrapPanelView));
public Style ColumnHeaderContainerStyle
{
    get { return (Style)GetValue(ColumnHeaderContainerStyleProperty); }
    set { SetValue(ColumnHeaderContainerStyleProperty, value); }
}

public static readonly DependencyProperty ColumnHeaderTemplateProperty =
    GridView.ColumnHeaderTemplateProperty.AddOwner(typeof(VirutalWrapPanelView));
...//Couple more properties

ColumnHeaderContainerStyle

<Style x:Key="ColumnHeaderContainerStyle" TargetType="GridViewColumnHeader">
  <Setter Property="BorderBrush" Value="Transparent" />
  <Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>

顾名思义，它是列标题的样式。我将 HorizontalContentAlignment 设置为 Stretch，以便标题文本可以左对齐，而排序指示箭头可以居中顶部对齐。

更新 ListView 模板

然后你必须更改 ListView 模板，类似于 MSDN 中的示例

<Style x:Key="{x:Type local:FileList}" TargetType="{x:Type local:FileList}" >
  <...>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ListView">
        <Border ...>
          <ScrollViewer Style="{DynamicResource 
		{x:Static GridView.GridViewScrollViewerStyleKey}}">
            <ItemsPresenter />
          </ScrollViewer>
        </Border>
        <..>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

更新实际视图

然后准备工作就完成了，你可以使用与 GridView 类似的方式更新视图。

<uc:VirutalWrapPanelView x:Key="SmallIconView" 
	ColumnHeaderContainerStyle="{StaticResource ColumnHeaderContainerStyle}" ...>
<uc:VirutalWrapPanelView.ItemTemplate>
  <DataTemplate>
    <..>
  </DataTemplate>
</uc:VirutalWrapPanelView.ItemTemplate>

<uc:VirutalWrapPanelView.Columns>
  <GridViewColumn Width="100" Header="Name" 
	local:FileList.SortPropertyName="sortByFullName" />
  <GridViewColumn Width="100" Header="Type" 
	local:FileList.SortPropertyName="sortByType" />
  <GridViewColumn Width="100" Header="Time" 
	local:FileList.SortPropertyName="sortByLastWriteTime" />
  <GridViewColumn Width="100" Header="Size" 
	local:FileList.SortPropertyName="sortByLength" />
  </uc:VirutalWrapPanelView.Columns>
</uc:VirutalWrapPanelView>

最终产品可以在我的 FileExplorer 文章 (0.3) 中找到。

这篇文章已发布在 CodeProject 上。你可以在 这里 找到我的文章列表。