devbox
小舞很执着
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：小舞很执着 | 2024-08-11 11:30:35

赞

踩

handycontrol

文章目录

前言

我学了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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
namespace HandyControlDemo.UserControl
{
    public partial class TextDialog
    {
        public TextDialog()
        {
            InitializeComponent();
        }
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

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

代码调用

按钮加个显示就可以了

Dialog.Show(new TextDialogView());

  • 1

使用效果

在这里插入图片描述

异步回调

虽然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>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
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; }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
方法调用
        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);
        }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
显示结果

在这里插入图片描述

取消弹窗

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>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
TextDialogView.xaml.cs
    /// <summary>
    /// TextDialogView.xaml 的交互逻辑
    /// </summary>
    public partial class TextDialogView
    {
        public TextDialogView()
        {
            InitializeComponent();
            //将本身指针传给ViewModel
            (this.DataContext as TextDialogViewModel).TextDialogView = this;
        }
    }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
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; }


 }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56

运行结果

在这里插入图片描述

方法设计

Uniapp 将界面交互分为

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

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

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

代码封装

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

在这里插入图片描述

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

gclove2000 / WPF HandyControl 交互

静态方法

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

运行结果

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小舞很执着/article/detail/963880
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号