自定义WPF分页控件的全过程记录

一、分页控件功能说明#

实现如上图所示的分页控件,需要实现一下几个功能:

  1. 可以设置每页能够展示的最大列数(例如每页8列、每页16列等等)。
  2. 加载的数组总数量超过设置的每页列数后,需分页展示。
  3. 可以直接点击指定的列数或者上下页按钮进行页面跳转

二、自定义分页控件使用说明#

为了实现以上功能,主要进行以下工作:

1、添加一个自定义按钮PagerButton类,声明一个依赖属性IsActive,用于记录当前页面所在页数的按钮,此时该按钮边框高亮显示,具体代码如下:

 public class PagerButton : Button
    {
        public bool IsActive
        {
            get { return (bool)GetValue(IsActiveProperty); }
            set { SetValue(IsActiveProperty, value); }
        }

        public static readonly DependencyProperty IsActiveProperty =
            DependencyProperty.Register("IsActive", typeof(bool), typeof(PagerButton), new PropertyMetadata(false));

    }
  <Style x:Key="PagerButtonStyle" TargetType="controls:PagerButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controls:PagerButton">
                    <Border x:Name="b1" CornerRadius="2" Background="{StaticResource Themes}"
                                            BorderThickness="1" BorderBrush="{StaticResource Disabled}"
                                            Width="32" Height="32" Margin="4,0">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="b1" Property="BorderBrush" Value="{StaticResource Accent}"></Setter>
                        </Trigger>
                        <Trigger Property="IsActive" Value="True">
                            <Setter TargetName="b1" Property="BorderBrush" Value="{StaticResource Accent}"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
        </Style.Triggers>
    </Style>

2、添加自定义分页控件PagerBar类,用于展示分页按钮(使用PagerButton类)和实现分页跳转,需要定义当前页面、总页数、设置的每页最大列数三个依赖属性,具体如下:

   public int CurrentPageIndex
        {
            get { return (int)GetValue(CurrentPageIndexProperty); }
            set { SetValue(CurrentPageIndexProperty, value); }
        }
        public int PageSize
        {
            get { return (int)GetValue(PageSizeProperty); }
            set { SetValue(PageSizeProperty, value); }
        }
        public int PageCount
        {
            get { return (int)GetValue(PageCountProperty); }
            set { SetValue(PageCountProperty, value); }
        }

        public static readonly DependencyProperty CurrentPageIndexProperty = DependencyProperty.Register("CurrentPageIndex", typeof(int), typeof(PagerBar), new PropertyMetadata(-1, CurrentPageIndexPropertyChangedCallback));
        public static readonly DependencyProperty PageSizeProperty = DependencyProperty.Register("PageSize", typeof(int), typeof(PagerBar), new PropertyMetadata(10, PageSizePropertyChangedCallback));
        public static readonly DependencyProperty PageCountProperty = DependencyProperty.Register("PageCount", typeof(int), typeof(PagerBar), new PropertyMetadata(-1, PageCountPropertyChangedCallback));

3、添加一个工具类Pager,用于将数据按照要求分页,该工具类声明当前页数、总页数、设置的每页最大列数三个属性,具体如下:

  public int PageSize
        {
            get => _pageSize;
            set
            {
                if (value == _pageSize)
                    return;
                _pageSize = value;
                OnPropertyChanged();
                SetPageSize(_pageSize);
            }
        }
        public int PageCount
        {
            get => _pageCount;
            set
            {
                if (value == _pageCount)
                    return;
                _pageCount = value;

                // 最少页为1页
                if (_pageCount == 0)
                    _pageCount = 1;
                OnPropertyChanged();
            }
        }
        public int CurPageIndex
        {
            get => _curPageIndex;
            set
            {
                if (value == _curPageIndex)
                    return;
                _curPageIndex = value;
                OnPropertyChanged();
                GotoPageOf(_curPageIndex);
            }
        }

4、将Pager类和PageBar控件进行数据绑定。具体操作为:在绑定的ViewModel上声明一个Pager类,然后将该Pager类的属性和PagrBar进行一一对应绑定。具体代码如下:

  <controls:PagerBar Grid.Row="1" Margin="5"
                           HorizontalAlignment="Center"
                           PageSize="{Binding Path=Pager.PageSize, Mode=TwoWay}"
                           PageCount="{Binding Path=Pager.PageCount, Mode=TwoWay}"
                           CurrentPageIndex="{Binding Path=Pager.CurPageIndex, Mode=TwoWay}"></controls:PagerBar>

5、初始化Pager类时,在界面绑定的ViewModel里面重新声明一个数组,用于保存分页后的数组,将该数组绑定到待展示的条目控件(例如ListBox)上,具体如下:

 StudentCollection=new ObservableCollection<Student>();
            for (int i = 0; i < 10; i++)
            {
                StudentCollection.Add(new Student()
                {
                    Id = Index = i,
                    Source = 10 * (i + 1),
                });
            }

            AddCommand =new RelayCommand(ExecuteAddCommand);
            DeleteCommand=new RelayCommand(ExecuteDeleteCommand);
            SortCommand=new RelayCommand(ExecuteSortCommand);

            Pager=new Pager<Student>(8,StudentCollection);
            Pager.PagerUpdated += items =>
            {
                StudentCollectionPaging = new ObservableCollection<Student>(items);
            };
            Pager.CurPageIndex = 1;
  <ListBox x:Name="ListBoxStudent" Grid.Row="0"
                 ItemsSource="{Binding StudentCollectionPaging}"
                 ItemTemplate="{StaticResource StudentDateTemplate}"></ListBox>

三、总结说明#

​ 为了实现绑定的数组添加、删除时,PageBar分组控件也能立即更新控件,Pager工具类增加以下构造函数,首先保证数组为同一引用,其次使用ObservableCollection保证界面和ViewModel即时更新:

    public Pager(int pageSize, ObservableCollection<T> source)
        {
            _pageSize = pageSize;
            _itemsSource = source;
            _itemsSource.CollectionChanged += ItemsSourceOnCollectionChanged;
            CalculatePaging();
        }

        private void ItemsSourceOnCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
        {
            CalculatePaging();
            GotoPageOf(CurPageIndex);
        }

四、示例源码#

示例源码地址:分页控件源码

五、问题#

​ 在实际应用中,发现如下问题:当需要对绑定的整个数组进行排序时,由于Pager类初始化传入的数组必须和实际数为同一个引用且必须为ObservableCollection数组,那么使用LINQ排序完成后,必须要使用ToList进行转换,就必须重新初始化ObservableCollection,那么后续当该ObservableCollection数组变化时,也无法通知到Pager类的数组了。为了解决该问题,想到以下两个方法:

(1)自定义排序,针对ObservableCollection的每个数组对象进行排序。这样排序完成后ObservableCollection引用无变化。

(2)先用临时变量保存排序完成的数组,然后清空ObservableCollection,然后再迭代添加临时数组。如此,ObservableCollection对象前后也为统一引用。

  public ICommand SortCommand { get; set; }

        private void ExecuteSortCommand(object obj)
        {
            var list = StudentCollection.ToList().OrderByDescending(item=>item.Source).ToList();
            StudentCollection.Clear();
            foreach (var item in list)
            {
                StudentCollection.Add(item);
            }
        }

目前暂时采用了第二种方法,但该方法效率不高。后续有更好的解决方法可以留言讨论。

总结

到此这篇关于自定义WPF分页控件的文章就介绍到这了,更多相关自定义WPF分页控件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • WPF自定义TreeView控件样式实现QQ联系人列表效果

    一.前言 TreeView这个控件对于我来说是用得比较多的,以前做的小聊天软件(好友列表).音乐播放器(播放列表).类库展示器(树形类结构)等都用的是TreeView,普通的TreeView并不能满足我们的需求.因此我们需要滴对TreeView进行改造.下面的内容将介绍仿QQ联系人TreeView样式及TreeView数据绑定方法. 二.TreeView仿QQ联系人列表 准确的说不是仿QQ联系人列表,这个TreeView样式作为组织架构来使用更好.废话不多说,先看效果:  2.1.基本思路 像这

  • WPF的ListView控件自定义布局用法实例

    本文实例讲述了WPF的ListView控件自定义布局用法.分享给大家供大家参考,具体如下: 概要: 以源码的形式贴出,免得忘记后,再到网上查资料.在VS2008+SP1环境下调试通过 引用的GrayscaleEffect模块,可根据参考资料<Grayscale Effect...>中的位置下载. 正文: 如何布局是在App.xaml中定义源码如下 <Application x:Class="CWebsSynAssistant.App" xmlns="http

  • WPF自定义控件和样式之自定义按钮(Button)

    一.前言 程序界面上的按钮多种多样,常用的就这几种:普通按钮.图标按钮.文字按钮.图片文字混合按钮.本文章记录了不同样式类型的按钮实现方法.下面话不多说了,来一起看看详细的介绍吧. 二.固定样式的按钮 固定样式的按钮一般在临时使用时或程序的样式比较固定时才会使用,按钮整体样式不需要做大的改动. 2.1 普通按钮-扁平化风格 先看效果: 定义Button的样式,详见代码: <Style x:Key="BtnInfoStyle" TargetType="Button&quo

  • WPF自定义实现IP地址输入控件

    一.前言 WPF没有内置IP地址输入控件,因此我们需要通过自己定义实现. 我们先看一下IP地址输入控件有什么特性: 输满三个数字焦点会往右移 键盘←→可以空光标移动 任意位置可复制整段IP地址,且支持x.x.x.x格式的粘贴赋值 删除字符会自动向左移动焦点 知道以上特性,我们就可以开始动手了. 二.构成 Grid+TextBox*4+TextBlock*3 通过这几个控件的组合,我们完成IP地址输入控件的功能. 界面代码如下: <UserControl x:Class="IpAddress

  • WPF自定义选择年月控件详解

    本文实例为大家分享了WPF自定义选择年月控件的具体代码,供大家参考,具体内容如下 封装了一个选择年月的控件,XAML代码: <UserControl x:Class="SunCreate.CombatPlatform.Client.DateMonthPicker" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.micr

  • WPF如何自定义TabControl控件样式示例详解

    一.前言 程序中经常会用到TabControl控件,默认的控件样式很普通.而且样式或功能不一定符合我们的要求.比如:我们需要TabControl的标题能够居中.或平均分布:或者我们希望TabControl的标题能够进行关闭.要实现这些功能我们需要对TabControl的样式进行定义. 二.实现TabControl的标题平均分布 默认的TabControl标题是使用TabPanel容器包含的.要想实现TabControl标题头平均分布,需要把TabPanel替换成UniformGrid: 替换后的

  • WPF滑块控件(Slider)的自定义样式

    前言 每次开发滑块控件的样式都要花很久去读样式代码,感觉有点记不牢,所以特此备忘. 自定义滑块样式 首先创建项目,添加Slider控件. 然后获取Slider的Window样式,如下图操作. 然后弹出界面如下.我们点击确定. 点击确定后,我们的页面的Resources中,增加了一系列样式代码,而滑块代码会被修改为如下样子: 可以看到,系统为我们的Slider控件增加了样式--Style="{DynamicResource SliderStyle1}" 现在我们查看样式SliderSty

  • 自定义WPF分页控件的全过程记录

    一.分页控件功能说明# 实现如上图所示的分页控件,需要实现一下几个功能: 可以设置每页能够展示的最大列数(例如每页8列.每页16列等等). 加载的数组总数量超过设置的每页列数后,需分页展示. 可以直接点击指定的列数或者上下页按钮进行页面跳转 二.自定义分页控件使用说明# 为了实现以上功能,主要进行以下工作: 1.添加一个自定义按钮PagerButton类,声明一个依赖属性IsActive,用于记录当前页面所在页数的按钮,此时该按钮边框高亮显示,具体代码如下: public class Pager

  • asp.net webform自定义分页控件

    做web开发一直用到分页控件,自己也动手实现了个,使用用户自定义控件. 翻页后数据加载使用委托,将具体实现放在在使用分页控件的页面进行注册. 有图有真相,给个直观的认识: 自定义分页控件前台代码: <style type="text/css"> .pager-m-l { margin-left: 10px; } .pager { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; fo

  • asp.net web页面自定义分页控件使用详解

    这几天学习了一下自定义分页控件,现将实现方法记录下来,亲测可以实现: 1.首先创建一个.ascx文件,命名为TurnPage,然后在里面写控件前台展示的界面: 2.然后在TurnPage.ascx.cs里面写相应的后台代码,代码如下: namespace Web { public delegate void GoToPage(int PageNum); public partial class TurnPage : System.Web.UI.UserControl { private GoTo

  • 关于asp.net 自定义分页控件

    这几天空学习了下自定义控件,参考了aspnetpager开发了自己的分页控件.相对aspnetpager来说功能是多,但个人感觉他的代码太多. 界面: 使用: <%@ Register assembly="YSM.AspNetPager" namespace="YSM.AspNetPager" tagprefix="cc1" %> 页面注册控件,也可以在web.config中配置 1.ajax之UpdatePanel分页则把控件放到U

  • AspNetPager分页控件源代码(Version 4.2)第1/2页

    //AspNetPager分页控件源代码(Version 4.2): using System; using System.IO; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.HtmlControls; using System.Collections.Specialized; using System.Text; using System.Componen

  • asp.net中使用自定义控件的方式实现一个分页控件的代码

    一.概述 在web开发中,常常需要显示一些数据,而为了方便排版及浏览,我们只需要显示所有记录中的一部分.一般情况下,我们采用分页来实现这个需求.实现分页的方法多种多样,在本文中,我们采用了一个分页空间来记录记录总数.当前页.总页数及页面大小等.为了有一个直观上的印象,先展示该控件运行后的效果,效果如下图所示: 二.实现方案 为了实现该效果图,在asp.net中,可以使用Custom Controls and User Controls两种方式,User Controls的实现方式及其简单,而且使

  • ASP.Net 分页控件源码

    特性: .支持datagrid,datalist等分种数据显示控件,理论上只要有datasource的控件都可以 .支持url方式分页,url分页的每一页都可以被搜索引擎搜到,并且支持url重写 .控件样式可自定义 .封装完全,使用过程序只需写一行代码 复制代码 代码如下: /****************************************************************** ** 文件名:Pager.cs ** 创建人:杨响武 ** 日 期:2005年7月27日

  • winform分页控件 附源码下载

    以前都是从事B/S开发,由于公司有个比较大的C/S项目,在使用DATAGRIDVIEW的时候,显示数据量比较大,所以才用分页模式,也不知道这样是否正确. 想找个C/S下面的分页控件,都没有什么好的,就自己跟B/S下的分页控件,修改成WINFORM下面的. 首先创建一个用户控件名称为pager,在控件中拖入bindingNavigator和bindingSource,修改bindingNavigator,加入必要的一些控件. 效果如下: 代码实现如下: namespace WindowsApp.M

随机推荐