在最近的一个项目中,涉及到一个自定义翻页控制的控件,下面就这一个控件做详细的说明,这个自定义控件的主要作用是对数据源进行翻页控制,比如说:“上一页、下一页、首页、末页”等相关操作,由于在一个项目中有多个界面要用到这一部分,所以我们将其封装成一个自定义控件,从而使软件整体结构更加清楚明了,首先我们来将控件的界面展示出来。
整个控件可以分成三个部分,最左边是一个Combobox控件,中间是常见的上一页、下一页、向前、向后操作,最右边是显示当前记录。下面我们重点来介绍中间部分的封装,在这里我们将每一个按钮封装成一个ImageButton控件,这里我们贴出相应的前台、后台代码,从而从整体上进行分析。
<Button x:Class="CustomControlLibrary.ImageButton" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" x:Name="loc" d:DesignHeight="44" d:DesignWidth="75"> <Button.Resources> <ResourceDictionary Source="Themes/Generic.xaml" /> </Button.Resources> <Image Name="innerImage" Source="{Binding ImageSource,ElementName=loc}" Stretch="None" /> </Button>
这里前台的代码比较简单,我们将Button的样式写在了一个资源字典中,同时在Button上面放置一个Image控件,从而组成我们的ImageButton控件,在后台的代码中我们主要定义了两个依赖项属性,ImageSource和GrayImageSource,ImageSource是当按钮正常使用的时候,其显示的背景,GrayImageSource是当按钮的IsEnable=false的时候,其显示的背景,这里先贴出其后台代码。
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace CustomControlLibrary { /// <summary> /// ImageButton.xaml 的交互逻辑 /// </summary> public partial class ImageButton : Button { public ImageButton() { InitializeComponent(); this.Style = this.FindResource("ImageButtonStyle") as Style; this.IsEnabledChanged += new DependencyPropertyChangedEventHandler(ImageButton_IsEnabledChanged); } void ImageButton_IsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e) { if (this.IsEnabled && ImageSource != null) { innerImage.Source = ImageSource; } else if (!this.IsEnabled && GrayImageSource != null) { innerImage.Source = GrayImageSource; } } public ImageSource ImageSource { get { return (ImageSource)GetValue(ImageSourceProperty); } set { SetValue(ImageSourceProperty, value); } } // Using a DependencyProperty as the backing store for ImageSource. This enables animation, styling, binding, etc... public static readonly DependencyProperty ImageSourceProperty = DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(ImageButton), new UIPropertyMetadata(null)); public ImageSource GrayImageSource { get { return (ImageSource)GetValue(GrayImageSourceProperty); } set { SetValue(GrayImageSourceProperty, value); } } // Using a DependencyProperty as the backing store for GrayImageSource. This enables animation, styling, binding, etc... public static readonly DependencyProperty GrayImageSourceProperty = DependencyProperty.Register("GrayImageSource", typeof(ImageSource), typeof(ImageButton), new UIPropertyMetadata(null)); public override void OnApplyTemplate() { base.OnApplyTemplate(); if (this.IsEnabled && ImageSource != null) { innerImage.Source = ImageSource; } else if (!this.IsEnabled && GrayImageSource != null) { innerImage.Source = GrayImageSource; } } } }
这里首先分析一下WPF的依赖项属性和普通的.net属性有什么不同,依赖属性是WPF平台中一个新增的概念,出现的目的是用来实现WPF中的样式、自动绑定及实现动画等特性。依赖属性的出现是WPF这种特殊的呈现原理派生出来的,与.NET普通属性不同的是,依赖属性的值是依靠多个提供程序来判断的,并且其具有内建的传递变更通知的能力。
依赖属性的定义与普通的.NET属性的定义有区别,普通的.NET属性定义只需要定义其set和get区块的赋值与设置即可,而依赖属性需要向.NET的属性系统进行注册。这里我们定义了ImageSource和GrayImageSource两个依赖项属性。另外这里还重写了基类的OnApplyTemplate方法,这个方法是FrameworkElement中定义的方法,在派生类中重写后,每当应用程序代码或内部进程调用 ApplyTemplate,都将调用此方法。FrameworkElement 派生类可以使用 OnApplyTemplate 类处理程序获知显式调用或由布局系统调用此方法的情况。OnApplyTemplate 在完全生成模板并将其附加到逻辑树之后调用。
然后就是具体的DataPager控件的实现了,这里也分别贴出相应的前台和后台的代码。
<UserControl x:Class="CustomControlLibrary.DataPager" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:loc="clr-namespace:CustomControlLibrary" x:Name="dp" Margin="3" mc:Ignorable="d" d:DesignHeight="46" d:DesignWidth="590" Loaded="DataPager_Loaded"> <Grid> <!--<Grid.Resources> <Style TargetType="{x:Type Image}"> <Setter Property="Margin" Value="3,0,3,0" /> <Setter Property="Cursor" Value="Hand" /> </Style> </Grid.Resources>--> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <ComboBox Grid.Column="0" VerticalAlignment="Center" Name="cboPageSize" MinWidth="40" Margin="5,0,0,0" ItemsSource="{Binding Path=PageSizeItems,ElementName=dp}" SelectedItem="{Binding PageSize,Mode=TwoWay,ElementName=dp}" SelectionChanged="cbpPageSize_SelectionChanged" Visibility="Visible"/> <StackPanel Grid.Column="1" VerticalAlignment="Center" Orientation="Horizontal" Margin="5,0,0,0"> <loc:ImageButton Click="btnFirst_Click" x:Name="btnFirst" ImageSource="/CustomControlLibrary;component/Images/pagination_first.gif" GrayImageSource="/CustomControlLibrary;component/Images/pagination_first_gray.gif" /> <loc:ImageButton Click="btnPrev_Click" x:Name="btnPrev" ImageSource="/CustomControlLibrary;component/Images/pagination_prev.gif" GrayImageSource="/CustomControlLibrary;component/Images/pagination_prev_gray.gif" /> <TextBlock Text="第页 " VerticalAlignment="Center"/> <TextBox Width="30" Text="{Binding Path=PageIndex,ElementName=dp}" Name="tbPageIndex" PreviewKeyDown="tbPageIndex_PreviewKeyDown" LostFocus="tbPageIndex_LostFocus" /> <TextBlock Text=" 共 " VerticalAlignment="Center"/> <TextBlock Text="{Binding Path=PageCount, ElementName=dp}" VerticalAlignment="Center"/> <loc:ImageButton Click="btnNext_Click" x:Name="btnNext" ImageSource="/CustomControlLibrary;component/Images/pagination_next.gif" GrayImageSource="/CustomControlLibrary;component/Images/pagination_next_gray.gif" /> <loc:ImageButton Click="btnLast_Click" x:Name="btnLast" ImageSource="/CustomControlLibrary;component/Images/pagination_last.gif" GrayImageSource="/CustomControlLibrary;component/Images/pagination_last_gray.gif" /> <!--<loc:ImageButton Click="btnRefresh_Click" ImageSource="/CustomControlLibrary;component/Images/pagination_load.png" Visibility="Hidden"/>--> </StackPanel> <TextBlock Grid.Column="2" VerticalAlignment="Center" Margin="5,0,5,0" >显示记录 <TextBlock Text="{Binding Path=Start,ElementName=dp}" /> 到 <TextBlock Text="{Binding Path=End,ElementName=dp}"/> 共 <TextBlock Text="{Binding Path=Total,ElementName=dp}"/> 条记录 </TextBlock> </Grid> </UserControl>
这里重点介绍后台的逻辑代码。
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; using System.ComponentModel; namespace CustomControlLibrary { /// <summary> /// DataPager.xaml 的交互逻辑 /// </summary> public partial class DataPager : UserControl, INotifyPropertyChanged { public DataPager() { InitializeComponent(); } #region 依赖属性和事件 public string PageSizeList { get { return (string)GetValue(PageSizeListProperty); } set { SetValue(PageSizeListProperty, value); } } // Using a DependencyProperty as the backing store for PageSizeList. This enables animation, styling, binding, etc... public static readonly DependencyProperty PageSizeListProperty = DependencyProperty.Register("PageSizeList", typeof(string), typeof(DataPager), new UIPropertyMetadata("5,10,20", (s, e) => { DataPager dp = s as DataPager; if (dp.PageSizeItems == null) dp.PageSizeItems = new List<int>(); else dp.PageSizeItems.Clear(); dp.RaisePropertyChanged("PageSizeItems"); })); public int PageSize { get { return (int)GetValue(PageSizeProperty); } set { SetValue(PageSizeProperty, value); } } // Using a DependencyProperty as the backing store for PageSize. This enables animation, styling, binding, etc... public static readonly DependencyProperty PageSizeProperty = DependencyProperty.Register("PageSize", typeof(int), typeof(DataPager), new UIPropertyMetadata(16)); public int Total { get { return (int)GetValue(TotalProperty); } set { SetValue(TotalProperty, value); } } // Using a DependencyProperty as the backing store for Total. This enables animation, styling, binding, etc... public static readonly DependencyProperty TotalProperty = DependencyProperty.Register("Total", typeof(int), typeof(DataPager), new UIPropertyMetadata(0)); public int PageIndex { get { return (int)GetValue(PageIndexProperty); } set { SetValue(PageIndexProperty, value); } } // Using a DependencyProperty as the backing store for PageIndex. This enables animation, styling, binding, etc... public static readonly DependencyProperty PageIndexProperty = DependencyProperty.Register("PageIndex", typeof(int), typeof(DataPager), new UIPropertyMetadata(1)); public IEnumerable<object> ItemsSource { get { return (IEnumerable<object>)GetValue(ItemsSourceProperty); } set { SetValue(ItemsSourceProperty, value); } } /// <summary> /// ItemsSource数据源 /// </summary> public static readonly DependencyProperty ItemsSourceProperty = DependencyProperty.Register("ItemsSource", typeof(IEnumerable<object>), typeof(DataPager), new UIPropertyMetadata(null)); public static readonly RoutedEvent PageChangedEvent = EventManager.RegisterRoutedEvent("PageChanged", RoutingStrategy.Bubble, typeof(PageChangedEventHandler), typeof(DataPager)); /// <summary> /// 分页更改事件 /// </summary> public event PageChangedEventHandler PageChanged { add { AddHandler(PageChangedEvent, value); } remove { RemoveHandler(PageChangedEvent, value); } } #endregion #region 通知属性 private List<int> _pageSizeItems; /// <summary> /// 显示每页记录数集合 /// </summary> public List<int> PageSizeItems { get { if (_pageSizeItems == null) { _pageSizeItems = new List<int>(); } if (PageSizeList != null) { List<string> strs = PageSizeList.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries).ToList(); _pageSizeItems.Clear(); strs.ForEach(c => { _pageSizeItems.Add(Convert.ToInt32(c)); }); } return _pageSizeItems; } set { if (_pageSizeItems != value) { _pageSizeItems = value; RaisePropertyChanged("PageSizeItems"); } } } private int _pageCount; /// <summary> /// 总页数 /// </summary> public int PageCount { get { return _pageCount; } set { if (_pageCount != value) { _pageCount = value; RaisePropertyChanged("PageCount"); } } } private int _start; /// <summary> /// 开始记录数 /// </summary> public int Start { get { return _start; } set { if (_start != value) { _start = value; RaisePropertyChanged("Start"); } } } private int _end; /// <summary> /// 结束记录数 /// </summary> public int End { get { return _end; } set { if (_end != value) { _end = value; RaisePropertyChanged("End"); } } } public event PropertyChangedEventHandler PropertyChanged; public void RaisePropertyChanged(string propertyName) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } #endregion #region 字段、属性、委托 public delegate void PageChangedEventHandler(object sender, PageChangedEventArgs args); private PageChangedEventArgs pageChangedEventArgs; #endregion #region 引发分页更改事件 /// <summary> /// 引发分页更改事件 /// </summary> private void RaisePageChanged() { if (pageChangedEventArgs == null) { pageChangedEventArgs = new PageChangedEventArgs(PageChangedEvent, PageSize, PageIndex); } else { pageChangedEventArgs.PageSize = this.PageSize; pageChangedEventArgs.PageIndex = this.PageIndex; } RaiseEvent(pageChangedEventArgs); //calc start、end if (ItemsSource != null) { int curCount = ItemsSource.Count(); Start = (PageIndex - 1) * PageSize + 1; End = Start + curCount - 1; if (Total % PageSize != 0) { PageCount = Total / PageSize + 1; } else { PageCount = Total / PageSize; } } else { Start = End = PageCount = Total = 0; } //调整图片的显示 btnFirst.IsEnabled = btnPrev.IsEnabled = (PageIndex != 1); btnNext.IsEnabled = btnLast.IsEnabled = (PageIndex != PageCount); } #endregion #region 分页操作事件 void DataPager_Loaded(object sender, RoutedEventArgs e) { RaisePageChanged(); } private void cbpPageSize_SelectionChanged(object sender, SelectionChangedEventArgs e) { if (this.IsLoaded) { PageSize = (int)cboPageSize.SelectedItem; RaisePageChanged(); } } private void btnFirst_Click(object sender, RoutedEventArgs e) { PageIndex = 1; RaisePageChanged(); } private void btnPrev_Click(object sender, RoutedEventArgs e) { if (PageIndex > 1) { --PageIndex; } RaisePageChanged(); } private void btnNext_Click(object sender, RoutedEventArgs e) { if (Total % PageSize != 0) { PageCount = Total / PageSize + 1; } else { PageCount = Total / PageSize; } if (PageIndex < PageCount) { ++PageIndex; } RaisePageChanged(); } private void btnLast_Click(object sender, RoutedEventArgs e) { if (Total % PageSize != 0) { PageCount = Total / PageSize + 1; } else { PageCount = Total / PageSize; } PageIndex = PageCount; RaisePageChanged(); } private void btnRefresh_Click(object sender, RoutedEventArgs e) { RaisePageChanged(); } private void tbPageIndex_PreviewKeyDown(object sender, KeyEventArgs e) { if (e.Key == Key.Enter) { tbPageIndex_LostFocus(sender, null); } } private void tbPageIndex_LostFocus(object sender, RoutedEventArgs e) { int pIndex = 0; try { pIndex = Convert.ToInt32(tbPageIndex.Text); } catch { pIndex = 1; } if (pIndex < 1) PageIndex = 1; else if (pIndex > PageCount) PageIndex = PageCount; else PageIndex = pIndex; RaisePageChanged(); } #endregion } /// <summary> /// 分页更改参数 /// </summary> public class PageChangedEventArgs : RoutedEventArgs { public int PageSize { get; set; } public int PageIndex { get; set; } public PageChangedEventArgs(RoutedEvent routeEvent, int pageSize, int pageIndex) : base(routeEvent) { this.PageSize = pageSize; this.PageIndex = pageIndex; } } }
这里定义了一些该控件要使用的一些属性,PageSize属性用于定义每一页中的项的数量,Total属性定义总共有多少项,PageIndex定义当前的页码,ItemsSource用于定义数据源的集合,类型是IEnumerable<object>类型,这个里面定义的最重要的函数是RaisePageChanged,该函数将引发分页更改事件,在这个函数中我们将当前定义的路由事件PageChangedEvent,以及每一页项目的大小,以及当前页码传递到PageChangedEventArgs的一个对象中,然后调用RaiseEvent来引发特定的路由事件,这里需要注意的是必须将当前定义的路由事件传递到基类RoutedEventArgs中,否则不能触发该路由事件。