效果图:

aaarticlea/png;base64,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" alt="" />

1、xaml

    <UserControl x:Class="app.component.Pager"
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" Loaded="UserControl_Loaded"> <Grid>
<StackPanel Orientation="Horizontal">
<TextBlock Height="" Margin="">
<TextBlock Text="当前" />
<TextBlock Name="currentCountTbk" Foreground="Red" />
<TextBlock Text="条记录,共" />
<TextBlock Name="totalCountTbk" Foreground="Red" />
<TextBlock Text="条 " />
<TextBlock Text="第" />
<TextBlock Name="pageNoTbk" Foreground="Red" />
<TextBlock Text="/" />
<TextBlock Name="pageCountTbk" Foreground="Red" />
<TextBlock Text="页 " />
</TextBlock> <TextBlock Text="每页显示" Margin=""/>
<TextBox Name="pageSizeTb" Text="" Width="" Height="" />
<Button Content="设置" Click="setPageSizeBtn_Click" Height=""/>
<TextBlock Text=" " /> <Button Name="firstPageBtn" Content="首页" VerticalAlignment="Center" Click="firstPageBtn_Click"/>
<Button Name="prePageBtn" Content="上一页" VerticalAlignment="Center" Click="prePageBtn_Click"/>
<Button Name="nextPageBtn" Content="下一页" VerticalAlignment="Center" Click="nextPageBtn_Click"/>
<Button Name="lastPageBtn" Content="末页" VerticalAlignment="Center" Click="lastPageBtn_Click"/> <TextBlock Text=" 转到" Margin=""/>
<TextBox Name="gotoPageNoTb" Text="" Width="" Height="" />
<TextBlock Text="页" Margin=""/>
<Button Content=" GO " Click="gotoBtn_Click" Height=""/>
<TextBlock Text=" " />
<Button Content="刷新" Click="refreshBtn_Click" Height=""/>
</StackPanel>
</Grid> </UserControl>

2、后台代码

    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.Text.RegularExpressions;
using System.Data;
using app.component; namespace app.component { /// <summary>
/// Pager.xaml 的交互逻辑
/// </summary>
public partial class Pager : UserControl { private int pageNo = ; // 当前页
private int pageSize = ; // 每页记录数
private int totalCount = ; // 总记录数
private int currentCount = ; // 当前页记录数
private int pageCount = ; // 总页数 private bool gotoFirstPageAfterLoaded = true; // 控件初始化后是否自动加载第一页数据 private bool hasInit = false; public Pager() {
InitializeComponent(); this.prePageBtn.IsEnabled = false;
} /// <summary>
/// 获取数据委托,返回总记录数
/// </summary>
/// <param name="pageNo">请求页</param>
/// <param name="pageSize">每页记录数</param>
/// <returns>总记录数</returns>
public delegate int GetDataDelegate(int pageNo, int pageSize);
private GetDataDelegate getDataDelegateHandler; /// <summary>
/// 刷新当前页
/// </summary>
public void Refresh() {
GotoPage(pageNo);
} public void GotoFirstPage() {
GotoPage();
} public void GotoLastPage() {
GotoPage(pageCount);
} public void GotoPage(int pageNo) {
if (pageNo <= ) {
pageNo = ;
} this.pageNo = pageNo; try {
totalCount = getDataDelegateHandler(pageNo, pageSize);
pageCount = totalCount % pageSize == ? totalCount / pageSize : (totalCount / pageSize + );
currentCount = pageNo == pageCount ? (totalCount - (pageNo - ) * pageSize) : pageSize; // 页码显示
this.currentCountTbk.Text = currentCount + "";
this.totalCountTbk.Text = totalCount + "";
this.pageNoTbk.Text = pageNo + "";
this.pageCountTbk.Text = pageCount + "";
this.pageSizeTb.Text = pageSize + ""; // 按钮状态
this.prePageBtn.IsEnabled = pageNo > ? true : false;
this.firstPageBtn.IsEnabled = pageNo > ? true : false;
this.nextPageBtn.IsEnabled = pageNo < pageCount ? true : false;
this.lastPageBtn.IsEnabled = pageNo < pageCount ? true : false;
} catch (Exception) {
this.pageNoTbk.Text = "";
this.pageCountTbk.Text = "";
}
} // 设置页显示记录数
private void setPageSizeBtn_Click(object sender, RoutedEventArgs e) {
try {
int pageSize = Convert.ToInt32(this.pageSizeTb.Text);
if (pageSize > ) {
this.pageSize = pageSize;
this.GotoFirstPage();
} else {
this.pageSizeTb.Text = this.pageSize + "";
}
} catch (Exception) {
this.pageSizeTb.Text = this.pageSize + "";
}
} // 首页事件
private void firstPageBtn_Click(object sender, RoutedEventArgs e) {
GotoFirstPage();
} // 上一页事件
private void prePageBtn_Click(object sender, RoutedEventArgs e) {
if (pageNo > ) {
pageNo -= ;
GotoPage(pageNo);
}
} // 下一页事件
private void nextPageBtn_Click(object sender, RoutedEventArgs e) {
if (pageNo == || pageNo < pageCount) {
pageNo += ;
GotoPage(pageNo);
}
} // 末页事件
private void lastPageBtn_Click(object sender, RoutedEventArgs e) {
GotoLastPage();
} // 跳转事件
private void gotoBtn_Click(object sender, RoutedEventArgs e) {
try {
int pageNo = Convert.ToInt32(this.gotoPageNoTb.Text);
if (pageNo >= && pageNo <= pageCount) {
GotoPage(pageNo);
} else {
MessageBox.Show("请输入正确的页码范围:1 ~ " + pageCount);
}
} catch (Exception) {
}
} // 刷新
private void refreshBtn_Click(object sender, RoutedEventArgs e) {
Refresh();
} private void UserControl_Loaded(object sender, RoutedEventArgs e) {
if (!hasInit) {
if (gotoFirstPageAfterLoaded) {
GotoPage();
} hasInit = true;
}
} // getter setter public int PageSize {
get {
return pageSize;
}
set {
if (value > ) {
pageSize = value;
}
}
} /// <summary>
/// 控件初始化后是否自动加载第一页数据
/// </summary>
public bool GotoFirstPageAfterLoaded {
get {
return gotoFirstPageAfterLoaded;
}
set {
gotoFirstPageAfterLoaded = value;
}
} public Pager.GetDataDelegate GetDataDelegateHandler {
set {
getDataDelegateHandler = value;
}
} } }

3、调用示例

    xmlns:app="clr-namespace:app.component"  
//用DataGrid装载数据
  <DockPanel>
<app:Pager x:Name="pager" PageSize="" GetDataDelegateHandler="LoadData" DockPanel.Dock="Top" />
<DataGrid Name="dg" IsReadOnly="True" DockPanel.Dock="Bottom" LoadingRow="dg_LoadingRow"></DataGrid>
</DockPanel>

后台:

   public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
/// <summary>
/// 分页控件回调函数,返回总记录数
/// </summary>
/// <param name="pageNo">页码,由分页控件传入</param>
/// <param name="pageSize">页面记录大小,由分页控件传入</param>
/// <returns></returns>
private int LoadData(int pageNo, int pageSize)
{
// Page<Dic> page = this.dicInfoService.GetDicList(pageNo, pageSize, "asc", "id", new Dic()); ObservableCollection<Person> items = new ObservableCollection<Person>();
//初始化数据
Random rnd=new Random();
for (int i = ; i < ; i++)
{
items.Add(new Person
{
Name = "张三"+rnd.Next(),
age=rnd.Next().ToString(),
birthday = "2013-3-6",
remark = "说明"
});
} //绑定数据
this.dg.ItemsSource = items.Skip((pageNo-)*pageSize).Take(pageSize).ToList(); return items.Count;
} private void dg_LoadingRow(object sender, DataGridRowEventArgs e)
{
e.Row.Header= e.Row.GetIndex() + ;
}
}
public class Person
{
public string Name { get; set; }
public string age{ get; set; }
public string birthday { get; set; }
public string remark { get; set; } }

WPF 分页控件的实现 -用户控件的更多相关文章

  1. WPF 使用依赖属性(DependencyProperty) 定义用户控件中的Image Source属性

    原文:WPF 使用依赖属性(DependencyProperty) 定义用户控件中的Image Source属性 如果你要自定义一个图片按钮控件,那么如何在主窗体绑定这个控件上图片的Source呢? ...

  2. 036. asp.netWeb用户控件之五使用用户控件实现分页数据导航

    UserDataPager.ascx用户控件代码: <%@ Control Language="C#" AutoEventWireup="true" Co ...

  3. 037. asp.netWeb用户控件之五使用用户控件实现文件上传功能

    fileUpload.ascx代码: <%@ Control Language="C#" AutoEventWireup="true" CodeFile= ...

  4. 035. asp.netWeb用户控件之四通过用户控件实现投票和结果分析

    用户控件Vote.ascx代码 <%@ Control Language="C#" AutoEventWireup="true" CodeFile=&qu ...

  5. 034. asp.netWeb用户控件之三通过用户控件实现用户注册和登录

    用户控件login.ascx代码: <%@ Control Language="C#" AutoEventWireup="true" CodeFile=& ...

  6. 032. asp.netWeb用户控件之一初识用户控件并为其自定义属性

    Web用户控件的优点: 可以将常用的内容或者控件以及控件的运行程序逻辑, 设计为用户控件, 以后便可以在多个页面中重复使用该用户控件, 从而省去许多重复性的工作. 如网页上的导航栏, 几乎每个页面都需 ...

  7. 在用户控件(ASCX)创建用户控件(ASCX)

    "我建了两个ascx,ascxA,ascxBascxA中放了一个PlaceHold,ascxB中放了一个textBoxascxA在page_load中动态创建了5个ascxB但是页面上什么都 ...

  8. VS2015创建类库项目后添加不了WPF资源字典,窗口,用户控件处理办法

    打开项目工程文件在PropertyGroup标签最后加上下面3行: <ProjectTypeGuids>{60dc8134-eba5-43b8-bcc9-bb4bc16c2548};{FA ...

  9. 【转】通用分页用户控件(DataGrid,DataList,Repeater都可以用它来分页)

    通用分页控件(DataGrid,DataList,Repeater都可以用它来分页) 1.建立用户控件Pager.ascx 1.1 html </ASP:LABEL></TD> ...

随机推荐

  1. Fibonacci递归以及数组实现

    说起Fibonacci数列,首先想到的就是递归算法了,这也是帮助理解递归算法比较经典的题目实现如下: public static int Fibonacci(int n){    if (n == 0 ...

  2. 十分钟搭建和使用sonarqube代码质量管理平台

    前言 Sonarqube为静态代码检查工具,采用B/S架构,帮助检查代码缺陷,改善代码质量,提高开发速度,通过插件形式,可以支持Java.C.C++.JavaScripe等等二十几种编程语言的代码质量 ...

  3. 11、Java并发编程:并发容器之CopyOnWriteArrayList

    Java并发编程:并发容器之CopyOnWriteArrayList(转载) 原文链接: http://ifeve.com/java-copy-on-write/ Copy-On-Write简称COW ...

  4. redis外部访问

    1.redis的搭建这里就不做描述的了,可以参考我的另外一个博客. http://www.cnblogs.com/ll409546297/p/6993778.html 2.说明一下我们在其他服务器上面 ...

  5. Thymeleaf 模板引擎用法

    学习.改良.极致 博客园 首页 新随笔 联系 管理 订阅 随笔- 31  文章- 0  评论- 50  Thymeleaf 常用属性   文章主目录 th:action th:each th:fiel ...

  6. web项目优化

    1 循环时没有使用break  案例:查找一个值是否在数组中存在(为举例舍弃自带函数) $aa=123; $arr=array(234,123,5,6,45646,346,23); foreach($ ...

  7. 各种对list,string操作函数的总结

    #encoding=utf-8#reverse,用来反转lista=['aa','bb','cc']a.reverse()print a#['cc', 'bb', 'aa']#不能直接print a. ...

  8. C 数数位 while循环

    #include <stdio.h> int main(int argc, char **argv) { //定义两个变量  x n 把n初始化 int x; int n=0; //输入x ...

  9. Spring Cloud(五):Hystrix 监控面板【Finchley 版】

    Spring Cloud(五):Hystrix 监控面板[Finchley 版]  发表于 2018-04-16 |  更新于 2018-05-10 |  在上一篇 Hystrix 的介绍中,我们提到 ...

  10. 【带 josn参数的测法】

    遇到json 参数的情况这样写  ,否则就会报错 cod 415   nocookie post请求 ,","email":"beihe@163.com&quo ...