自定义控件DataPager
在最近的一个项目中，涉及到一个自定义翻页控制的控件，下面就这一个控件做详细的说明，这个自定义控件的主要作用是对数据源进行翻页控制，比如说：“上一页、下一页、首页、末页”等相关操作，由于在一个项目中有多个界面要用到这一部分，所以我们将其封装成一个自定义控件，从而使软件整体结构更加清楚明了，首先我们来将控件的界面展示出来。
整个控件可以分成三个部分，最左边是一个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中，否则不能触发该路由事件。
