欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

WPF简单的分页控件实现

程序员文章站 2022-04-08 18:45:27
XAML代码(使用ItemsControl控件实现):

xaml代码(使用itemscontrol控件实现):

WPF简单的分页控件实现
<usercontrol x:class="suncreate.vipf.client.ui.citydoor.pagecontrol"
             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" 
             d:designheight="28" d:designwidth="450">
    <grid>
        <stackpanel orientation="horizontal" verticalalignment="center">
            <!--上一页-->
            <button x:name="btnprepage" height="28" background="transparent" foreground="#fff" click="btnprepage_click" commandparameter="{binding}" verticalalignment="center" visibility="{binding numvisible}">
                <button.template>
                    <controltemplate>
                        <border x:name="border" background="transparent" cornerradius="2">
                            <textblock x:name="txt" margin="10 0 10 1" foreground="{templatebinding foreground}" fontsize="{binding fontsize}" fontweight="bold" text="&lt;&lt;" verticalalignment="center"></textblock>
                        </border>
                        <controltemplate.triggers>
                            <trigger property="ismouseover" value="true">
                                <setter targetname="border" property="background" value="#6633ccee"></setter>
                            </trigger>
                        </controltemplate.triggers>
                    </controltemplate>
                </button.template>
            </button>
            <!--页码-->
            <itemscontrol x:name="itemscontrol">
                <itemscontrol.template>
                    <controltemplate>
                        <itemspresenter></itemspresenter>
                    </controltemplate>
                </itemscontrol.template>
                <itemscontrol.itemspanel>
                    <itemspaneltemplate>
                        <stackpanel orientation="horizontal"></stackpanel>
                    </itemspaneltemplate>
                </itemscontrol.itemspanel>
                <itemscontrol.itemtemplate>
                    <datatemplate>
                        <grid>
                            <button x:name="btnnum" height="28" background="transparent" click="btnnum_click" commandparameter="{binding}" verticalalignment="center" visibility="{binding numvisible}">
                                <button.template>
                                    <controltemplate>
                                        <border x:name="border" background="transparent" cornerradius="2" snapstodevicepixels="true">
                                            <textblock x:name="txt" margin="10 0 10 0" foreground="{binding currentpagecolor}" fontsize="{binding fontsize}" fontweight="bold" text="{binding page}" verticalalignment="center" ></textblock>
                                        </border>
                                        <controltemplate.triggers>
                                            <trigger property="ismouseover" value="true">
                                                <setter targetname="border" property="background" value="#6633ccee"></setter>
                                            </trigger>
                                        </controltemplate.triggers>
                                    </controltemplate>
                                </button.template>
                            </button>
                            <border height="28" visibility="{binding omitvisible}">
                                <textblock x:name="txt" margin="10 0 10 3" foreground="#fff" fontsize="{binding fontsize}" text="…" verticalalignment="center" ></textblock>
                            </border>
                        </grid>
                    </datatemplate>
                </itemscontrol.itemtemplate>
            </itemscontrol>
            <!--下一页-->
            <button x:name="btnnextpage" height="28" background="transparent" foreground="#fff" click="btnnextpage_click" commandparameter="{binding}" verticalalignment="center" visibility="{binding numvisible}">
                <button.template>
                    <controltemplate>
                        <border x:name="border" background="transparent" cornerradius="2">
                            <textblock x:name="txt" margin="10 0 10 1" foreground="{templatebinding foreground}" fontsize="{binding fontsize}" fontweight="bold" text=">>" verticalalignment="center"></textblock>
                        </border>
                        <controltemplate.triggers>
                            <trigger property="ismouseover" value="true">
                                <setter targetname="border" property="background" value="#6633ccee"></setter>
                            </trigger>
                        </controltemplate.triggers>
                    </controltemplate>
                </button.template>
            </button>
        </stackpanel>
    </grid>
</usercontrol>
view code

后台代码:

WPF简单的分页控件实现
using system;
using system.collections.generic;
using system.collections.objectmodel;
using system.componentmodel;
using system.linq;
using system.text;
using system.threading.tasks;
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 suncreate.vipf.client.ui.citydoor
{
    /// <summary>
    /// 分页控件
    /// </summary>
    public partial class pagecontrol : usercontrol, inotifypropertychanged
    {
        #region 事件
        /// <summary>
        /// 分页事件
        /// </summary>
        public event eventhandler<pagechangedeventargs> pagechanged;
        #endregion

        #region 变量
        private observablecollection<pagecontrolitemmodel> _collection = new observablecollection<pagecontrolitemmodel>();
        private list<pagecontrolitemmodel> _list = null;
        #endregion

        #region 属性
        private int _fontsize = 12;
        /// <summary>
        /// 文字字体大小
        /// </summary>
        public int fontsize
        {
            get { return _fontsize; }
            set
            {
                _fontsize = value;
                onpropertychanged("fontsize");

                calcpagenumlist(); //计算页码
            }
        }
        #endregion

        #region 分页相关属性
        private int _pagecount = 1;
        /// <summary>
        /// 总页数
        /// </summary>
        public int pagecount
        {
            get { return _pagecount; }
            set
            {
                _pagecount = value;
                onpropertychanged("pagecount");
            }
        }

        private int _page = 1;
        /// <summary>
        /// 当前页码
        /// </summary>
        public int page
        {
            get { return _page; }
            set
            {
                _page = value;
                onpropertychanged("page");

                calcpagenumlist(); //计算页码
            }
        }

        private int _recordcount = 0;
        /// <summary>
        /// 记录总数
        /// </summary>
        public int recordcount
        {
            get { return _recordcount; }
            set
            {
                _recordcount = value;
                onpropertychanged("recordcount");

                calcpagenumlist(); //计算页码
            }
        }

        private int _pagesize = 10;
        /// <summary>
        /// 每页记录数
        /// </summary>
        public int pagesize
        {
            get { return _pagesize; }
            set
            {
                _pagesize = value;
                onpropertychanged("pagesize");

                calcpagenumlist(); //计算页码
            }
        }

        private int _continuouscount = 3;
        /// <summary>
        /// 当前页码右边连续页码数
        /// </summary>
        public int continuouscount
        {
            get { return _continuouscount; }
            set
            {
                _continuouscount = value;
                onpropertychanged("_continuouscount");

                calcpagenumlist(); //计算页码
            }
        }
        #endregion

        #region 构造函数
        public pagecontrol()
        {
            initializecomponent();

            this.itemscontrol.itemssource = _collection;
        }
        #endregion

        #region 单击页码事件
        private void btnnum_click(object sender, routedeventargs e)
        {
            if (pagechanged != null)
            {
                button btn = sender as button;
                pagecontrolitemmodel itemmodel = btn.commandparameter as pagecontrolitemmodel;
                if (itemmodel.page != page)
                {
                    page = itemmodel.page;
                    calcpagenumlist();

                    pagechangedeventargs args = new pagechangedeventargs(itemmodel.page);
                    pagechanged(sender, args);
                }
            }
        }
        #endregion

        #region 计算页码
        /// <summary>
        /// 计算页码
        /// </summary>
        private void calcpagenumlist()
        {
            pagecount = (recordcount - 1) / pagesize + 1; //计算总页数pagecount

            _list = new list<pagecontrolitemmodel>();

            //第一页
            pagecontrolitemmodel item = new pagecontrolitemmodel(1, page);
            _list.add(item);

            //当前页码连续页码
            for (int i = page - continuouscount; i <= page + continuouscount; i++)
            {
                if (i > 0 && i < pagecount)
                {
                    item = new pagecontrolitemmodel(i, page);
                    if (!_list.exists(a => a.page == item.page))
                    {
                        _list.add(item);
                    }
                }
            }

            //最后一页
            item = new pagecontrolitemmodel(pagecount, page);
            if (!_list.exists(a => a.page == item.page))
            {
                _list.add(item);
            }

            for (int i = _list.count - 1; i > 0; i--)
            {
                if (_list[i].page - _list[i - 1].page > 1)
                {
                    _list.insert(i, new pagecontrolitemmodel(0, page, 2));
                }
            }

            //上一页下一页
            if (page == 1)
            {
                this.btnprepage.isenabled = false;
                this.btnprepage.foreground = new solidcolorbrush((color)colorconverter.convertfromstring("#88dddddd"));
            }
            else
            {
                this.btnprepage.isenabled = true;
                this.btnprepage.foreground = new solidcolorbrush((color)colorconverter.convertfromstring("#fff"));
            }
            if (page == pagecount)
            {
                this.btnnextpage.isenabled = false;
                this.btnnextpage.foreground = new solidcolorbrush((color)colorconverter.convertfromstring("#88dddddd"));
            }
            else
            {
                this.btnnextpage.isenabled = true;
                this.btnnextpage.foreground = new solidcolorbrush((color)colorconverter.convertfromstring("#fff"));
            }

            _collection.clear();
            _list.foreach(a => { _collection.add(a); });
        }
        #endregion

        #region 上一页
        private void btnprepage_click(object sender, routedeventargs e)
        {
            int prepage = page - 1;
            if (prepage < 1) prepage = 1;
            if (prepage != page)
            {
                page = prepage;
                calcpagenumlist();

                pagechangedeventargs args = new pagechangedeventargs(prepage);
                pagechanged(sender, args);
            }
        }
        #endregion

        #region 下一页
        private void btnnextpage_click(object sender, routedeventargs e)
        {
            int nextpage = page + 1;
            if (nextpage > pagecount) nextpage = pagecount;
            if (nextpage != page)
            {
                page = nextpage;
                calcpagenumlist();

                pagechangedeventargs args = new pagechangedeventargs(nextpage);
                pagechanged(sender, args);
            }
        }
        #endregion

        #region inotifypropertychanged接口
        public event propertychangedeventhandler propertychanged;

        protected void onpropertychanged(string name)
        {
            if (propertychanged != null)
            {
                propertychanged(this, new propertychangedeventargs(name));
            }
        }
        #endregion

    }

    #region 分页控件item model
    /// <summary>
    /// 分页控件item model
    /// </summary>
    public class pagecontrolitemmodel : inotifypropertychanged
    {
        private int _type = 1;
        /// <summary>
        /// 类型(1数字 2省略号)
        /// </summary>
        public int type
        {
            get { return _type; }
            set
            {
                _type = value;
                onpropertychanged("type");

                if (_type == 1)
                {
                    numvisible = visibility.visible;
                    omitvisible = visibility.collapsed;
                }
                else
                {
                    numvisible = visibility.collapsed;
                    omitvisible = visibility.visible;
                }
            }
        }

        private bool _iscurrentpage;
        /// <summary>
        /// 是否当前页码
        /// </summary>
        public bool iscurrentpage
        {
            get { return _iscurrentpage; }
            set
            {
                _iscurrentpage = value;
                onpropertychanged("iscurrentpage");

                if (_iscurrentpage)
                {
                    currentpagecolor = new solidcolorbrush((color)colorconverter.convertfromstring("#00f0ff"));
                }
                else
                {
                    currentpagecolor = new solidcolorbrush(colors.white);
                }
            }
        }

        private solidcolorbrush _currentpagecolor = new solidcolorbrush(colors.white);
        /// <summary>
        /// 当前页码颜色
        /// </summary>
        public solidcolorbrush currentpagecolor
        {
            get { return _currentpagecolor; }
            set
            {
                _currentpagecolor = value;
                onpropertychanged("currentpagecolor");
            }
        }

        private int _page;
        /// <summary>
        /// 页码
        /// </summary>
        public int page
        {
            get { return _page; }
            set
            {
                _page = value;
                onpropertychanged("page");
            }
        }

        private visibility _numvisible = visibility.visible;
        /// <summary>
        /// 数字可见
        /// </summary>
        public visibility numvisible
        {
            get { return _numvisible; }
            set
            {
                _numvisible = value;
                onpropertychanged("numvisible");
            }
        }

        private visibility _omitvisible = visibility.collapsed;
        /// <summary>
        /// 省略号可见
        /// </summary>
        public visibility omitvisible
        {
            get { return _omitvisible; }
            set
            {
                _omitvisible = value;
                onpropertychanged("omitvisible");
            }
        }

        /// <summary>
        /// 分页控件item model
        /// </summary>
        /// <param name="page">页码</param>
        /// <param name="currentpage">当前页码</param>
        /// <param name="type">类型(1数字 2省略号)</param>
        public pagecontrolitemmodel(int page, int currentpage, int type = 1)
        {
            type = type;
            page = page;
            iscurrentpage = page == currentpage;
        }

        #region inotifypropertychanged接口
        public event propertychangedeventhandler propertychanged;

        protected void onpropertychanged(string name)
        {
            if (propertychanged != null)
            {
                propertychanged(this, new propertychangedeventargs(name));
            }
        }
        #endregion

    }
    #endregion

    #region 分页事件参数
    /// <summary>
    /// 分页事件参数
    /// </summary>
    public class pagechangedeventargs : eventargs
    {
        private int _page = 1;
        /// <summary>
        /// 当前页码
        /// </summary>
        public int page
        {
            get
            {
                return _page;
            }
        }

        /// <summary>
        /// 分页事件参数
        /// </summary>
        /// <param name="page">当前页码</param>
        public pagechangedeventargs(int page)
        {
            _page = page;
        }
    }
    #endregion

}
view code

效果图:

WPF简单的分页控件实现