基于WPF自定義分頁控件的示例代碼

更新時間：2025年07月09日 08:26:03 作者：孤獨成派

在桌面應用程序開發(fā)中,特別是使用WPF框架時,數據展示和用戶交互的優(yōu)化至關重要,本文將介紹兩種不同的分頁控件的實現方式,有需要的可以了解下

前言

在桌面應用程序開發(fā)中，特別是使用WPF框架時，數據展示和用戶交互的優(yōu)化至關重要。當處理大量數據時，如何有效地進行分頁顯示成為了一個關鍵問題。

本文將介紹兩種不同的分頁控件——通用分頁控件 Pager 和自動分頁控件 ListPager 的實現方式，并提供相應的XAML和C#代碼示例。

分頁效果

通用分頁控件 Pager

XAML 示例

<DockPanel Margin="10">
    <pp:Pager x:Name="pager" DockPanel.Dock="Top" Margin="0 10">
        <ComboBox x:Name="combo" Padding="6 0" SelectedIndex="0" BorderBrush="#D9D9D9" Foreground="#333" pp:BorderElement.CornerRadius="4" Margin="6 0"
        DisplayMemberPath="Value" SelectedValuePath="Key" SelectedValue="{Binding PageSize,ElementName=pager}" />
    </pp:Pager>
    <ListBox x:Name="list" />
</DockPanel>

該XAML定義了頁面頂部的一個 Pager 控件，其中包含一個下拉框用于選擇每頁顯示的條目數。下方是一個 ListBox 用于展示分頁后的數據。

后臺代碼

public PagerView()
{
    InitializeComponent();

    var dic = new Dictionary<Int32, String>
    {
        [10] = "10條/頁",
        [20] = "20條/頁",
        [30] = "30條/頁",
        [40] = "40條/頁",
    };

    combo.ItemsSource = dic;
    combo.SelectedValue = 10;

    pager.PageIndexChanged += OnPageIndexChanged;
    pager.TotalCount = datas.Count();
}

private void OnPageIndexChanged(Object sender, EventArgs e)
{
    list.ItemsSource = datas.Skip((pager.PageIndex - 1) * pager.PageSize).Take(pager.PageSize);
}

private IEnumerable<Int32> datas = Enumerable.Range(1, 999);

這段段代碼實現了分頁邏輯，監(jiān)聽 PageIndexChanged 事件來刷新列表數據。

樣式模板

<Style TargetType="{x:Type ctrls:Pager}">
    <!-- 省略樣式細節(jié) -->
</Style>

通過自定義樣式模板可以調整 Pager 控件的外觀，如頁碼按鈕、跳轉輸入框等。

自動分頁控件 ListPager

XAML 示例

<DockPanel Margin="10">
    <pp:ListPager x:Name="pager" DockPanel.Dock="Top" Margin="0 10">
        <ComboBox x:Name="combo" Padding="6 0" SelectedIndex="0" BorderBrush="#D9D9D9" Foreground="#333" pp:BorderElement.CornerRadius="4" Margin="6 0"
                  DisplayMemberPath="Value" SelectedValuePath="Key" SelectedValue="{Binding PageSize,ElementName=pager}" />
    </pp:ListPager>
    <ListBox x:Name="list" ItemsSource="{Binding DisplaySource,ElementName=pager}" />
</DockPanel>

ListPager 控件簡化了分頁流程，只需設置數據源即可自動完成分頁。

后臺代碼

public ListPagerView()
{
    InitializeComponent();

    var dic = new Dictionary<Int32, String>
    {
        [10] = "10條/頁",
        [20] = "20條/頁",
        [30] = "30條/頁",
        [40] = "40條/頁",
    };

    combo.ItemsSource = dic;
    combo.SelectedValue = 10;

    pager.Source = Enumerable.Range(1, 999);
}

相比 Pager，ListPager 更加便捷，它直接接收全部數據并根據頁面大小自動處理分頁邏輯。