10分钟掌握WPF分页难题：HandyControl Pagination控件全解析

10分钟掌握WPF分页难题：HandyControl Pagination控件全解析

【免费下载链接】HandyControl Contains some simple and commonly used WPF controls 项目地址: https://gitcode.com/gh_mirrors/ha/HandyControl

你是否还在为WPF数据展示中的分页功能编写大量重复代码？是否遇到过页码控件样式丑陋、交互生硬的问题？本文将带你全面掌握HandyControl分页控件（Pagination）的使用技巧，通过10分钟学习，彻底解决WPF应用中的数据分页难题。

读完本文你将获得：

• 分页控件的完整属性与事件说明
• 3种实战场景的代码实现方案
• 自定义分页样式的核心技巧
• 性能优化与常见问题解决方案

一、分页控件核心概念

在处理大量数据展示时，分页（Pagination）是提升用户体验的关键技术。WPF原生控件中并未提供专门的分页组件，而HandyControl的Pagination控件填补了这一空白，实现了页码导航、页码跳转、页码数量控制等核心功能。

1.1 分页控件工作原理

Pagination控件通过管理页码状态和触发页码变更事件，实现与数据展示控件（如DataGrid、ListView）的联动。其核心工作流程如下：

1.2 控件类结构解析

Pagination控件的类定义包含多个关键模板部件，用于构建完整的分页UI：

[TemplatePart(Name = ElementButtonLeft, Type = typeof(Button))]      // 上一页按钮
[TemplatePart(Name = ElementButtonRight, Type = typeof(Button))]     // 下一页按钮
[TemplatePart(Name = ElementButtonFirst, Type = typeof(RadioButton))]// 首页按钮
[TemplatePart(Name = ElementMoreLeft, Type = typeof(FrameworkElement))]// 左侧省略号
[TemplatePart(Name = ElementPanelMain, Type = typeof(Panel))]        // 页码容器
[TemplatePart(Name = ElementMoreRight, Type = typeof(FrameworkElement))]// 右侧省略号
[TemplatePart(Name = ElementButtonLast, Type = typeof(RadioButton))] // 末页按钮
[TemplatePart(Name = ElementButtonLast, Type = typeof(NumericUpDown))]// 页码输入框
public class Pagination : Control

二、控件属性与事件详解

2.1 核心属性

属性名	类型	描述	默认值	重要性
MaxPageCount	int	最大页数	1	⭐⭐⭐
DataCountPerPage	int	每页数据量	20	⭐⭐⭐
PageIndex	int	当前页码	1	⭐⭐⭐⭐⭐
MaxPageInterval	int	当前页码与两侧按钮的最大间隔	3	⭐⭐
IsJumpEnabled	bool	是否显示页码跳转框	false	⭐⭐

注意：当PageIndex为1时，整个分页控件将自动隐藏，这是HandyControl的默认行为。

2.2 关键事件

事件名	事件参数	触发时机	使用场景
PageUpdated	-	页码改变时	绑定数据加载逻辑

三、快速上手：3步实现基础分页

3.1 环境准备

首先确保项目中已引用HandyControl库。如果使用NuGet，可通过以下命令安装：

Install-Package HandyControl

或通过GitCode仓库获取源码：

git clone https://gitcode.com/gh_mirrors/ha/HandyControl

3.2 XAML中添加控件

在XAML文件中添加命名空间并使用Pagination控件：

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:hc="https://handyorg.github.io/handycontrol"
    x:Class="PaginationDemo.MainWindow">
    
    <StackPanel Margin="20">
        <!-- 数据展示区域 -->
        <DataGrid x:Name="dataGrid" Height="300" />
        
        <!-- 分页控件 -->
        <hc:Pagination 
            x:Name="pagination" 
            MaxPageCount="10" 
            PageIndex="1" 
            IsJumpEnabled="True"
            PageUpdated="Pagination_PageUpdated"
            HorizontalAlignment="Center"
            Margin="0,20,0,0"/>
    </StackPanel>
</Window>

3.3 后台代码实现数据绑定

在窗口的后台代码中处理分页逻辑：

public partial class MainWindow : Window
{
    private List<SampleData> allData; // 所有数据
    private int pageSize = 20;        // 每页数据量
    
    public MainWindow()
    {
        InitializeComponent();
        LoadData();
        pagination.DataCountPerPage = pageSize;
        LoadPageData(1); // 加载第一页数据
    }
    
    // 模拟加载所有数据
    private void LoadData()
    {
        allData = new List<SampleData>();
        for (int i = 1; i <= 187; i++)
        {
            allData.Add(new SampleData 
            { 
                Id = i, 
                Name = $"项目 {i}", 
                CreateTime = DateTime.Now.AddDays(-i) 
            });
        }
        
        // 计算总页数并设置
        pagination.MaxPageCount = (int)Math.Ceiling(allData.Count / (double)pageSize);
    }
    
    // 加载指定页数据
    private void LoadPageData(int pageIndex)
    {
        var pageData = allData
            .Skip((pageIndex - 1) * pageSize)
            .Take(pageSize)
            .ToList();
            
        dataGrid.ItemsSource = pageData;
    }
    
    // 分页事件处理
    private void Pagination_PageUpdated(object sender, EventArgs e)
    {
        LoadPageData(pagination.PageIndex);
        // 滚动到DataGrid顶部
        dataGrid.ScrollIntoView(dataGrid.Items[0]);
    }
}

// 示例数据模型
public class SampleData
{
    public int Id { get; set; }
    public string Name { get; set; }
    public DateTime CreateTime { get; set; }
}

四、高级应用场景

4.1 结合DataGrid实现完整分页

以下是一个包含筛选条件的完整分页实现，支持动态改变每页数据量：

<StackPanel Margin="20">
    <StackPanel Orientation="Horizontal" Margin="0,0,0,10">
        <TextBox x:Name="txtSearch" Width="200" Margin="0,0,10,0" 
                 hc:WatermarkHelper.Watermark="搜索..." />
        <Button Content="查询" Click="BtnSearch_Click" />
        <ComboBox x:Name="cboPageSize" Margin="10,0,0,0" Width="100"
                  SelectionChanged="CboPageSize_SelectionChanged">
            <ComboBoxItem>10</ComboBoxItem>
            <ComboBoxItem IsSelected="True">20</ComboBoxItem>
            <ComboBoxItem>50</ComboBoxItem>
            <ComboBoxItem>100</ComboBoxItem>
        </ComboBox>
    </StackPanel>
    
    <DataGrid x:Name="dataGrid" Height="300" />
    
    <hc:Pagination 
        x:Name="pagination" 
        PageIndex="1" 
        IsJumpEnabled="True"
        PageUpdated="Pagination_PageUpdated"
        HorizontalAlignment="Center"
        Margin="0,20,0,0"/>
</StackPanel>

后台代码中添加筛选和页码大小变更逻辑：

// 搜索按钮点击事件
private void BtnSearch_Click(object sender, RoutedEventArgs e)
{
    string keyword = txtSearch.Text.Trim().ToLower();
    var filteredData = allData.Where(d => 
        d.Name.ToLower().Contains(keyword) || 
        d.Id.ToString().Contains(keyword)
    ).ToList();
    
    // 更新总页数
    pagination.MaxPageCount = (int)Math.Ceiling(filteredData.Count / (double)pageSize);
    // 重置到第一页
    pagination.PageIndex = 1;
    LoadFilteredPageData(1, filteredData);
}

// 每页数量变更事件
private void CboPageSize_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (cboPageSize.SelectedItem is ComboBoxItem item && 
        int.TryParse(item.Content.ToString(), out int newSize))
    {
        pageSize = newSize;
        pagination.DataCountPerPage = pageSize;
        // 重新计算总页数
        pagination.MaxPageCount = (int)Math.Ceiling(allData.Count / (double)pageSize);
        // 重新加载当前页
        LoadPageData(pagination.PageIndex);
    }
}

4.2 自定义分页控件样式

HandyControl允许通过ControlTemplate自定义分页控件样式。以下是一个简约风格的自定义模板示例：

<Style TargetType="hc:Pagination">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="hc:Pagination">
                <StackPanel Orientation="Horizontal" Spacing="5" VerticalAlignment="Center">
                    <!-- 首页按钮 -->
                    <Button x:Name="PART_ButtonFirst" Content="首页" 
                            Visibility="{TemplateBinding PageIndex, Converter={StaticResource IntToVisibilityConverter}, ConverterParameter=1}"/>
                    
                    <!-- 上一页按钮 -->
                    <Button x:Name="PART_ButtonLeft" Content="上一页"/>
                    
                    <!-- 页码容器 -->
                    <WrapPanel x:Name="PART_PanelMain" Orientation="Horizontal" Spacing="3"/>
                    
                    <!-- 下一页按钮 -->
                    <Button x:Name="PART_ButtonRight" Content="下一页"/>
                    
                    <!-- 末页按钮 -->
                    <Button x:Name="PART_ButtonLast" Content="末页"/>
                    
                    <!-- 跳转区域 -->
                    <StackPanel Orientation="Horizontal" Spacing="5" Margin="10,0,0,0"
                                Visibility="{TemplateBinding IsJumpEnabled, Converter={StaticResource BooleanToVisibilityConverter}}">
                        <TextBlock Text="跳至" VerticalAlignment="Center"/>
                        <hc:NumericUpDown x:Name="PART_NumericUpDown" Width="50" 
                                          Minimum="1" Maximum="{TemplateBinding MaxPageCount}"/>
                        <TextBlock Text="页" VerticalAlignment="Center"/>
                    </StackPanel>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

4.3 MVVM模式下的分页实现

在MVVM模式中，建议通过命令绑定处理分页逻辑。以下是使用MVVM Light框架的实现示例：

<hc:Pagination 
    MaxPageCount="{Binding TotalPages}"
    PageIndex="{Binding CurrentPage, Mode=TwoWay}"
    IsJumpEnabled="True"
    PageUpdatedCommand="{Binding PageChangedCommand}"/>

ViewModel中的实现：

public class DataViewModel : ViewModelBase
{
    private int _currentPage = 1;
    private int _totalPages;
    private ObservableCollection<SampleData> _pageData;
    
    public int CurrentPage
    {
        get => _currentPage;
        set => Set(ref _currentPage, value);
    }
    
    public int TotalPages
    {
        get => _totalPages;
        set => Set(ref _totalPages, value);
    }
    
    public ObservableCollection<SampleData> PageData
    {
        get => _pageData;
        set => Set(ref _pageData, value);
    }
    
    public RelayCommand PageChangedCommand { get; private set; }
    
    public DataViewModel()
    {
        PageChangedCommand = new RelayCommand(LoadCurrentPageData);
        // 初始化数据
        LoadAllData();
    }
    
    private void LoadCurrentPageData()
    {
        // 实现分页数据加载逻辑
    }
}

五、性能优化与最佳实践

5.1 数据加载优化策略

优化方法	适用场景	性能提升
服务端分页	大数据量(>1000条)	⭐⭐⭐⭐⭐
客户端缓存	数据不频繁变化	⭐⭐⭐⭐
异步加载	所有场景	⭐⭐⭐
虚拟滚动	数据量极大且允许滚动加载	⭐⭐⭐⭐

实现异步分页加载的代码示例：

private async void LoadPageDataAsync(int pageIndex)
{
    // 显示加载指示器
    loadingIndicator.Visibility = Visibility.Visible;
    
    try
    {
        // 模拟网络延迟
        await Task.Delay(300);
        
        var pageData = await Task.Run(() => 
            allData.Skip((pageIndex - 1) * pageSize)
                   .Take(pageSize)
                   .ToList()
        );
        
        dataGrid.ItemsSource = pageData;
    }
    finally
    {
        // 隐藏加载指示器
        loadingIndicator.Visibility = Visibility.Collapsed;
    }
}

5.2 常见问题解决方案

Q1: 页码控件不显示怎么办？

A1: 检查PageIndex属性是否为1，HandyControl的Pagination控件在页码为1时默认隐藏。可通过以下方式强制显示：

<hc:Pagination PageIndex="1" Visibility="Visible"/>

Q2: 如何处理动态数据量变化？

A2: 当数据源发生变化时，需重新计算总页数并更新MaxPageCount属性：

// 数据变化后重新计算总页数
pagination.MaxPageCount = (int)Math.Ceiling(newDataCount / (double)pageSize);
// 如果当前页码超过新的总页数，重置为最后一页
if (pagination.PageIndex > pagination.MaxPageCount && pagination.MaxPageCount > 0)
{
    pagination.PageIndex = pagination.MaxPageCount;
}

Q3: 如何实现国际化多语言支持？

A3: 通过资源字典实现多语言支持：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
    <system:String x:Key="Pagination.First">First</system:String>
    <system:String x:Key="Pagination.Previous">Previous</system:String>
    <system:String x:Key="Pagination.Next">Next</system:String>
    <system:String x:Key="Pagination.Last">Last</system:String>
</ResourceDictionary>

六、总结与进阶学习

6.1 核心知识点回顾

1. 控件属性：掌握MaxPageCount、PageIndex和IsJumpEnabled三个核心属性的使用
2. 事件处理：通过PageUpdated事件实现页码变更时的数据加载
3. 分页逻辑：理解Skip()和Take()方法实现分页查询的原理
4. 样式定制：通过ControlTemplate自定义分页控件外观

6.2 进阶学习路径

1. 服务端分页：结合ASP.NET Web API实现真正的服务端分页
2. 无限滚动：学习HandyControl的ScrollViewer与Pagination结合实现无限滚动
3. 数据缓存：实现分页数据的本地缓存机制提升性能
4. 单元测试：为分页逻辑编写单元测试确保稳定性

6.3 实用工具推荐

• HandyControl Demo：官方示例程序，包含分页控件的完整演示
• LinqPad：测试分页查询的LINQ语句性能
• Snoop：WPF界面调试工具，帮助分析控件样式问题

希望本文能帮助你彻底解决WPF应用中的分页难题。如果觉得本文有用，请点赞收藏并关注作者，下期将带来"HandyControl高级数据绑定技巧"。

【免费下载链接】HandyControl Contains some simple and commonly used WPF controls 项目地址: https://gitcode.com/gh_mirrors/ha/HandyControl