当前位置: 萬仟网 > IT编程>开发语言>.net > WPF简单的分页控件实现

WPF简单的分页控件实现

2019年03月30日  | 萬仟网IT编程  | 我要评论
XAML代码(使用ItemsControl控件实现): <UserControl x:Class="SunCreate.Vipf.Client.UI.CityDoor.PageControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/p ...

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

<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

后台代码:

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

效果图:

 

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
Copyright © 2017-2021  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com