WPF自定义分页控件

于 2024-08-15 16:16:07 发布
阅读量517 收藏 4
点赞数 16
分类专栏： WPF实战 文章标签： wpf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43014802/article/details/141224353
版权

前序

做一个设备数据点调试工具。

需求

实现一个分页的组件，总数据、总分页、目标页、上一页、下一页和分页大小。

基础样式ui Handyui
文档地址

实现结果

在这里插入图片描述

思路

  1. 使用用户控件
  2. 使用自定义控件
    在这里插入图片描述
    使用用户控件已经满足实现分页控件，暂时不研究自定义控件。

自定义控件封装主要涉及

  1. 依赖属性
  2. 查询事件

控件内注册依赖属性并使用可以绑定更新

        /// <summary>
    /// 总条数
    /// </summary>
    public long Total
    {
        get { return (long)GetValue(TotalProperty); }
        set { SetValue(TotalProperty, value); }
    }
    public static readonly DependencyProperty TotalProperty =
        DependencyProperty.Register("Total", typeof(long), typeof(Pagination), new PropertyMetadata(0l, (s, e) =>
        {
            ((Pagination)s).Total = (long)e.NewValue;
        }));

控件内注册依赖属性命令类型

 /// <summary>
    /// 上一页
    /// </summary>
    public static readonly DependencyProperty FindPreCommandProperty =
        DependencyProperty.Register("PreCommand", typeof(RelayCommand), typeof(Pagination), new PropertyMetadata(null,
            (o, args) =>
            {
                ((Pagination)o).PreCommand = (RelayCommand)args.NewValue;
            } ));
    public RelayCommand PreCommand
    {
        get { return (RelayCommand)GetValue(FindPreCommandProperty); }
        set { SetValue(FindPreCommandProperty, value); }
    }

编码

控件 Pagination.xaml
<UserControl x:Class="DeviceData.Views.Controls.Pagination"
             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" 
             xmlns:local="clr-namespace:DeviceData.Views.Controls"
             xmlns:hc="https://handyorg.github.io/handycontrol"
             mc:Ignorable="d" 
             Background="Transparent" Height="65" Width="680">
    <StackPanel Orientation="Horizontal" Margin="10" VerticalAlignment="Center">
        <TextBlock Text="共计:"  VerticalAlignment="Center" Foreground="White"  Background="Transparent" />
        <TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=Total}" Margin="20,0,0,0"
                   Foreground="White"  Background="Transparent"  VerticalAlignment="Center"/>
        <TextBlock Text="条数据" Margin="20,0,0,0"  Foreground="White"  Background="Transparent" VerticalAlignment="Center"/>
        <TextBlock Text="共" Margin="20,0,0,0"  Foreground="White"  Background="Transparent" VerticalAlignment="Center"/>
        <TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=Page, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="10,0,0,0"  
                   Foreground="White"  Background="Transparent" VerticalAlignment="Center"/>
        <TextBlock Text="页" Margin="10,0,0,0"  Foreground="White"  Background="Transparent" VerticalAlignment="Center"/>
        <TextBox Text="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=Current, Mode=OneWay}"
                 Margin="20,0,0,0" Width="60"  Foreground="White"  Background="Transparent" VerticalAlignment="Center"/>
        <Button Command="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=GoCommand}"
                Content="GO" Margin="20,0,0,0" Width="40"  Foreground="White"  Background="Transparent" VerticalAlignment="Center"/>
        <Button Command="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=PreCommand}"
                Content="上一页" Margin="20,0,0,0" Width="80"  Foreground="White"  Background="Transparent" VerticalAlignment="Center"/>
        <Button Command="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=NextCommand}"
                Content="下一页" Margin="20,0,0,0" Width="80"  Foreground="White"  Background="Transparent" VerticalAlignment="Center"/>
        <ComboBox hc:DropDownElement.ConsistentWidth="False" Width="80" Foreground="Green"  Background="Transparent"  Margin="30,0,0,0" 
                  ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=PageSizes}"
                  SelectedValue="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=PageSize, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" SelectedIndex="0"
                  
                  />

    </StackPanel>
</UserControl>
控件 Pagination.cs
using System.Windows;
using System.Windows.Controls;
using CommunityToolkit.Mvvm.Input;

namespace DeviceData.Views.Controls;

public partial class Pagination : UserControl
{
    public Pagination()
    {
        InitializeComponent();       
    }

    #region 分页数据属性
    /// <summary>
    /// 总条数
    /// </summary>
    public long Total
    {
        get { return (long)GetValue(TotalProperty); }
        set { SetValue(TotalProperty, value); }
    }
    public static readonly DependencyProperty TotalProperty =
        DependencyProperty.Register("Total", typeof(long), typeof(Pagination), new PropertyMetadata(0l, (s, e) =>
        {
            ((Pagination)s).Total = (long)e.NewValue;
        }));

    
    /// <summary>
    /// 总页数
    /// </summary>
    public int Page
    {
        get { return (int)GetValue(PageProperty); }
        set { SetValue(PageProperty, value); }
    }

    public static readonly DependencyProperty PageProperty =
        DependencyProperty.Register("Page", typeof(int), typeof(Pagination),
            new PropertyMetadata(0, (o, args) =>
            {
                ((Pagination)o).Page = (int)args.NewValue;
            }));
    
    /// <summary>
    /// 当前页
    /// </summary>
    public int Current
    {
        get { return (int)GetValue(CurrentProperty); }
        set { SetValue(CurrentProperty, value); }
    }
    public static readonly DependencyProperty CurrentProperty =
        DependencyProperty.Register("Current", typeof(int), typeof(Pagination),   new PropertyMetadata(1, (o, args) =>
        {
            ((Pagination)o).Page = (int)args.NewValue;
        }));
    
    /// <summary>
    /// 分页大小列表
    /// </summary>
    public List<int> PageSizes
    {
        get { return (List<int>)GetValue(PageSizesProperty); }
        set { SetValue(PageSizesProperty, value); }
    }
    public static readonly DependencyProperty PageSizesProperty =
        DependencyProperty.Register("PageSizes", typeof(List<int>), typeof(Pagination),  new PropertyMetadata(null, (o, args) =>
        {
            ((Pagination)o).PageSizes = (List<int>)args.NewValue;
        }));
    
    /// <summary>
    /// 分页大小
    /// </summary>
    public int PageSize
    {
        get { return (int)GetValue(PageSizeProperty); }
        set { SetValue(PageSizeProperty, value); }
    }
    public static readonly DependencyProperty PageSizeProperty =
        DependencyProperty.Register("PageSize", typeof(int), typeof(Pagination),  new PropertyMetadata(0, (o, args) =>
        {
            ((Pagination)o).PageSize = (int)args.NewValue;
        }));

    #endregion

    #region 分页事件

    /// <summary>
    /// 上一页
    /// </summary>
    public static readonly DependencyProperty FindPreCommandProperty =
        DependencyProperty.Register("PreCommand", typeof(RelayCommand), typeof(Pagination), new PropertyMetadata(null,
            (o, args) =>
            {
                ((Pagination)o).PreCommand = (RelayCommand)args.NewValue;
            } ));
    public RelayCommand PreCommand
    {
        get { return (RelayCommand)GetValue(FindPreCommandProperty); }
        set { SetValue(FindPreCommandProperty, value); }
    }
    public static readonly DependencyProperty NextCommandProperty =
        DependencyProperty.Register("NextCommand", typeof(RelayCommand), typeof(Pagination), new PropertyMetadata(null,
            (o, args) =>
            {
                ((Pagination)o).NextCommand = (RelayCommand)args.NewValue;
            } ));
    public RelayCommand NextCommand
    {
        get { return (RelayCommand)GetValue(NextCommandProperty); }
        set { SetValue(NextCommandProperty, value); }
    }
    public static readonly DependencyProperty GoCommandProperty =
        DependencyProperty.Register("GoCommand", typeof(RelayCommand), typeof(Pagination), new PropertyMetadata(null,
            (o, args) =>
            {
                ((Pagination)o).GoCommand = (RelayCommand)args.NewValue;
            } ));
    public RelayCommand GoCommand
    {
        get { return (RelayCommand)GetValue(GoCommandProperty); }
        set { SetValue(GoCommandProperty, value); }
    }
    
    #endregion    

}
使用控件窗体或控件
  1. 导入命名控件
    xmlns:ctls="clr-namespace:DeviceData.Views.Controls"
  1. 使用控件，通过ViewModel进行数据绑定
<ctls:Pagination Margin="5" Total="{Binding PagenationModel.Total}" Current="{Binding PagenationModel.Current}" 
                          Page="{Binding PagenationModel.page}" PageSize="{Binding PagenationModel.Pages}"
                          PageSizes="{Binding PagenationModel.PageSizes}" PreCommand="{Binding PagenationModel.FindPreCommand}"
                          NextCommand="{Binding PagenationModel.FindNextCommand}"  GoCommand="{Binding PagenationModel.FindTargetCommand}"
                          >
         </ctls:Pagination>

封装的分页数据模型 （参考）

using System.Collections.ObjectModel;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

namespace DeviceData.Models;

public class PagenationModel<T> : ObservableObject
{
    private long total = 0;
    public long Total
    {
        get => total;
        set => SetProperty(ref total, value);
    }
    
    private int page = 1;
    public int Page
    {
        get => page;
        set => SetProperty(ref page, value);
    }
    
    private int current = 1;
    public int Current
    {
        get => current;
        set => SetProperty(ref current, value);
    }
    
    private List<int> pageSizes = new List<int>(){10, 20, 30, 40, 50};
    public List<int> PageSizes
    {
        get => pageSizes;
        set => SetProperty(ref pageSizes, value);
    }

    /// <summary>
    /// 上一页
    /// </summary>
    private RelayCommand findPreCommand;
    public RelayCommand FindPreCommand
    {
        get => findPreCommand;
        set => SetProperty(ref findPreCommand, value);
    }
    /// <summary>
    /// 下一页
    /// </summary>
    private RelayCommand findNextCommand;
    public RelayCommand FindNextCommand
    {
        get => findNextCommand;
        set => SetProperty(ref findNextCommand, value);
    }
    /// <summary>
    /// 目标页
    /// </summary>
    private RelayCommand findTargetCommand;
    public RelayCommand FindTargetCommand
    {
        get => findTargetCommand;
        set => SetProperty(ref findTargetCommand, value);
    }    
    
    private ObservableCollection<T>  rows = new ObservableCollection<T>();
    public ObservableCollection<T> Rows
    {
        get => rows;
        set => SetProperty(ref rows, value);
    }   

}

MVVM框架用的是微软的 CommunityToolkit.Mvvm
官方文档

效果图

软件暂未开发完成，等开发完成再把源码地址放出来。
在这里插入图片描述

BBoy森杰
关注
  • 16
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF 自定义分页控件一
09-12 234
一：右键添加新建项，选择新建自定义控件，命名为：KDataPager 1 public class KDataPager : Control 2 { 3 static KDataPager() 4 { 5 DefaultStyleKeyProperty.OverrideMetadat...
WPF 自定义分页控件TextBox分页页数只输入数字验证
鸣的博客
09-21 265
【代码】WPF 自定义分页控件TextBox分页页数只输入数字验证。
WPF中自定义的分页控件
qq_44618510的博客
03-01 1514
自定义的分页控件包含 首页、上一页、当前页、下一页、最后一页、设置页的大小(一页显示的条数)或显示总的记录数。 实际的使用效果图如下: xaml代码中使用的文本静态资源如下： xaml代码中使用的画刷资源如下： xaml代码中使用的converter的C#代码如下：
WPF 自定义分页控件DataPager.xaml
qq_31971935的博客
11-15 2887
1、DataPager.xaml<UserControl x:Class="Client.UserControls.DataPager" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/wi
WPF自定义分页控件,样式自定义,简单易用
weixin_34365635的博客
03-23 265
WPF自定义分页控件 做了许久伸手党，终于有机会贡献一波，搜索一下WPF分页控件，还是多，但是不太通用，主要就是样式问题，这个WPF很好解决，还有一个就是分页控件嘛，只关心几个数字的变动就行了，把页码改变事件暴露出来，数据的加载在这里就做就行，所以这个分页控件很简单... 好像也没啥讲的，直接上代码了 分页控件基本样式 <Style TargetType="{x:Type local:Pag...
WPF 自定义分页控件二
09-14 197
一：添加自定义分页控件，命名为KDataPagerTwo： 1 public class KDataPagerTwo : Control, INotifyPropertyChanged 2 { 3 static KDataPagerTwo() 4 { 5 DefaultStyleKeyP...
WPF 漂亮的自定义分页控件
badxnui的博客
04-10 2821
# 所用到的关键知识点 ① 自定义用户控件 （整个Page 是一个用自定义用户控件） ② 自定义控件 （每一个页面小按键是自定义控件） ③ 样式触发器 （Buttontype 改变时自动切换控件模板） ④ 自定义事件给引用者使用 （当点击每个页面按键时触发） ⑤ 依赖项属性 以及 属性改变回调事件 ⑥ 其它 #开发和运行阶段的效果图片 1、开发时效果图 2、运行时的效果...
【原创】自定义分页控件WPF
MintYouth的博客
11-27 611
MintYouth,自定义分页控件WPF
WPF的简单分页控件
qq_44217121的博客
06-21 166
WPF分页控件
C# WPF自定义分页控件
03-31
WPF自定义控件,完全原创, 采用命令绑定模式,要用分页的地方,只需要继承RepeaterPageViewModel　模型就行了,重用性,可扩展性很高,方便实用,代码包含了:ModelBase类,RelayCommand类,很实用的.还用到了WPFToolkit....
WPF分页自定义控件
12-29
创建自定义分页控件时，我们首先需要定义控件的基本结构。这通常涉及声明依赖属性，例如“CurrentPage”、“PageSize”和“TotalItems”，它们分别表示当前页、每页的项目数和总项目数。依赖属性允许我们在控件之间...
WPF Border 妙用，切图
最新发布
u013400314的博客
08-14 226
【代码】WPF Border 妙用。
WPF窗体动态效果
zhaotianff的专栏
08-14 1021
WPF实现窗体动态效果，类似网页上的动态背景效果。
WPF APP生命周期和全局异常捕获
代码改变世界
08-13 227
WPF APP生命周期和全局异常捕获
在Visual Studio 2019/2022中安装Blend 4.5 SDK(System.Windows.Interactivity)
zhaotianff的专栏
08-12 430
在新版本Visual Studio中安装Blend SDK。适用于.NET Framework和.NET Core。
WPF 数据模板DataTemplate、控件模板ControlTemplate、Style、ItemsPreseter
u013400314的博客
08-12 372
DataTemplate常用的地方有3处，分别是：ContentControl的ContentTemplate属性，相当于给ContentControl的内容穿衣服。ItemsControl的 ItemTemplate属性，相当于给ItemsControl的数据条目穿衣服。GridViewColumn的CellTemplate属性，相当于给GridViewColumn单元格里的数据穿衣服。
【AMC】异步消息通信框架讲解（一）
weixin_43894265的博客
08-12 563
异步消息通信 (AMC) 库是一个通用 LabVIEW API，用于在 LabVIEW 应用程序中的进程内、进程之间以及不同 LabVIEW 目标（网络上的系统）之间发送消息。队列消息处理器 (QMH) 设计模式是一种通用 VI 架构，可用作各种 LabVIEW VI 的基础。它使用 AMC API 发送和接收消息。此设计模式可用于实现状态机、应用程序的用户界面、异步通信处理器以及大型应用程序中的其他任务和系统组件。此设计模式与其他 VI 架构实现类似，通常称为排队状态机。
wpf 自定义datagrid控件
08-08
WPF自定义DataGrid控件是通过继承现有的DataGrid类，并在其基础上进行修改和扩展来实现的。 自定义DataGrid控件的步骤如下： 1. 创建一个自定义的类，继承自DataGrid。例如，可以命名为CustomDataGrid。 2. 在CustomDataGrid类中，可以添加额外的属性、依赖属性或附加属性，用于自定义DataGrid控件的特定行为或外观。 3. 重写或扩展DataGrid的现有方法、事件和样式，以满足自定义需求。例如，可以重写OnApplyTemplate()方法以应用自定义样式。 4. 根据需要，可以添加新的功能或控件，例如自定义列、单元格、行、排序、筛选、分页等等。 5. 在CustomDataGrid类中，可以通过编写自定义的模板（Template）来修改DataGrid的外观。例如，可以通过修改DataGrid的ControlTemplate来改变整个DataGrid的显示风格。 6. 编写完自定义类后，可以在XAML中使用自定义DataGrid控件，通过添加命名空间引用并将CustomDataGrid作为一个控件使用。可以设置自定义属性、事件和样式，达到期望的效果。 通过自定义DataGrid控件，可以根据实际需求对其进行扩展和修改，以满足特定的业务需求。由于WPF提供了强大的样式、模板和继承机制，因此可以轻松地自定义DataGrid控件，并且可以实现高度的灵活性和可扩展性。这样，可以根据项目的需求和用户的喜好来创建独特的、具有个性化的DataGrid控件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值