1. Toy模板网首页
  2. > Toy博客

【WPF】消息蒙版弹窗UI以及await实现等待反馈（popup）

10月前 作者：XcommandStudio 分类：Toy博客 阅读(44) 违法举报

这篇具有很好参考价值的文章主要介绍了【WPF】消息蒙版弹窗UI以及await实现等待反馈（popup）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、概要

原版的消息框太丑？不喜欢？如果您对原版消息框的外观不太满意，或者不符合您的应用程序的需求，那么可以通过自定义消息框来实现所需的外观和功能。

原版的消息框：
wpf popup,WPF,wpf,ui,c#
可以看出这个消息框可能和你设计的UI界面格格不入
自定义消息框可以实现各种风格和布局的效果。
下面我展示一个B端设计的消息框界面
wpf popup,WPF,wpf,ui,c#
那么我们如何做到类似的效果呢？

  • 构思背景遮罩逻辑
  • 制作UI界面（遮罩+Popup）
  • Cs后端弹窗实现（Await）

实现效果展示：
wpf popup,WPF,wpf,ui,c#
wpf popup,WPF,wpf,ui,c#

其中，按钮颜色、文本，图标等都可以通过自定义。

快速通道：下载链接

二、UI制作流程

下面我们一步一步制作这个弹窗。

1.遮罩逻辑

首先是背景层：
背景层是一个半透明的遮罩蒙版。

<Grid x:Name="MessageGridBox" Visibility="Collapsed">
    <Border Background="White" Opacity="0.8" CornerRadius="5"/>
	<!--这里放消息框的部分--!/>


	<!--这里放消息框的部分--!/>
</Grid>

效果就是一块蒙版挡住用户其他使用区域。（当然你也可以选择不挡着或者设计逻辑选择性挡住或者不挡住，挡住的话可以防止用户不处理这个消息就去其他操作。）
这里的CornerRadius="5"可以改为自己的主界面的圆角，当然也可以不设置。

2.Popup展示层

中间层是Popup展示层：
为了让消息框弹出不那么突兀，使用了Popup的Fade展示效果显示。

<Popup x:Name="MessageGridPopup" PopupAnimation="Fade" Placement="Center" AllowsTransparency="True" StaysOpen="True">
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center" MaxWidth="450" MaxHeight="250" MinWidth="400" MinHeight="165">
        <Grid.RowDefinitions>
            <RowDefinition Height="55"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Rectangle Grid.RowSpan="2" Fill="White" Margin="5" Opacity="1" RadiusY="5" RadiusX="5">
            <Rectangle.Effect>
                <DropShadowEffect Color="#FFBBBBBB" Direction="0" BlurRadius="10" RenderingBias="Quality" ShadowDepth="0" Opacity="0.3"></DropShadowEffect>
            </Rectangle.Effect>
        </Rectangle>
        <!--这里放消息展示内容部分--!/>


		<!--这里放消息展示内容部分--!/>
    </Grid>
</Popup>

3.消息展示层

消息展示层是核心区域，用于动态更新消息框的展示文本。
我分三个部分来介绍：

  • 标题部分
 <Grid Margin="10,0,10,0">
     <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" Margin="10,0,0,0">
         <TextBlock x:Name="MessageIconQ" Text="&#xe743;" FontFamily="{DynamicResource Iconfont}" FontSize="22" VerticalAlignment="Center" Margin="10"/>
         <TextBlock x:Name="MessageIconC" Text="&#xe623;" FontFamily="{DynamicResource Iconfont}" FontSize="22" VerticalAlignment="Center" Margin="10" Visibility="Collapsed"/>
         <TextBlock  x:Name="MessageTitleBox" Text="标题显示" FontFamily="{DynamicResource BlodFont}" FontSize="15" VerticalAlignment="Center"/>
     </StackPanel>
     <Button HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,20,10" FontSize="22" Style="{DynamicResource wdButton}" Click="CancelBtn_Click">
         <Button.Content>
             <TextBlock FontFamily="{DynamicResource Iconfont}" Text="&#xe620;"/>
         </Button.Content>
     </Button>
 </Grid>
  • 内容区域
 <StackPanel Grid.RowSpan="2" Margin="10">
     <TextBlock x:Name="MessageContentBox" Margin="50,60,50,80" TextWrapping="Wrap" Text="消息框测试" FontSize="14" FontFamily="{DynamicResource RegularFont}"/>
 </StackPanel>
  • 按钮部分
 <StackPanel Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="10" >
     <Button x:Name="CancelBtn" Content="取消" Style="{DynamicResource wButton}" Width="100" FontSize="15" Height="35" Margin="10" Click="CancelBtn_Click"/>
     <Button x:Name="ConfirmBtn" Content="确定" Style="{DynamicResource mButton}" Width="100" FontSize="15" Height="35" Margin="10" Click="ConfirmBtn_Click"/>
 </StackPanel>

按钮还可以继续增加，逻辑我就不赘述了，可以看后面的代码研究一下。

值得注意的是：这里的Style是我自己做的，你也可以更换为自己的按钮样式，如果有需要可以后台私信我。除了底层逻辑，这些样式都可以自己自定义。

三、C#后端代码逻辑

1. 定义变量

首先定义一个TaskCompletionSource<bool> 命名taskCompletionSource，当然名字可以自己改。

private TaskCompletionSource<bool> taskCompletionSource;
#这段内容需要全局变量哦

2. 定义函数

写一个显示消息框的函数，注意函数需要async才支持等待用户回复。

private async Task<bool> ShowMessageGridBoxAsync(string MessageContent,string title,bool isconfirm = true, int ButtonIndex=0)
{
	 /// <summary>
	 /// 参数分别是 
	 /// MessageContent 信息内容
	 /// title 信息标题
	 /// isconfirm 是否确认按钮（判断Icon情况）
	 /// ButtonIndex 按钮类型
	 /// </summary>	
	//#我这里的后两个参数带默认值，所以可以直接简化写。

	//#展示消息框
	MessageGridBox.Visibility = Visibility.Visible;
	MessageTitleBox.Text = title;
	MessageContentBox.Text = MessageContent;  
	//#上面这些比较简单就不赘述了。分别赋值进去。
	
	//#重新赋值一个 taskCompletionSource 让其重置。
	taskCompletionSource = new TaskCompletionSource<bool>();

	//#判断ICON 其中MessageIconC是确认的ICON，MessageIconQ是询问的ICON
    if (isconfirm)
    {
        CancelBtn.Visibility = Visibility.Collapsed;
        MessageIconC.Visibility = Visibility.Visible; 
        MessageIconQ.Visibility = Visibility.Collapsed;
    }
    else
    {
        CancelBtn.Visibility = Visibility.Visible;
        MessageIconC.Visibility = Visibility.Collapsed; 
        MessageIconQ.Visibility = Visibility.Visible;
    }
      
	//#判断按钮的类型
	switch (ButtonIndex)
	{
	    case 0:
	        ConfirmBtn.SetValue(Button.StyleProperty, Application.Current.Resources["mButton"]);
	        ConfirmBtn.Content = "确认";
	        break;
	    case 1:
	        ConfirmBtn.SetValue(Button.StyleProperty, Application.Current.Resources["RButton"]);
	        ConfirmBtn.Content = "删除";
	        System.Media.SystemSounds.Exclamation.Play();
	        break;
	    case 2:
	        ConfirmBtn.SetValue(Button.StyleProperty, Application.Current.Resources["RButton"]);
	        ConfirmBtn.Content = "确认";
	        System.Media.SystemSounds.Exclamation.Play();
	        break;
	    case 3:
	        ConfirmBtn.SetValue(Button.StyleProperty, Application.Current.Resources["RButton"]);
	        ConfirmBtn.Content = "重试";
	        System.Media.SystemSounds.Exclamation.Play();
	        break;
	    case 4:
	        ConfirmBtn.SetValue(Button.StyleProperty, Application.Current.Resources["mButton"]);
	        ConfirmBtn.Content = "我知道了";
	        break;
	}
	
	//#这里写了4个类型，你可以再自定义更多

	//#这里要先关闭再打开！不然动态效果就没了。
	MessageGridPopup.IsOpen = false;
	MessageGridPopup.IsOpen = true;
	
	//#等待Task用户操作
	await taskCompletionSource.Task;

	//#操作后隐藏遮罩与Popup
	MessageGridBox.Visibility = Visibility.Collapsed;
	MessageGridPopup.IsOpen = false;
	
	//#返回Task的Result
	return taskCompletionSource.Task.Result;
}

3.写按钮按下的逻辑

 private void ConfirmBtn_Click(object sender, RoutedEventArgs e)
 {
     // 设置任务结果为true，并标记任务为已完成
     taskCompletionSource.SetResult(true);
 }

 private void CancelBtn_Click(object sender, RoutedEventArgs e)
 {
     // 设置任务结果为false，并标记任务为已完成
     taskCompletionSource.SetResult(false);
 }

4.如何调用这个函数

确认框情况

ShowMessageGridBoxAsync("-欢迎使用-", "欢迎：");

需要判断的情况

bool result = await ShowMessageGridBoxAsync("寻找不到该文件，是否删除？", "错误：", false, 1);
//这里的1是删除按钮哦，可以看前面的定义

四、技术细节/常见错误

  1. 消息框初始化需要关闭状态。不然会出错哦
  2. Popup的StaysOpen="True"，不然点击其他地方就自动关闭了，然后就会剩下遮罩无法操作
  3. Popup和Grid都需要在用户操作完后隐藏！
  4. 在调用需要await的情况，所在函数需要支持async才可以，
    “await”运算符只能用于异步方法中。请考虑用“async"修饰符标记此方法。

举个例子：

private async void DeleteButton_Click(object sender, RoutedEventArgs e)
{ 
    bool result = await ShowMessageGridBoxAsync("点击删除后记录将被删除，该操作不可逆。", "确认要删除这条记录么？", false, 1);    
    if (result)
    {
    	//按钮逻辑
    }   
}

五、小结/完整代码

Xml部分

<Grid x:Name="MessageGridBox" Visibility="Collapsed">
    <Border Background="White" Opacity="0.8" CornerRadius="5"/>
    <Popup x:Name="MessageGridPopup" PopupAnimation="Fade" Placement="Center" AllowsTransparency="True" StaysOpen="True">
        <Grid HorizontalAlignment="Center" VerticalAlignment="Center" MaxWidth="450" MaxHeight="250" MinWidth="400" MinHeight="165">
            <Grid.RowDefinitions>
                <RowDefinition Height="55"/>
                <RowDefinition />
            </Grid.RowDefinitions>
            <Rectangle Grid.RowSpan="2" Fill="White" Margin="5" Opacity="1" RadiusY="5" RadiusX="5">
                <Rectangle.Effect>
                    <DropShadowEffect Color="#FFBBBBBB" Direction="0" BlurRadius="10" RenderingBias="Quality" ShadowDepth="0" Opacity="0.3"></DropShadowEffect>
                </Rectangle.Effect>
            </Rectangle>                        
            <Grid Margin="10,0,10,0">
                <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" Margin="10,0,0,0">
                    <TextBlock x:Name="MessageIconQ" Text="&#xe743;" FontFamily="{DynamicResource Iconfont}" FontSize="22" VerticalAlignment="Center" Margin="10"/>
                    <TextBlock x:Name="MessageIconC" Text="&#xe623;" FontFamily="{DynamicResource Iconfont}" FontSize="22" VerticalAlignment="Center" Margin="10" Visibility="Collapsed"/>
                    <TextBlock  x:Name="MessageTitleBox" d:Text="标题显示" FontFamily="{DynamicResource BlodFont}" FontSize="15" VerticalAlignment="Center"/>
                </StackPanel>
                <Button HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,20,10" FontSize="22" Style="{DynamicResource wdButton}" Click="CancelBtn_Click">
                    <Button.Content>
                        <TextBlock FontFamily="{DynamicResource Iconfont}" Text="&#xe620;"/>
                    </Button.Content>
                </Button>
            </Grid>
            <StackPanel Grid.RowSpan="2" Margin="10">
                <TextBlock x:Name="MessageContentBox" Margin="50,60,50,80" TextWrapping="Wrap" Text="消息框测试" FontSize="14" FontFamily="{DynamicResource RegularFont}"/>
            </StackPanel>
            <StackPanel Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="10" >
                <Button x:Name="CancelBtn" Content="取消" Style="{DynamicResource wButton}" Width="100" FontSize="15" Height="35" Margin="10" Click="CancelBtn_Click"/>
                <Button x:Name="ConfirmBtn" Content="确定" Style="{DynamicResource mButton}" Width="100" FontSize="15" Height="35" Margin="10" Click="ConfirmBtn_Click"/>
            </StackPanel>
        </Grid>
    </Popup>
</Grid>

C#部分

namespace Pro
{
	public partial class MainWindow : Window
	{
		private TaskCompletionSource<bool> taskCompletionSource;
		/// <summary>
		/// 参数分别是 
		/// MessageContent 信息内容
		/// title 信息标题
		/// isconfirm 是否确认按钮（判断Icon情况）
		/// ButtonIndex 按钮类型
		/// </summary>	
		private async Task<bool> ShowMessageGridBoxAsync(string MessageContent,string title,bool isconfirm = false, int ButtonIndex=0)
		{
			 
			//#我这里的后两个参数带默认值，所以可以直接简化写。
		
			//#展示消息框
			MessageGridBox.Visibility = Visibility.Visible;
			MessageTitleBox.Text = title;
			MessageContentBox.Text = MessageContent;  
			//#上面这些比较简单就不赘述了。分别赋值进去。
			
			//#重新赋值一个 taskCompletionSource 让其重置。
			taskCompletionSource = new TaskCompletionSource<bool>();
		
			//#判断ICON 其中MessageIconC是确认的ICON，MessageIconQ是询问的ICON
		    if (isconfirm)
		    {
		        CancelBtn.Visibility = Visibility.Collapsed;
		        MessageIconC.Visibility = Visibility.Visible; 
		        MessageIconQ.Visibility = Visibility.Collapsed;
		    }
		    else
		    {
		        CancelBtn.Visibility = Visibility.Visible;
		        MessageIconC.Visibility = Visibility.Collapsed; 
		        MessageIconQ.Visibility = Visibility.Visible;
		    }
		      
			//#判断按钮的类型
			switch (ButtonIndex)
			{
			    case 0:
			        ConfirmBtn.SetValue(Button.StyleProperty, Application.Current.Resources["mButton"]);
			        ConfirmBtn.Content = "确认";
			        break;
			    case 1:
			        ConfirmBtn.SetValue(Button.StyleProperty, Application.Current.Resources["RButton"]);
			        ConfirmBtn.Content = "删除";
			        System.Media.SystemSounds.Exclamation.Play();
			        break;
			    case 2:
			        ConfirmBtn.SetValue(Button.StyleProperty, Application.Current.Resources["RButton"]);
			        ConfirmBtn.Content = "确认";
			        System.Media.SystemSounds.Exclamation.Play();
			        break;
			    case 3:
			        ConfirmBtn.SetValue(Button.StyleProperty, Application.Current.Resources["RButton"]);
			        ConfirmBtn.Content = "重试";
			        System.Media.SystemSounds.Exclamation.Play();
			        break;
			    case 4:
			        ConfirmBtn.SetValue(Button.StyleProperty, Application.Current.Resources["mButton"]);
			        ConfirmBtn.Content = "我知道了";
			        break;
			}
			
			//#这里写了4个类型，你可以再自定义更多
		
			//#这里要先关闭再打开！不然动态效果就没了。
			MessageGridPopup.IsOpen = false;
			MessageGridPopup.IsOpen = true;
			
			//#等待Task用户操作
			await taskCompletionSource.Task;
		
			//#操作后隐藏遮罩与Popup
			MessageGridBox.Visibility = Visibility.Collapsed;
			MessageGridPopup.IsOpen = false;
			
			//#返回Task的Result
			return taskCompletionSource.Task.Result;
		}
		 private void ConfirmBtn_Click(object sender, RoutedEventArgs e)
		 {
		     // 设置任务结果为true，并标记任务为已完成
		     taskCompletionSource.SetResult(true);
		 }
		
		 private void CancelBtn_Click(object sender, RoutedEventArgs e)
		 {
		     // 设置任务结果为false，并标记任务为已完成
		     taskCompletionSource.SetResult(false);
		 }

		private async void DeleteButton_Click(object sender, RoutedEventArgs e)
		{ 
		    bool result = await ShowMessageGridBoxAsync("点击删除后记录将被删除，该操作不可逆。", "确认要删除这条记录么？", false, 1);    
		    if (result)
		    {
		    	ShowMessageGridBoxAsync("-你点击了删除-", "提示：");
		    }else
		    {
		    	ShowMessageGridBoxAsync("-你点击了取消-", "提示：");
		    }		    
		}
	}
}

感谢观看，代码还有需要完善的地方，欢迎指正。文章来源地址https://www.toymoban.com/news/detail-768859.html

到了这里，关于【WPF】消息蒙版弹窗UI以及await实现等待反馈（popup）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 自动化测试-web（弹窗/滚动条/鼠标/等待等操作）

    自动化测试-web（弹窗/滚动条/鼠标/等待等操作）

    为什么要处理弹窗？ 如果页面操作过程中，有弹窗出现，不处理，无法继续对页面操作。 弹窗类型： js原生弹窗： 警告框、输入框、提示框，这些必须处理 如何处理： 1）获取弹窗对象 2）点击同意或取消方法 alert 弹窗 ：只有信息及确认按钮 confirm弹窗 ：在alert弹窗基础上

    2024年04月15日
    浏览(44)
  • async/await 致WPF卡死问题

    async/await 致WPF卡死问题

    问题代码： xmal：一个按钮+一个显示框   cs：点击按钮，显示结果 Button_Click事件处理中获取异步方法getResult的结果， getResult只是简单等待1s后返回结果，却并没有如预期返回。 分析： getResult中遇到await后，主线程返回等待结果，await处异步线程执行完之后，后面的任务仍交由

    2024年02月08日
    浏览(36)

  • Vue+Element UI弹窗实现表格编辑

    点击编辑按钮弹出Dialog js如下 时间格式化 3.1 方法一

    2024年02月12日
    浏览(42)

  • Jetpack Compose UI 底部弹窗实现

    使用Compose Ui的Dialog 默认是居中显示屏幕中间。 实现思路： 1.弹窗完全自定义一个全屏弹窗； 2.显示内容显示在底部区域。 3.点击其他空白区域关闭弹窗。

    2024年02月11日
    浏览(54)

  • WPF 实现 Message 消息提醒控件

    WPF 实现 Message 消息提醒控件 控 件：Message 作 者：WPFDevelopersOrg - 驚鏵 原文链接：https://github.com/WPFDevelopersOrg/WPFDevelopers 框架使用 .NET4 至 .NET6 ； Visual Studio 2022 ; 接着上一篇 1）新增 MessageListBoxItem.cs 代码如下: 新增了名为 MessageType 的依赖属性，类型为 MessageBoxImage ，默认值为

    2024年02月16日
    浏览(35)

  • wpf 异步等待框

    在WPF中，你可以使用异步任务和UI线程分离的方式来创建一个等待框，以便在后台执行任务时显示一个等待消息或进度条。这有助于保持应用程序的响应性。你可以使用Task和async/await来实现异步操作，并使用WPF的控件来显示等待消息或进度。 以下是一个简单的示例，展示如何

    2024年02月07日
    浏览(39)
  • 【uniapp】 实现公共弹窗的封装以及调用

    【uniapp】 实现公共弹窗的封装以及调用

    图例：红框区域为 “ 内容区域 ”      希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~

    2024年02月10日
    浏览(45)

  • 在vue中实现多个文件下载&&element ui 实现弹窗

    后端返回多个URL，前端直接点击下载 1.1 window.open let url = “xxx”; window.open(url) 在新窗口打开该下载链接，只能打开一个，多个文件下载不支持 1.2 iframe方法 使用iframe方法（此方法浏览器会跳出弹窗，是否允许下载多个文件，用户体验不好） 1.3 使用a标签 使用a标签（不用点允

    2023年04月09日
    浏览(37)
  • Android逆向学习（四）app修改smali函数跳过弹窗广告，等待广告，更新提醒

    Android逆向学习（四）app修改smali函数跳过弹窗广告，等待广告，更新提醒

    这是吾爱破解课程的第三个练习，我在写这篇博客时遇到了vscode插件bug，已经想办法联系原作者了，希望能够尽快更新修复这个问题，废话少说let’s go 打开后会出现一个带有时间的广告弹窗和一大堆弹出广告，我们的任务就是去掉这些东西 我们首先打开开发助手的activity查

    2024年02月09日
    浏览(43)
  • 进一步了解WPF UI 实现XAML语法

    进一步了解WPF UI 实现XAML语法

    Extensible Application Markup Language (XAML) 是一种用于声明性应用程序编程的标记语言。 Windows Presentation Foundation (WPF) 实现 XAML 处理器实现并提供 XAML 语言支持。 WPF 类型的实现为 XAML 表示提供了必要的类型支持，从而确保了顺畅的集成和高效的运行。 在 XAML 标记中创建 WPF 应用程序

    2024年02月02日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包