WPF简单的分页控件实现
程序员文章站
2022-04-08 18:45:27
XAML代码(使用ItemsControl控件实现):
view code
view code
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="<<" 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>
后台代码:
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 }
效果图:
上一篇: SEO高手之路需要经历的三个时期
下一篇: 不知当发不当发