快捷導(dǎo)航

基于WPF自定義分頁(yè)控件的示例代碼

更新時(shí)間：2025年07月09日 08:26:03 作者：孤獨(dú)成派

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

前言

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

本文將介紹兩種不同的分頁(yè)控件——通用分頁(yè)控件 Pager 和自動(dòng)分頁(yè)控件 ListPager 的實(shí)現(xiàn)方式，并提供相應(yīng)的XAML和C#代碼示例。

分頁(yè)效果

通用分頁(yè)控件 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定義了頁(yè)面頂部的一個(gè) Pager 控件，其中包含一個(gè)下拉框用于選擇每頁(yè)顯示的條目數(shù)。下方是一個(gè) ListBox 用于展示分頁(yè)后的數(shù)據(jù)。

后臺(tái)代碼

public PagerView()
{
    InitializeComponent();

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

    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);

這段段代碼實(shí)現(xiàn)了分頁(yè)邏輯，監(jiān)聽(tīng) PageIndexChanged 事件來(lái)刷新列表數(shù)據(jù)。

樣式模板

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

通過(guò)自定義樣式模板可以調(diào)整 Pager 控件的外觀，如頁(yè)碼按鈕、跳轉(zhuǎn)輸入框等。

自動(dòng)分頁(yè)控件 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 控件簡(jiǎn)化了分頁(yè)流程，只需設(shè)置數(shù)據(jù)源即可自動(dòng)完成分頁(yè)。

后臺(tái)代碼

public ListPagerView()
{
    InitializeComponent();

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

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

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

相比 Pager，ListPager 更加便捷，它直接接收全部數(shù)據(jù)并根據(jù)頁(yè)面大小自動(dòng)處理分頁(yè)邏輯。

項(xiàng)目源碼

GitHub：github.com/LowPlayer/PP.Wpf

總結(jié)

不管是 Pager 還是 ListPager，它們都提供了靈活且強(qiáng)大的分頁(yè)解決方案，適用于不同的場(chǎng)景需求。Pager 提供了更多的手動(dòng)控制選項(xiàng)，適合需要定制化分頁(yè)邏輯的應(yīng)用；而 ListPager 則簡(jiǎn)化了開(kāi)發(fā)者的負(fù)擔(dān)，特別適合那些能夠一次性獲取所有數(shù)據(jù)的情況。

這些控件不僅提升了用戶(hù)體驗(yàn)，也提高了數(shù)據(jù)展示的效率。對(duì)于開(kāi)發(fā)來(lái)說(shuō)，理解并合理選用這兩種分頁(yè)控件，可以極大地提升應(yīng)用的性能和易用性。

到此這篇關(guān)于基于WPF自定義分頁(yè)控件的示例代碼的文章就介紹到這了,更多相關(guān)WPF分頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: