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

謡云襄

已于 2024-01-06 19:22:26 修改

阅读量2.5k

点赞数 9

分类专栏： WPF 文章标签： wpf ui c#

于 2023-10-02 16:05:01 首次发布

本文链接：https://blog.youkuaiyun.com/XcommandStudio/article/details/133492485

版权

文章目录

一、概要

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

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

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

实现效果展示：
退出实现效果展示
演示GIF

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

快速通道：下载链接

二、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

最低0.47元/天解锁文章