基于WPF開發(fā)一個分頁控件
概要
本文將詳細介紹如何使用WPF(Windows Presentation Foundation)開發(fā)一個分頁控件,并深入解析其實現(xiàn)原理。我們將通過使用XAML和C#代碼相結(jié)合的方式構(gòu)建分頁控件,并確保它具有高度的可定制性,以便在不同的應(yīng)用場景中滿足各種需求。
一.簡介
分頁控件是在許多應(yīng)用程序中常見的一種界面元素,特別是在數(shù)據(jù)展示的場景中。它允許用戶瀏覽大量數(shù)據(jù),并根據(jù)需要切換到不同的數(shù)據(jù)頁。
二.需求分析
我們首先來分析一下一個分頁控件的基本構(gòu)成。

2.1 總條目數(shù)(TotalItems)
表示總數(shù)據(jù)量。
2.2 每頁條目數(shù)(PageSize)
表示每頁顯示的條目數(shù)。
2.3 總頁數(shù)(PageCount)
表示根據(jù)總條目數(shù)與每頁條目數(shù)計算出來的頁數(shù)。
2.4 分頁/頁碼按鈕數(shù)量(PageNumberCount)
分頁控件中可以點擊的頁碼按鈕。
2.5 當前頁(CurrentPage)
當前顯示的頁,通常高亮顯示。
三.控件命令和事件
3.1 頁面跳轉(zhuǎn)命令(GoToPageCommand)
該命令用于在XAML代碼中觸發(fā)頁面跳轉(zhuǎn)操作。
3.2當前頁變更事件
當CurrentPage參數(shù)改變后觸發(fā)該事件,通常在該事件中執(zhí)行數(shù)據(jù)查詢操作。
四.代碼實現(xiàn)
通過以上原理分析,我們提取出了分頁控件需要包含的基本要素,下面我們通過這些信息來組裝成一個分頁控件。
<Style TargetType="{x:Type local:Pager}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:Pager}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<StackPanel Orientation="Horizontal" ClipToBounds="True">
<Button Command="{x:Static local:Pager.GoToPageCommand}" CommandParameter="1" Margin="0,0,5,0" Content="首頁"></Button>
<Button Command="{x:Static local:Pager.GoToPageCommand}" CommandParameter="-" Margin="5,0" Content="上一頁"></Button>
<ItemsControl ItemsSource="{TemplateBinding PageButtons}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ToggleButton MinWidth="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}"
Content="{Binding Page}"
IsChecked="{Binding IsCurrentPage}"
Command="{x:Static local:Pager.GoToPageCommand}"
CommandParameter="{Binding Page}"
Margin="5,0"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Button Command="{x:Static local:Pager.GoToPageCommand}" CommandParameter="+" Margin="5,0" Content="下一頁"></Button>
<Button Command="{x:Static local:Pager.GoToPageCommand}" CommandParameter="尾頁" Margin="5,0,0,0" Content="{DynamicResource LastPage}"></Button>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
五.多樣化需求
在不同的業(yè)務(wù)場景下需要的分頁控件可能不盡相同,那么如何來滿足多樣化需求呢,答案就是自定義控件模板。下面演示幾種常見的分頁控件如何實現(xiàn)。
只需要“上一頁”、“下一頁”的情況
<Style TargetType="{x:Type Controls:Pager}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Controls:Pager}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<StackPanel Orientation="Horizontal" ClipToBounds="True">
<Button Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="-" Margin="5,0" Content="{DynamicResource PreviousPage}"></Button>
<Button Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="+" Margin="5,0" Content="{DynamicResource NextPage}"></Button>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
只需要“首頁”、“上一頁”、“下一頁”、“尾頁”的情況。
<Style TargetType="{x:Type Controls:Pager}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Controls:Pager}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<StackPanel Orientation="Horizontal" ClipToBounds="True">
<Button Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="1" Margin="0,0,5,0" Content="{DynamicResource FirstPage}"></Button>
<Button Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="-" Margin="5,0" Content="{DynamicResource PreviousPage}"></Button>
<Button Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="+" Margin="5,0" Content="{DynamicResource NextPage}"></Button>
<Button Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="{TemplateBinding PageCount}" Margin="5,0,0,0" Content="{DynamicResource LastPage}"></Button>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
數(shù)字顯示“首頁”、“尾頁”的情況。
<Style TargetType="{x:Type Controls:Pager}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Controls:Pager}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<StackPanel Orientation="Horizontal" ClipToBounds="True">
<Button Command="{x:Static Controls:Pager.GoToPageCommand}"
CommandParameter="1"
Content="1"
MinWidth="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}"
Margin="0,0,5,0">
<Button.Visibility>
<MultiBinding Converter="{StaticResource PageNumberToVisibilityConverter}" ConverterParameter="First">
<Binding RelativeSource="{RelativeSource AncestorType=Controls:Pager}" Path="CurrentPage"/>
<Binding RelativeSource="{RelativeSource AncestorType=Controls:Pager}" Path="PageNumberCount"/>
<Binding RelativeSource="{RelativeSource AncestorType=Controls:Pager}" Path="PageCount"/>
</MultiBinding>
</Button.Visibility>
</Button>
<Button IsEnabled="False" Margin="5,0" MinWidth="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}" Content="...">
<Button.Visibility>
<MultiBinding Converter="{StaticResource PageNumberToVisibilityConverter}" ConverterParameter="First">
<Binding RelativeSource="{RelativeSource AncestorType=Controls:Pager}" Path="CurrentPage"/>
<Binding RelativeSource="{RelativeSource AncestorType=Controls:Pager}" Path="PageNumberCount"/>
<Binding RelativeSource="{RelativeSource AncestorType=Controls:Pager}" Path="PageCount"/>
</MultiBinding>
</Button.Visibility>
</Button>
<Button Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="-" Margin="5,0" Content="{DynamicResource PreviousPage}"></Button>
<ItemsControl ItemsSource="{TemplateBinding PageButtons}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ToggleButton MinWidth="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}"
Content="{Binding Page}"
Margin="5,0"
IsChecked="{Binding IsCurrentPage}"
Command="{x:Static Controls:Pager.GoToPageCommand}"
CommandParameter="{Binding Page}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Button Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="+" Margin="5,0" Content="{DynamicResource NextPage}"></Button>
<Button IsEnabled="False" Margin="5,0" MinWidth="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}" Content="...">
<Button.Visibility>
<MultiBinding Converter="{StaticResource PageNumberToVisibilityConverter}">
<Binding RelativeSource="{RelativeSource AncestorType=Controls:Pager}" Path="CurrentPage"/>
<Binding RelativeSource="{RelativeSource AncestorType=Controls:Pager}" Path="PageNumberCount"/>
<Binding RelativeSource="{RelativeSource AncestorType=Controls:Pager}" Path="PageCount"/>
</MultiBinding>
</Button.Visibility>
</Button>
<Button Command="{x:Static Controls:Pager.GoToPageCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=Controls:Pager},Path=PageCount}"
Content="{Binding RelativeSource={RelativeSource AncestorType=Controls:Pager},Path=PageCount}"
MinWidth="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}"
Margin="5,0,0,0">
<Button.Visibility>
<MultiBinding Converter="{StaticResource PageNumberToVisibilityConverter}">
<Binding RelativeSource="{RelativeSource AncestorType=Controls:Pager}" Path="CurrentPage"/>
<Binding RelativeSource="{RelativeSource AncestorType=Controls:Pager}" Path="PageNumberCount"/>
<Binding RelativeSource="{RelativeSource AncestorType=Controls:Pager}" Path="PageCount"/>
</MultiBinding>
</Button.Visibility>
</Button>
<StackPanel Orientation="Horizontal" Margin="5,0,0,0">
<TextBlock Text="轉(zhuǎn)到" VerticalAlignment="Center"/>
<TextBox x:Name="tbox_Page" Width="40" Margin="5,0" Padding="5" HorizontalContentAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Text="頁" VerticalAlignment="Center"/>
<Button Margin="5,0,0,0" Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="{Binding ElementName=tbox_Page,Path=Text}">確定</Button>
</StackPanel>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
可以調(diào)整每頁顯示條目,可以顯示總頁數(shù),可以跳轉(zhuǎn)到指定頁的情況。
<Style TargetType="{x:Type Controls:Pager}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Controls:Pager}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<StackPanel Orientation="Horizontal" ClipToBounds="True">
<Button Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="1" Margin="0,0,5,0" MinWidth="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}" Content="{DynamicResource FirstPage}"></Button>
<Button Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="-" Margin="5,0" MinWidth="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}" Content="{DynamicResource PreviousPage}"></Button>
<ItemsControl ItemsSource="{TemplateBinding PageButtons}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ToggleButton MinWidth="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}"
Content="{Binding Page}"
Margin="5,0"
IsChecked="{Binding IsCurrentPage}"
Command="{x:Static Controls:Pager.GoToPageCommand}"
CommandParameter="{Binding Page}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Button Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="+" Margin="5,0" MinWidth="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}" Content="{DynamicResource NextPage}"></Button>
<Button Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="{TemplateBinding PageCount}" Margin="5,0,0,0" MinWidth="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}" Content="{DynamicResource LastPage}"></Button>
<StackPanel Orientation="Horizontal" Margin="5,0,0,0">
<TextBlock Margin="0,0,5,0" Text="每頁" VerticalAlignment="Center"/>
<ComboBox Margin="5,0" SelectedIndex="0" VerticalContentAlignment="Center" SelectedItem="{Binding RelativeSource={RelativeSource AncestorType=Controls:Pager},Path=PageSize,Mode=OneWayToSource}">
<sys:Int32>5</sys:Int32>
<sys:Int32>10</sys:Int32>
<sys:Int32>15</sys:Int32>
<sys:Int32>20</sys:Int32>
</ComboBox>
<TextBlock Text="條" VerticalAlignment="Center" Margin="5,0"/>
<TextBlock VerticalAlignment="Center" Margin="5,0">
<Run Text="共"/>
<Run Text="{Binding RelativeSource={RelativeSource AncestorType=Controls:Pager},Path=PageCount}"/>
<Run Text="頁"/>
</TextBlock>
<TextBlock Text="轉(zhuǎn)到" VerticalAlignment="Center"/>
<TextBox x:Name="tbox_Page" Width="40" Margin="5,0" Padding="5" HorizontalContentAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Text="頁" VerticalAlignment="Center"/>
<Button Margin="5,0,0,0" Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="{Binding ElementName=tbox_Page,Path=Text}">確定</Button>
</StackPanel>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
除了修改模板實現(xiàn)不同的形態(tài)的分頁控件以外,還可以用圖標替換掉“首頁”、“上一頁”、“下一頁”、”尾頁”等文字。

六.個性化控件外觀
項目中的界面外觀可能多種多樣,有自己寫的控件樣式,也有使用第三方UI庫的樣式,如何跟它們搭配使用呢。
自定義控件樣式
<Style TargetType="Button">
<Setter Property="Padding" Value="5"/>
<Setter Property="Background" Value="Red"/>
</Style>
<Style TargetType="ToggleButton">
<Setter Property="Padding" Value="5"/>
<Setter Property="Background" Value="Red"/>
</Style>
使用第三方UI庫
1.HandyControl
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/SkinDefault.xaml" />
<ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Theme.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
2.MaterialDesign
以上就是基于WPF開發(fā)一個分頁控件的詳細內(nèi)容,更多關(guān)于WPF分頁控件的資料請關(guān)注腳本之家其它相關(guān)文章!

以上就是基于WPF開發(fā)一個分頁控件的詳細內(nèi)容,更多關(guān)于WPF分頁控件的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
C# SqlSugar批量執(zhí)行SQL語句及批量更新實體對象的操作方法
SqlSugar 是一款 老牌 .NET開源ORM框架,由果糖大數(shù)據(jù)科技團隊維護和更新 ,開箱即用最易上手的ORM,這篇文章主要介紹了C# SqlSugar批量執(zhí)行SQL語句以及批量更新實體對象,需要的朋友可以參考下2024-07-07
利用C#/VB.NET實現(xiàn)將PDF轉(zhuǎn)為Word
眾所周知,PDF 文檔支持特長文件,集成度和安全可靠性都較高,可有效防止他人對 PDF 內(nèi)容進行更改,所以在工作中深受大家喜愛。本文將分為兩部分介紹如何以編程的方式將 PDF 轉(zhuǎn)換為 Word,需要的可以參考一下2022-12-12

