WPF HandyControl 界面交互反馈:对话框+加载框+列表选择

最新推荐文章于 2024-04-21 19:01:40 发布
最新推荐文章于 2024-04-21 19:01:40 发布
阅读量1.5k 收藏 22
点赞数 21
分类专栏： WPF 入门知识 文章标签： wpf 交互
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44695769/article/details/135651474
版权

文章目录

前言

我学了HandyControl的基础使用，但是发现HandyControl 封装了基础的消息提示，但是没有封装基础的交互逻辑。可能是因为我写了Uniapp，我知道封装了基础的交互其实一般就够用了。

Uniapp 界面交互反馈

我现在觉得，代码要低耦合一点，每个模块都纯粹一点，这一次我就不添加Nlog日志打印了。

仓库地址

因为最后代码比较多，我就放在仓库里了

gclove2000 / WPF HandyControl 交互

相关链接

HandyControl Github地址

HandyControl 官方中文文档

WPF-UI HandyControl 简单介绍

WPF-UI HandyControl 控件简单实战+IconPacks矢量图导入

WPF 消息日志打印帮助类：HandyControl+NLog+彩色控制台打印+全局异常捕捉

HandyControl使用

HandyControl Dialog 对话框

顺便再装一个CommunityToolkit.MVVM

在这里插入图片描述

官方Demo使用

在这里插入图片描述

<Border x:Class="HandyControlDemo.UserControl.TextDialog"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:langs="clr-namespace:HandyControlDemo.Properties.Langs"
        xmlns:ex="clr-namespace:HandyControlDemo.Tools.Extension"
        xmlns:hc="https://handyorg.github.io/handycontrol"
        CornerRadius="10"
        Width="400"
        Height="247"
        Background="{DynamicResource RegionBrush}">
    <hc:SimplePanel>
        <TextBlock Style="{StaticResource TextBlockLargeBold}" Text="{ex:Lang Key={x:Static langs:LangKeys.PleaseWait}}"/>
        <Button Width="22" Height="22" Command="hc:ControlCommands.Close" Style="{StaticResource ButtonIcon}" Foreground="{DynamicResource PrimaryBrush}" hc:IconElement.Geometry="{StaticResource ErrorGeometry}" Padding="0" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,4,4,0"/>    
    </hc:SimplePanel>
</Border>

namespace HandyControlDemo.UserControl
{
    public partial class TextDialog
    {
        public TextDialog()
        {
            InitializeComponent();
        }
    }
}

我现在才知道，原来想要弹窗的边框为圆角，要将UserControl改为Border
在这里插入图片描述

代码调用

按钮加个显示就可以了

Dialog.Show(new TextDialogView());

使用效果

在这里插入图片描述

异步回调

虽然HandyControl实现了这个功能，但是文档写的很少
在这里插入图片描述
在这里插入图片描述

没办法继续下去了，只能进代码里面看看了
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

代码实现

TextDialogView.xaml
<Border x:Class="WpfApp1.Views.TextDialogView"
        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:WpfApp1.Views"
        xmlns:hc="https://handyorg.github.io/handycontrol"
        xmlns:ViewModels="clr-namespace:WpfApp1.ViewModels"
        Width="400"
        Height="247"
        CornerRadius="20"
        Background="{DynamicResource RegionBrush}"
        mc:Ignorable="d">
    <Border.DataContext>
        <ViewModels:TextDialogViewModel />
    </Border.DataContext>
    <hc:SimplePanel>
        <StackPanel VerticalAlignment="Center">
            <TextBlock Style="{StaticResource TextBlockLargeBold}"
                       Text="消息提示" />
            <TextBox Text="{Binding TestContent}"
                     hc:InfoElement.Placeholder="请输入文本"
                     Style="{StaticResource TextBoxExtend}"  />
        </StackPanel>

        <Button Width="22"
                Height="22"
                Command="hc:ControlCommands.Close"
                Style="{StaticResource ButtonIcon}"
                Foreground="{DynamicResource PrimaryBrush}"
                hc:IconElement.Geometry="{StaticResource ErrorGeometry}"
                Padding="0"
                HorizontalAlignment="Right"
                VerticalAlignment="Top"
                Margin="0,4,4,0" />
    </hc:SimplePanel>

</Border>
TextDialogView.xaml.cs
 public partial class TextDialogViewModel : ObservableObject, IDialogResultable<string>
{

    [ObservableProperty]
    private string testContent = "";

    public TextDialogViewModel()
    {

    }

    /// <summary>
    /// 这个是回调的结果
    /// </summary>
    public string Result
    {
        get => TestContent; set
        {
            TestContent = value;
        }
    }
    /// <summary>
    /// 这个暂时我不知道有啥用
    /// </summary>
    public Action CloseAction { get; set; }
}
方法调用
        public RelayCommand ShowTextDialogBtn => new RelayCommand(async()=> await ShowText() );


        private async Task ShowText()
        {
            var res = await Dialog.Show<TextDialogView>()
            .Initialize<TextDialogViewModel>(vm => vm.TestContent = "")
            .GetResultAsync<string>();
            MessageBox.Show(res);
        }
显示结果

在这里插入图片描述

取消弹窗

HandyControl给了我们两个取消弹窗的方式

方法1：直接取消

在这里插入图片描述

方法2：接口调用

在这里插入图片描述

在这里插入图片描述

C#调用线程必须为 STA，因为许多 UI 组件都需要。

如果出现了以下问题，要注意窗口线程是不能开启新的线程的

C#调用线程必须为 STA，因为许多 UI 组件都需要。

在这里插入图片描述

遮罩点击

我找了一天了，还是没找到方法

【WPF】查找父/子控件（元素、节点）

How could I close a Interactive Dialog when clicking outside #1272

哎，看起来还是得用点奇技淫巧

设计思路
DialogView
点击
IsClick为True
松开
IsClick为False
移出控件
Dialog触发Click
背景点击

额，可能说的比较复杂。简单来说就是背景点击的时候，对话框没点击，那就是外侧点击了。

代码逻辑

TextDialogView.xaml
<Border x:Class="WpfApp1.Views.TextDialogView"
        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:WpfApp1.Views"
        xmlns:hc="https://handyorg.github.io/handycontrol"
        xmlns:ViewModels="clr-namespace:WpfApp1.ViewModels"
        Width="400"
        Height="247"
        CornerRadius="20"
        
        Background="{DynamicResource RegionBrush}"
        mc:Ignorable="d">
    <Border.DataContext>
        <ViewModels:TextDialogViewModel />
    </Border.DataContext>
    <hc:SimplePanel>
        <StackPanel VerticalAlignment="Center">
            <TextBlock Style="{StaticResource TextBlockLargeBold}"
                       Text="消息提示" />
            <TextBox Text="{Binding TestContent}"
                     hc:InfoElement.Placeholder="请输入文本"
                     Style="{StaticResource TextBoxExtend}"  />
        </StackPanel>

        <Button Width="22"
                Height="22"
                Command="hc:ControlCommands.Close"
                Style="{StaticResource ButtonIcon}"
                Foreground="{DynamicResource PrimaryBrush}"
                hc:IconElement.Geometry="{StaticResource ErrorGeometry}"
                Padding="0"
                HorizontalAlignment="Right"
                VerticalAlignment="Top"
                Margin="0,4,4,0" />
    </hc:SimplePanel>

</Border>
TextDialogView.xaml.cs
    /// <summary>
    /// TextDialogView.xaml 的交互逻辑
    /// </summary>
    public partial class TextDialogView
    {
        public TextDialogView()
        {
            InitializeComponent();
            //将本身指针传给ViewModel
            (this.DataContext as TextDialogViewModel).TextDialogView = this;
        }
    }
TextDialogViewModel
 public partial class TextDialogViewModel : ObservableObject, IDialogResultable<string>
 {

     [ObservableProperty]
     private string testContent = "";

     public bool IsClick { get; set; }

     private TextDialogView textDialogView;

     /// <summary>
     /// 拿到TextDialogView的时候，添加点击函数
     /// </summary>
     public TextDialogView TextDialogView
     {
         get => textDialogView;
         set
         {
             textDialogView = value;
             textDialogView.MouseLeftButtonDown += (sender, e) =>
             {
                 IsClick = true;
             };
             textDialogView.MouseLeftButtonUp += (sender, e) =>
             {
                 IsClick = false;
             };
             textDialogView.MouseLeave += (sender, e) =>
             {
                 IsClick = false;
             };
         }
     }

     public TextDialogViewModel()
     {

     }

     /// <summary>
     /// 这个是回调的结果
     /// </summary>
     public string Result
     {
         get => TestContent; set
         {
             TestContent = value;
         }
     }
     /// <summary>
     /// 这个暂时我不知道有啥用
     /// </summary>
     public Action CloseAction { get; set; }


 }

运行结果

在这里插入图片描述

方法设计

Uniapp 将界面交互分为

  • 消息提示
  • 加载
  • 输入框
  • 列表选择

这个其实已经包含了大部分的交互内容了，如果想自定义，可以自己去研究一下。由于HandyControl已经封装了消息控件了，拿我们就封装另外三个功能了。

在这里插入图片描述
在这里插入图片描述

代码封装

由于代码比较复杂，我这里就放我的设计思路了。

在这里插入图片描述

我把详细的代码放在Gtiee仓库里面了

gclove2000 / WPF HandyControl 交互

静态方法

我把交互改成了静态的方法。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

运行结果

在这里插入图片描述

龙中舞王
关注
  • 21
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF:自定义Metro样式文件夹选择对话框FolderBrowserDialog
07-20
WPF:自定义Metro样式文件夹选择对话框FolderBrowserDialog
HandyControl WPF第三方组件库，demo
08-21
HandyControl WPF第三方组件库，demo
探索未来界面设计：HandyControl - 为开发者打造的强大UI库
gitblog_00034的博客
03-21 441
探索未来界面设计：HandyControl - 为开发者打造的强大UI库 项目地址:https://gitcode.com/HandyOrg/HandyControl 在软件开发的世界里，用户体验往往是成功的关键。而一个好的用户界面（UI）则是构建卓越体验的基石。今天，我们要介绍的是一个名为HandyControl的开源项目，它为.NET Framework和.NET Core开发者提供了一套强...
探索 HandyControl：一款高效、易用的 WinForm UI 控件库
gitblog_00035的博客
03-21 482
探索 HandyControl：一款高效、易用的 WinForm UI 控件库 项目地址:https://gitcode.com/NaBian/HandyControl 在开发 Windows 应用程序时，选择一个功能丰富、设计美观的 UI 控件库是提升用户体验的关键。今天，我们要介绍的 HandyControl 正是一款专为 .NET Framework 的 WinForms 平台打造的强大控件...
WPF仿网易云搭建笔记(7):HandyControl重构
qq_44695769的博客
12-19 1468
最近我发现Material Design UI的功能比较简单，想实现一些比较简单的功能，比如消息提示，发现还是需要额外的代码。写起来相对来说还是比较麻烦的。HandyControl相对来说就简单多了，本身提供了80多个控件，基本大部分功能都能实现。
handy-master 源码
05-01
handy-master 源码 资源完整 内有详细资源 完整代码 to
HandyControl-master_c＃界面_HandyControl_wpf控件库_
10-01
c# 开源控件库，组件丰富，功能齐全，风格简约。没有合适的WPF框架的话，不妨尝试一下
C# WPF开源控件库HandyControl用法举例
寒冰屋的专栏
09-30 9591
HandyControl是一款免费开源的WPF控件库，Github可以获取到源代码，相关的示例代码也在github上能获取到，但是没有详细的中文说明文档，对于新手而言使用起来还是会有一些困扰，网上也很难搜到相关的用法示例，所以本节就对它常用的一些控件举例说明下。
WPF【三】 Handycontrol（WPF UI框架）应用步骤详解
weixin_44718038的博客
10-18 2920
加入前加入后。
手把手教你如何使用HandyControl，一款开源WPF控件神器
热门推荐
qqwe13的专栏
12-23 3万+
1.首先创建你的WPF工程 2.从Nuget中安装HandyControl VS2017默认已经集成Nuget包管理工具，直接搜索  HandyControl  安装即可 3.在App.xaml中加入如下代码 &lt;ResourceDictionary&gt; &lt;ResourceDictionary.MergedDictionaries&gt; ...
1、初遇HandyControl
roujian0985的博客
03-10 4880
wpf HandyControl安装配置及简单使用
WPF UI HandyControl 源码
08-18
WPF开源UI控件库源码
wpf切换tab+的加载动画 Loding
02-03
wpf切换tab+的加载动画 Loding
Handy Lynx Emulator-开源
05-02
“ Handy”是适用于Windows 95/98 / NT / 2000 / XP的Atari Lynx模拟器
node-handy-http
05-17
NodeJS方便的http [s]客户端 Handy-http模块为NodeJS本机http.request提供了简单灵活的界面。 描述 如果您只需要几行代码就可以进行各种类型的http请求，则该类非常轻巧。 在我的项目中，它可以避免粘贴粘贴，并使代码更具可读性和可维护性。 类提供了“打开”方法，该方法将连接对象作为第一个参数，并将回调函数作为第二个参数。 它返回可以侦听来自原始各种事件的请求对象。 主要特点： 接受各种类型的数据，以将它们从普通的javascript对象发送到NodeJS Buffer和ReadableStream。 能够发送带有“ multipart / form-data” Content-Type标头的多个文件 如果服务器正确响应Content-Type标头，则返回已解析的JSON对象 支持代理请求 提供扩展请求标头的功能 支持https协议 例子 var H
C#+wpf界面源码框架
03-28
C#+wpf界面源码框架，总结运动控制路径算法而写，控件源码+模板源码，分享给想入行的朋友们，引你快速入行，大神略过,可用于激光切割，雕刻机，分板机，点胶机，插件机等。
HandyControl：包含一些简单且常用的WPF控件
02-05
:red_heart: 面向中国 码云 中文文档 赞助 扫码入群 西江月群 定风波群 群号码 二维码 为我们购买防脱洗发水（支付宝扫码） 贡献者 支持者 特别感谢 使用HandyControl的项目 如果您的项目未在此处列出，请告诉我们！ :grinning_face: 用法 步骤1：添加对HandyControl的引用，或在nuget上搜索HandyControl； Install-Package HandyControl 步骤2：在App.xaml中添加代码，如下所示： < Application> < ResourceDictionary> < ResourceDictiona
基于WPF+sqllite+.net core3.0开发的权限系统+插件框架
12-05
主要包括+用户设置，权限设置，角色设置，菜单设置，模块设置...可以自定义的类库进行扩展和加载载自定义扩展界面。在校生可以毕业设计引用该框架进行二次开发，来对自己的系统进行扩展。在实际开发项目中也可以使用。
springboot结合elasticJob
最新发布
hguhbh的博客
04-21 1191
应用程序启动时，在其内嵌的elastic-job-lite组件会向zookeeper注册该实例的信息，并触发选举，从众多实例中选举出一个leader，让其执行任务。App：应用程序，内部包含任务调度业务逻辑和Elastic-job-Lite组件，其中执行任务需要实现ElasticJob接口完成与Elastic-job-Lite组件的集成，并进行任务的相关配置。无中心化，是指没有调度中心这一概念，每个运行在集群中的作业都是对等的，各个作业节点是自治的、平等的、节点直接通过注册中心进行分布式协调。
wpf handycontrol mvvm分页
05-14
以下是实现 WPF HandyControl MVVM 分页的步骤： 1. 添加依赖项 在项目中添加以下依赖项： - WPF HandyControl - Prism.Core - Prism.Wpf 2. 创建 ViewModel 创建一个 ViewModel，其中包含以下属性： - TotalItems：总项目数 - PageSize：每页显示的项目数 - CurrentPage：当前页码 - TotalPages：总页数 还应该有以下命令： - FirstCommand：将当前页码设置为第一页 - PreviousCommand：将当前页码减一 - NextCommand：将当前页码加一 - LastCommand：将当前页码设置为最后一页 3. 创建 View 创建一个 View，其中包含以下元素： - 一个 TextBlock，显示当前页码和总页数 - 一个 Button，用于执行 FirstCommand - 一个 Button，用于执行 PreviousCommand - 一个 Button，用于执行 NextCommand - 一个 Button，用于执行 LastCommand 4. 绑定数据 在 View 中绑定 ViewModel 的属性和命令，以便在用户与 View 交互时更新它们。 5. 实现分页逻辑 在 ViewModel 中实现分页逻辑。在 FirstCommand、PreviousCommand、NextCommand 和 LastCommand 中更新 CurrentPage 的值，并重新计算 TotalPages 的值。在 TotalItems、PageSize 和 CurrentPage 的值更改时，还应该更新 TotalPages 的值。 6. 显示分页数据 在 View 中使用 HandyControl 的 DataPager 控件来显示分页数据。将 DataPager 的 ItemsSource 属性绑定到 ViewModel 中的项目集合，并将 DataPager 的 PageSize 属性设置为 ViewModel 中的 PageSize 属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值