79、数据控件全解析：从分页到树形视图再到透视查看器

rust6ferris

墨衍会员 · AI 创作全网分发码龄4年

关注

原创最新推荐文章于 2026-03-27 09:35:55 发布 71 阅读 AI 写同款· GEO 优化 ›

Silverlight 5深度解析与实践专栏收录该内容

¥69.90 ¥499.90

88篇文章

订阅专栏

超级会员免费看

数据控件全解析：从分页到树形视图再到透视查看器

在数据展示与交互的领域中，有多种强大的控件可供选择。下面将详细介绍几种常见的数据控件，包括分页功能、树形视图以及透视查看器的使用方法和特性。

1. 数据行组头样式与分页

数据行组头样式方面，你可以通过样式更改 DataGridRowGroupHeader 类的任何属性。不过，更改文本需要为 DataGridRowGroupHeader.Template 属性提供新的控件模板。 RowGroupHeaderStyles 属性是一个集合，你可以提供任意数量的样式对象，从而为使用多级分组的 DataGrid 中的标题应用自定义格式。若提供多个样式，第一个样式将应用于顶级组，第二个应用于内部子组，依此类推。

分页功能由 PagedCollectionView 实现，它能将数据拆分为固定行数的页面，方便用户浏览大量数据。 PagedCollectionView 提供了两个用于配置分页的属性：
- PageSize ：设置每页允许的最大记录数，默认值为 0，表示不使用分页，所有记录集中显示。
- PageIndex ：指示用户当前所在的页面，0 为第一页，1 为第二页，依此类推。该属性不能通过编程方式设置，但 PagedCollectionView 提供了多个用于更改页面的方法，如 MoveToFirstPage() 、 MoveToLastPage() 、 MoveToPreviousPage() 、 MoveToNextPage() 和 MoveToPage() 。

为了方便用户在页面间切换，Silverlight 提供了 DataPager 控件。使用步骤如下：
1. 将 DataPager 添加到页面，通常放置在 DataGrid 下方。
2. 设置一些属性以配置其外观。
3. 将其连接到 PagedCollectionView 。

以下是创建 DataPager 的标记示例：

<data:DataPager Margin="5,0,5,5" Grid.Row="1" x:Name="pager"
  PageSize="5" DisplayMode="FirstLastPreviousNextNumeric"
  NumericButtonCount="3" IsTotalItemCountFixed="True"></data:DataPager>

要使 DataPager 正常工作，在创建视图后添加一行代码将其连接到 PagedCollectionView ：

pager.Source = view;

DataPager 的关键属性如下表所示：
| 属性 | 描述 |
| ---- | ---- |
| PageCount | 获取或设置 PagedCollectionView.PageCount 属性，可通过 DataPager 设置每页记录数。 |
| Source | 获取或设置包装源数据并实现分页的 PagedCollectionView 。 |
| NumericButtonCount | 使用 PagerDisplayMode 枚举选择六种常见的分页按钮排列方式之一。若要进一步自定义分页显示，可创建与 PagedCollectionView 直接交互的自定义分页控件，或为 DataPager 提供自定义控件模板。 |
| NumericButtonStyle | 允许创建格式化数字按钮的样式。若 DisplayMode 设置为 PreviousNext 或 FirstLastPreviousNext ，则该属性无效。 |
| AutoEllipsis | 若为 true ，将最后一个数字按钮替换为省略号（…）。若 DisplayMode 设置为 PreviousNext 或 FirstLastPreviousNext ，则该属性无效。 |
| IsTotalItemCountFixed | 若为 true ，用户在最后一页时，“Next” 按钮将被禁用。仅当代码添加或删除项可能导致页面数量改变时，才应将其设置为 false 。 |

2. 树形视图

树形视图控件可将项目显示为可折叠的分层树，类似于 Windows 资源管理器文件浏览器和 .NET 帮助库中的树形结构。本质上， TreeView 是一个专门用于托管 TreeViewItem 对象的 ItemsControl ，每个 TreeViewItem 本身也是一个 ItemsControl ，可容纳更多 TreeViewItem 对象，从而实现深度分层的数据显示。

2.1 填充树形视图

可以完全在标记中声明一个基本的 TreeView ，示例如下：

<controls:TreeView>
  <controls:TreeViewItem Header="Fruit">
    <controls:TreeViewItem Header="Orange"/>
    <controls:TreeViewItem Header="Banana"/>
    <controls:TreeViewItem Header="Grapefruit"/>
  </controls:TreeViewItem>
  <controls:TreeViewItem Header="Vegetables">
    <controls:TreeViewItem Header="Aubergine"/>
    <controls:TreeViewItem Header="Squash"/>
    <controls:TreeViewItem Header="Spinach"/>
  </controls:TreeViewItem>
</controls:TreeView>

实际上，你可以向 TreeView 添加几乎任何元素，包括按钮、面板和图像。若要显示非文本内容，最佳方法是使用 TreeViewItem 包装器，并通过 TreeViewItem.Header 属性提供内容，示例如下：

<controls:TreeViewItem>
  <controls:TreeViewItem.Header>
    <Button Content="There's a Button in this TreeView"></Button>
  </controls:TreeViewItem.Header>
</controls:TreeViewItem>

这样不仅能获得与直接添加非 TreeViewItem 元素相同的效果，还能访问 TreeViewItem 的丰富属性，如 IsSelected 和 IsExpanded 用于判断节点是否被选中或折叠，以及 Selected 、 Unselected 、 Expanded 和 Collapsed 等事件。

你还可以在 TreeViewItem 中显示普通数据对象，如 Product 对象，方法与在 ListBox 中显示数据对象类似，使用 Header 属性提供数据对象，使用 HeaderTemplate 属性提供格式化数据模板。

2.2 数据绑定的树形视图

通常，不会使用硬编码的固定信息填充 TreeView ，而是通过编程方式构造所需的 TreeViewItem 对象，或使用数据绑定显示对象集合。填充 TreeView 数据很简单，只需设置 ItemsSource 属性，但这种方法仅填充 TreeView 的第一级。更有趣的用法是处理具有嵌套结构的分层数据。

例如，要构建一个显示类别和产品的 TreeView ，首先需要调用 GetCategoriesWithProducts() 方法获取 Category 对象集合，每个 Category 对象包含一个 Product 对象集合。以下是查询 Web 服务并显示结果的页面代码：

Private Sub Page_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Dim client As New StoreDbClient()
    AddHandler client.GetCategoriesWithProductsCompleted, _
      AddressOf client_GetCategoriesWithProductsCompleted
    client.GetCategoriesWithProductsAsync()

    lblStatus.Text = "Contacting service ..."
End Sub

Private Sub client_GetCategoriesWithProductsCompleted(ByVal sender As Object, _
  ByVal e As GetCategoriesWithProductsCompletedEventArgs)
    Try
        treeCategoriesProducts.ItemsSource = e.Result
        lblStatus.Text = "Received results from web service."
    Catch err As Exception
        lblStatus.Text = "An error occured: " & err.Message
    End Try
End Sub

为了显示类别，需要提供一个 TreeView.ItemTemplate 来处理绑定的对象。在这个例子中，需要以粗体显示每个 Category 对象的 CategoryName 属性，以下是相应的数据模板：

<UserControl.Resources>
  <common:HierarchicalDataTemplate x:Key="CategoryTemplate">
    <TextBlock Text="{Binding CategoryName}" FontWeight="Bold" />
  </common:HierarchicalDataTemplate>
</UserControl.Resources>

这里使用 HierarchicalDataTemplate 对象而不是 DataTemplate 来设置 TreeView.ItemTemplate 。 HierarchicalDataTemplate 可以包装第二个模板，从第一级提取项目集合并提供给第二级模板。只需设置 ItemsSource 属性来标识包含子项的属性（在本例中是 Category.Products 集合），并设置 ItemTemplate 属性来指示每个对象的格式化方式。以下是两个模板的示例：

<UserControl.Resources>
  <common:HierarchicalDataTemplate x:Key="CategoryTemplate"
   ItemsSource="{Binding Products}" ItemTemplate="{StaticResource ProductTemplate}">
    <TextBlock Text="{Binding CategoryName}" FontWeight="Bold" />
  </common:HierarchicalDataTemplate>

  <common:HierarchicalDataTemplate x:Key="ProductTemplate">
    <TextBlock FontStyle="Italic" Text="{Binding ModelName}" />
  </common:HierarchicalDataTemplate>
</UserControl.Resources>

最后，指定根级项目（类别）应使用 CategoryTemplate 进行格式化的 TreeView 如下：

<controls:TreeView x:Name="treeCategories" Margin="5"
  ItemTemplate="{StaticResource CategoryTemplate}">
</controls:TreeView>

3. 透视查看器

透视查看器是一种专门用于数据可视化和分析的控件，具有高级功能。其优点是提供了一个简洁的界面，所需代码很少；缺点是定制选项相对有限。

透视查看器主要用于剖析大型数据集，提供过滤选项，帮助用户聚焦感兴趣的数据子集。它有两个独特的特点：
- 透视功能 ：允许用户轻松切换过滤设置，从不同角度查看数据，可能会发现新的见解，且无需编写代码来管理过滤过程。
- 图像和视觉风格 ：几乎每个透视查看器示例都使用某种图像来表示集合中的每个项目，这些图像拼接成一个可缩放、可滚动的高分辨率表面。借助 DeepZoom 技术，可使用大量高分辨率图片而不会显著降低性能。

3.1 定义透视查看器

在使用透视查看器之前，需要添加对 System.Windows.Controls.Pivot.dll 程序集的引用，并映射相应的命名空间前缀：

<UserControl x:Class="DataControls.PivotViewerTest"  xmlns:pv=
"clr-namespace:System.Windows.Controls.Pivot;assembly=System.Windows.Controls.Pivot"
... >

然后将透视查看器添加到页面：

<pv:PivotViewer x:Name="pivotViewer">
</pv:PivotViewer>

3.2 数据模板

要定义透视查看器为每个项目显示的内容，需要使用 PivotViewerItemTemplate 类。 PivotViewerItemTemplate 继承自 DataTemplate 并添加了一个 MaxWidth 属性，可用于设置数据项缩放大小的上限，防止用户过度放大低分辨率图像。

以下是带有数据模板的透视查看器示例：

<pv:PivotViewer x:Name="pivotViewer">
  <pv:PivotViewer.ItemTemplates>
    <pv:PivotViewerItemTemplate>
      <Border Margin="5" BorderThickness="1" BorderBrush="SteelBlue" Width="125"
       CornerRadius="4">
        <Grid Margin="3">
          <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
          </Grid.RowDefinitions>
          <TextBlock FontWeight="Bold"
           Text="{Binding Path=ModelNumber}"></TextBlock>
          <TextBlock Grid.Row="1" Text="{Binding Path=ModelName}"></TextBlock>
          <Image MinHeight="100" Grid.Row="2" Grid.RowSpan="2" Source=
"{Binding Path=ProductImagePath, Converter={StaticResource ImagePathConverter}}">
          </Image>
        </Grid>
      </Border>
    </pv:PivotViewerItemTemplate>
  </pv:PivotViewer.ItemTemplates>
</pv:PivotViewer>

3.3 透视属性

若要使用透视查看器的过滤窗格和详细信息窗格，需要添加透视属性。每个属性映射到数据项中的一个字段，告诉透视查看器如何使用该信息。若未为数据对象中的某个字段添加透视属性，透视查看器将忽略该字段。

以下是定义透视属性的示例：

<pv:PivotViewer x:Name="pivotViewer" ItemDoubleClick="pivotViewer_ItemDoubleClick">
  <pv:PivotViewer.PivotProperties>
    <pv:PivotViewerStringProperty Id="CategoryName" DisplayName="Category"
     Binding="{Binding CategoryName}" Options="CanFilter" />
    <pv:PivotViewerStringProperty Id="ModelNumber" DisplayName="Model Number"
     Binding="{Binding ModelNumber}" Options="CanSearchText" />
    <pv:PivotViewerStringProperty Id="ModelName" DisplayName="Model Name"
     Binding="{Binding ModelName}" Options="CanFilter" />
    <pv:PivotViewerNumericProperty Id="UnitCost" DisplayName="Cost"
     Binding="{Binding UnitCost}" Format="C" Options="CanFilter" />
    <pv:PivotViewerDateTimeProperty Id="DateProperty" DisplayName="Date Added"
     Binding="{Binding DateAdded}" Options="CanFilter"  />
    <pv:PivotViewerStringProperty Id="Description" DisplayName="Description"
     Binding="{Binding Description}"  />
  </pv:PivotViewer.PivotProperties>
  ...
</pv:PivotViewer>

通过以上步骤和示例，你可以灵活运用分页、树形视图和透视查看器等数据控件，实现各种复杂的数据展示和交互功能。

数据控件全解析：从分页到树形视图再到透视查看器

3.4 透视属性详解

在前面我们已经了解到，要使用透视查看器的过滤窗格和详细信息窗格，需要添加透视属性。下面我们详细介绍不同类型的透视属性及其使用方法。

PivotViewerStringProperty ：用于处理字符串类型的数据。需要提供 Id 、 DisplayName 和 Binding 三个关键属性。例如：

<pv:PivotViewerStringProperty Id="CategoryName" DisplayName="Category"
 Binding="{Binding CategoryName}" Options="CanFilter" />

这里的 Options 属性可以设置不同的值，如 CanFilter 表示该字段可用于过滤， CanSearchText 表示可以使用文本搜索框查找和应用过滤值。多个值可以用逗号分隔，如：

<pv:PivotViewerStringProperty Id="ModelName" DisplayName="Model Name"
 Binding="{Binding ModelName}" Options="CanFilter,CanSearchText" />

PivotViewerNumericProperty ：用于处理数值类型的数据。除了 Id 、 DisplayName 和 Binding 外，还可以设置 Format 属性来指定显示格式。例如：

<pv:PivotViewerNumericProperty Id="UnitCost" DisplayName="Cost"
 Binding="{Binding UnitCost}" Format="C" Options="CanFilter" />

这里的 Format="C" 表示以货币格式显示数值。

PivotViewerDateTimeProperty ：用于处理日期类型的数据。同样需要 Id 、 DisplayName 和 Binding ，并可以设置 Options 属性。例如：

<pv:PivotViewerDateTimeProperty Id="DateProperty" DisplayName="Date Added"
 Binding="{Binding DateAdded}" Options="CanFilter"  />

不同类型的透视属性及其作用可以总结在以下表格中：
| 属性类型 | 用途 | 示例属性设置 |
| ---- | ---- | ---- |
| PivotViewerStringProperty | 处理字符串数据 | Id 、 DisplayName 、 Binding 、 Options |
| PivotViewerNumericProperty | 处理数值数据 | Id 、 DisplayName 、 Binding 、 Format 、 Options |
| PivotViewerDateTimeProperty | 处理日期数据 | Id 、 DisplayName 、 Binding 、 Options |

3.5 透视查看器的实际应用流程

下面我们通过一个 mermaid 流程图来展示使用透视查看器的实际应用流程：

graph LR
    A[添加对程序集的引用并映射命名空间] --> B[添加透视查看器到页面]
    B --> C[定义数据模板]
    C --> D[添加透视属性]
    D --> E[显示数据并使用过滤和透视功能]

具体步骤如下：
1. 添加对程序集的引用并映射命名空间 ：

<UserControl x:Class="DataControls.PivotViewerTest"  xmlns:pv=
"clr-namespace:System.Windows.Controls.Pivot;assembly=System.Windows.Controls.Pivot"
... >

添加透视查看器到页面 ：

<pv:PivotViewer x:Name="pivotViewer">
</pv:PivotViewer>

定义数据模板 ：

<pv:PivotViewer x:Name="pivotViewer">
  <pv:PivotViewer.ItemTemplates>
    <pv:PivotViewerItemTemplate>
      <Border Margin="5" BorderThickness="1" BorderBrush="SteelBlue" Width="125"
       CornerRadius="4">
        <Grid Margin="3">
          <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
          </Grid.RowDefinitions>
          <TextBlock FontWeight="Bold"
           Text="{Binding Path=ModelNumber}"></TextBlock>
          <TextBlock Grid.Row="1" Text="{Binding Path=ModelName}"></TextBlock>
          <Image MinHeight="100" Grid.Row="2" Grid.RowSpan="2" Source=
"{Binding Path=ProductImagePath, Converter={StaticResource ImagePathConverter}}">
          </Image>
        </Grid>
      </Border>
    </pv:PivotViewer.ItemTemplate>
  </pv:PivotViewer.ItemTemplates>
</pv:PivotViewer>

添加透视属性 ：

<pv:PivotViewer x:Name="pivotViewer" ItemDoubleClick="pivotViewer_ItemDoubleClick">
  <pv:PivotViewer.PivotProperties>
    <pv:PivotViewerStringProperty Id="CategoryName" DisplayName="Category"
     Binding="{Binding CategoryName}" Options="CanFilter" />
    <pv:PivotViewerStringProperty Id="ModelNumber" DisplayName="Model Number"
     Binding="{Binding ModelNumber}" Options="CanSearchText" />
    <pv:PivotViewerStringProperty Id="ModelName" DisplayName="Model Name"
     Binding="{Binding ModelName}" Options="CanFilter" />
    <pv:PivotViewerNumericProperty Id="UnitCost" DisplayName="Cost"
     Binding="{Binding UnitCost}" Format="C" Options="CanFilter" />
    <pv:PivotViewerDateTimeProperty Id="DateProperty" DisplayName="Date Added"
     Binding="{Binding DateAdded}" Options="CanFilter"  />
    <pv:PivotViewerStringProperty Id="Description" DisplayName="Description"
     Binding="{Binding Description}"  />
  </pv:PivotViewer.PivotProperties>
  ...
</pv:PivotViewer>

显示数据并使用过滤和透视功能 ：用户可以在透视查看器中看到数据，并使用过滤窗格和详细信息窗格进行数据筛选和查看。通过切换不同的过滤设置，实现透视功能，从不同角度分析数据。

4. 总结与应用建议

分页功能 ：当处理大量数据时，分页功能可以提高用户体验，避免一次性加载过多数据导致性能问题。使用 DataPager 控件可以方便地实现分页操作，通过设置相关属性可以满足不同的需求。
树形视图 ：树形视图适用于展示具有层次结构的数据，如文件系统、类别和产品关系等。可以通过数据绑定动态填充树形视图，使用 HierarchicalDataTemplate 可以轻松处理多级数据。
透视查看器 ：透视查看器适合用于数据可视化和分析，特别是处理大型数据集。其独特的透视功能和图像展示方式可以帮助用户快速发现数据中的规律和趋势。但定制选项相对有限，在使用前需要评估是否能满足项目的需求。

在实际应用中，可以根据具体的业务需求和数据特点选择合适的数据控件。例如，如果需要展示简单的列表数据，可能只需要使用分页功能；如果数据具有明显的层次结构，树形视图是不错的选择；而对于需要深入分析和可视化的大型数据集，透视查看器则能发挥其优势。

通过灵活运用这些数据控件，可以构建出功能强大、用户体验良好的数据展示和交互界面。