消息对话框是UI界面中不可或缺的组成部分，用于给用户一些提示，警告或者询问的窗口。在WPF中，消息对话框是系统原生（user32.dll）的MessageBox，无法通过Style或者Template来修改消息对话框的外观。因此，当需要一个与应用程序主题风格一致的消息对话框时，只能自己动手造轮子了。

确定“轮子”的功能

消息对话框的核心功能是向用户显示信息，并在用户对消息进行处理前中断用户的操作。根据常见的应用场景，可以梳理出以下几点功能：

  • 支持的消息类型：提示信息、警告信息、错误信息、询问信息
  • 支持的对话框类型：迷你模式（显示简要信息并自动关闭）、普通模式、完整模式（适用于消息内容分层级显示）
  • 设置消息对话框是否将触发源作为父窗体并显示遮罩层

    主要功能如下图所示：

开始造“轮子”

消息对话框本质也是一个窗体，因此首先要做的是自定义一个弹窗的样式，然后根据消息类型以及对话框类型定义相应的模板。

自定义窗口外观

标准的窗口由两个重叠的矩形组成。外部矩形是非工作区，其中包括标题栏按钮(最小化、最大化和关闭) 、窗口边框、调整大小和移动行为、应用程序图标和标题以及系统菜单。它由操作系统的窗口管理器绘制和管理。其尺寸由标准操作系统设置决定。内部矩形是工作区，也就是应用程序的内容。

自定义窗口外观主要是针对非工作区，可以通过设置属性WindowStyle为None，或者使用 WindowChrome类来自定义。这里我们使用前一种方法。

<!-- 弹出提示窗体模板 -->

<ControlTemplate x:Key="AlertDialogBaseTemplate" TargetType="{x:Type Window}">

    <Border x:Name="border" Margin="0"

            Background="White" CornerRadius="3"

            RenderTransformOrigin="0.5,0.5">

        <i:Interaction.Triggers>

            <i:EventTrigger EventName="Loaded">

                <helper:EventToCommand Command="{Binding LoadedCommand}" CommandParameter="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}" />

            </i:EventTrigger>

        </i:Interaction.Triggers>

        <Border.RenderTransform>

            <TransformGroup>

                <ScaleTransform />

            </TransformGroup>

        </Border.RenderTransform>

        <Grid>

            <Grid.RowDefinitions>

                <RowDefinition Height="Auto" />

                <RowDefinition Height="*" />

            </Grid.RowDefinitions>

            <toolkit:ImageButton Grid.Row="0" Width="16" Height="16"

                                 Margin="0,16,16,0"

                                 HorizontalAlignment="Right"

                                 VerticalAlignment="Bottom"

                                 Command="{Binding CloseWinCommand}"

                                 CommandParameter="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}"

                                 DownImage="Images/AlterDialog/btnclose_hover.png"

                                 HoverImage="Images/AlterDialog/btnclose_hover.png"

                                 NormalImage="Images/AlterDialog/btnclose.png"

                                 ToolTip="关闭"

                                 Visibility="{Binding DialogMode, Converter={helper:EnumExcludeConverter}, ConverterParameter='Mini'}" />

            <ContentPresenter Grid.Row="1" />

        </Grid>

    </Border>

</ControlTemplate>

<!-- 弹出提示窗体样式 -->

<Style x:Key="AlterDailogBaseStyle" TargetType="{x:Type view:AlterDialogWindow}" BasedOn="{StaticResource BaseWindowStyle}">

    <Setter Property="AllowsTransparency" Value="True" />

    <Setter Property="Height" Value="180" />

    <Setter Property="MaxHeight" Value="240" />

    <Setter Property="MaxWidth" Value="400" />

    <Setter Property="OverridesDefaultStyle" Value="True" />

    <Setter Property="Template" Value="{StaticResource AlertDialogBaseTemplate}" />

    <Setter Property="Topmost" Value="False" />

    <Setter Property="Width" Value="400" />

    <Setter Property="WindowState" Value="Normal" />

    <Setter Property="WindowStyle" Value="None" />

</Style>

<Style TargetType="{x:Type view:AlterDialogWindow}" BasedOn="{StaticResource AlterDailogBaseStyle}" />

上述代码中，通过把WindowStyle属性设置为None来隐藏默认的非工作区（控制区），然后再窗口的Template中定义一个两行的Grid，第一行模拟窗口非工作区的标题栏，本例中仅放一个关闭按钮。第二行则是工作区。

分享一个小小的经验：在定义AlterDialogWindow样式的时候，最后一行代码仅仅是定义了一个TargetType为view:AlterDialogWindow的样式，并且通过BasedOn继承自 x:Key="AlterDailogBaseStyle"的样式。这样做并非多此一举，而是为了方便局部需要个性化样式时最大限度地复用默认的全局样式。

自定义消息对话框模板

消息对话框整体可以划分为信息区域和交互区域两部分。信息区域呈现消息类型和消息内容，交互区域用于呈现确定和取消按钮。信息区域的布局及大小与对话框类型相关。交互区域则与消息类型以及对话框类型都有关。提示、警告、错误这三类消息是通知警示的作用，不需要用户做出YES or NO的处理，仅需要显示确定按钮即可，询问类信息则需要显示确定和取消两个按钮。迷你模式的对话框则不需显示确定和取消按钮，因此整个交互区都不显示。

根据三种类型的对话框定义三个信息区域的模板：

<DataTemplate x:Key="TemplateMini">

    <StackPanel Margin="40,15,40,15" HorizontalAlignment="Center" Orientation="Horizontal">

        <StackPanel.Resources>

            <Style TargetType="{x:Type TextBlock}">

                <Setter Property="FontSize" Value="18" />

                <Setter Property="VerticalAlignment" Value="Center" />

            </Style>

            <Style TargetType="{x:Type toolkit:SelectableTextBlock}">

                <Setter Property="FontSize" Value="18" />

                <Setter Property="VerticalAlignment" Value="Center" />

            </Style>

        </StackPanel.Resources>

        <Image Width="32" Height="34"

               HorizontalAlignment="Right"

               RenderOptions.BitmapScalingMode="LowQuality"

               RenderOptions.CachingHint="Cache"

               SnapsToDevicePixels="False"

               Source="{Binding DialogType, Converter={StaticResource AlterDialogWindow_IconConverter}}"

               Stretch="UniformToFill" />

        <ScrollViewer MaxWidth="300" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">

            <toolkit:SelectableTextBlock Margin="0,0,0,0"

                                         HorizontalAlignment="Left" FontSize="18"

                                         Foreground="#333333"

                                         Text="{Binding Content}"

                                         TextWrapping="Wrap" />

        </ScrollViewer>

    </StackPanel>

</DataTemplate>

<DataTemplate x:Key="TemplateNormal">

    <StackPanel Margin="40,18,40,0" HorizontalAlignment="Center" VerticalAlignment="Top" Orientation="Horizontal">

        <StackPanel.Resources>

            <Style TargetType="{x:Type TextBlock}">

                <Setter Property="FontSize" Value="18" />

                <Setter Property="VerticalAlignment" Value="Center" />

            </Style>

            <Style TargetType="{x:Type toolkit:SelectableTextBlock}">

                <Setter Property="FontSize" Value="18" />

                <Setter Property="VerticalAlignment" Value="Center" />

            </Style>

        </StackPanel.Resources>

        <Image Width="40" Height="42"

               HorizontalAlignment="Right"

               RenderOptions.BitmapScalingMode="LowQuality"

               RenderOptions.CachingHint="Cache"

               SnapsToDevicePixels="False"

               Source="{Binding DialogType, Converter={StaticResource AlterDialogWindow_IconConverter}}"

               Stretch="UniformToFill" />

        <ScrollViewer MaxWidth="280" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">

            <toolkit:SelectableTextBlock Margin="0,0,0,0"

                                         HorizontalAlignment="Left" FontSize="18"

                                         Foreground="#333333"

                                         Text="{Binding Content}"

                                         TextWrapping="Wrap" />

        </ScrollViewer>

    </StackPanel>

</DataTemplate>

<DataTemplate x:Key="TemplateFull">

    <Grid Margin="40,10,40,0" HorizontalAlignment="Center" VerticalAlignment="Top">

        <Grid.RowDefinitions>

            <RowDefinition />

            <RowDefinition />

        </Grid.RowDefinitions>

        <Image Width="54" Height="56"

               HorizontalAlignment="Center"

               RenderOptions.BitmapScalingMode="LowQuality"

               RenderOptions.CachingHint="Cache"

               SnapsToDevicePixels="False"

               Source="{Binding DialogType, Converter={StaticResource AlterDialogWindow_IconConverter}}"

               Stretch="UniformToFill" />

        <ScrollViewer Grid.Row="1" MaxWidth="300"

                      Margin="0,12,0,0"

                      HorizontalScrollBarVisibility="Disabled"

                      VerticalScrollBarVisibility="Auto">

            <StackPanel>

                <toolkit:SelectableTextBlock Margin="0,0,0,0"

                                             HorizontalAlignment="Center"

                                             FontSize="18" Foreground="#333333"

                                             Text="{Binding Content}"

                                             TextWrapping="Wrap" />

                <toolkit:SelectableTextBlock HorizontalAlignment="Center" FontSize="14" Foreground="#999999" Text="{Binding SubContent}" />

            </StackPanel>

        </ScrollViewer>

    </Grid>

</DataTemplate>

交互区域可定义两个模板：仅显示确定按钮，显示确定和取消按钮。

<DataTemplate x:Key="Template0">

    <StackPanel Orientation="Horizontal">

        <toolkit:ImageButton Width="108" Height="56"

                             Command="{Binding YesCommand}"

                             DownImage="{Binding DialogType, Converter={StaticResource AlterDialogWindow_ButtonConverter}, ConverterParameter='0|2'}"

                             Foreground="{Binding DialogType, Converter={StaticResource AlterDialogWindow_ButtonConverter}, ConverterParameter='0|3'}"

                             HoverImage="{Binding DialogType, Converter={StaticResource AlterDialogWindow_ButtonConverter}, ConverterParameter='0|1'}"

                             NormalImage="{Binding DialogType, Converter={StaticResource AlterDialogWindow_ButtonConverter}, ConverterParameter='0|0'}">

            <Grid>

                <TextBlock FontSize="16" Foreground="White" Text="{Binding YesButtonText}" Visibility="{Binding IsCountdown, Converter={StaticResource VisibilityConverter}, ConverterParameter='!'}" />

                <StackPanel Orientation="Horizontal" TextBlock.Foreground="White" Visibility="{Binding IsCountdown, Converter={StaticResource VisibilityConverter}}">

                    <TextBlock FontSize="16" Text="{Binding YesButtonText}" />

                    <TextBlock FontSize="14" Text="{Binding Countdown, StringFormat={}({0}s)}" />

                </StackPanel>

            </Grid>

        </toolkit:ImageButton>

        <toolkit:ImageButton Width="108" Height="32"

                             Margin="29,0,0,0"

                             Command="{Binding NoCommand}"

                             DownImage="{Binding DialogType, Converter={StaticResource AlterDialogWindow_ButtonConverter}, ConverterParameter='1|2'}"

                             Foreground="#366d85"

                             HoverImage="{Binding DialogType, Converter={StaticResource AlterDialogWindow_ButtonConverter}, ConverterParameter='1|1'}"

                             IsDefault="True"

                             NormalImage="{Binding DialogType, Converter={StaticResource AlterDialogWindow_ButtonConverter}, ConverterParameter='1|0'}">

            <TextBlock FontSize="16" Foreground="#0099ff" Text="{Binding NoButtonText}" />

        </toolkit:ImageButton>

    </StackPanel>

</DataTemplate>

<DataTemplate x:Key="Template1">

    <StackPanel Orientation="Horizontal">

        <toolkit:ImageButton Width="108" Height="56"

                             Command="{Binding YesCommand}"

                             DownImage="{Binding DialogType, Converter={StaticResource AlterDialogWindow_ButtonConverter}, ConverterParameter='0|2'}"

                             FontSize="18"

                             Foreground="{Binding DialogType, Converter={StaticResource AlterDialogWindow_ButtonConverter}, ConverterParameter='0|3'}"

                             HoverImage="{Binding DialogType, Converter={StaticResource AlterDialogWindow_ButtonConverter}, ConverterParameter='0|1'}"

                             IsDefault="True"

                             NormalImage="{Binding DialogType, Converter={StaticResource AlterDialogWindow_ButtonConverter}, ConverterParameter='0|0'}">

            <Grid>

                <TextBlock FontSize="16" Foreground="White" Text="{Binding YesButtonText}" Visibility="{Binding IsCountdown, Converter={StaticResource VisibilityConverter}, ConverterParameter='!'}" />

                <StackPanel Orientation="Horizontal" TextBlock.Foreground="White" Visibility="{Binding IsCountdown, Converter={StaticResource VisibilityConverter}}">

                    <TextBlock FontSize="16" Text="{Binding YesButtonText}" />

                    <TextBlock FontSize="14" Text="{Binding Countdown, StringFormat={}({0}s)}" />

                </StackPanel>

            </Grid>

        </toolkit:ImageButton>

    </StackPanel>

</DataTemplate>

定义好了信息区域和交互区域的几种模板后，AlterDialogWindow声明两个ContentPresenter表示信息区域和交互区域，通过模板选择器选择相应模板。其中交互区域通过绑定对话框类型来判断是否显示该区域。

<Grid>

    <Grid.RowDefinitions>

        <RowDefinition Height="*" />

        <RowDefinition Height="auto" />

    </Grid.RowDefinitions>

    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Top" Content="{Binding}">

        <ContentPresenter.ContentTemplateSelector>

            <local:AlterDialogWindowContentTemplateSelector Template0="{StaticResource TemplateMini}" Template1="{StaticResource TemplateNormal}" Template2="{StaticResource TemplateFull}" />

        </ContentPresenter.ContentTemplateSelector>

    </ContentPresenter>

    <ContentPresenter Grid.Row="1" Margin="0,0,0,16"

                      HorizontalAlignment="center"

                      VerticalAlignment="Top"

                      Content="{Binding}"

                      Visibility="{Binding DialogMode, Converter={helper:EnumExcludeConverter}, ConverterParameter='Mini'}">

        <ContentPresenter.ContentTemplateSelector>

            <local:AlterDialogWindowButtonDataTemplateSelector Template0="{StaticResource Template0}" Template1="{StaticResource Template1}" />

        </ContentPresenter.ContentTemplateSelector>

    </ContentPresenter>

</Grid>

至此，一个消息对话框就基本完成了。前边确定功能时提到调用消息对话框的窗口显示遮罩层。针对这个功能，我们可以在AlterDialogWindow中定义一个ShowDialog方法，参数是调用消息对话框的窗口对象，然后在该窗口中加上一个半透明的Grid作为遮罩层，并在AlterDialogWindow的OnClosed事件处理逻辑中删除遮罩层。

public bool? ShowDialog(DependencyObject parent)

{

    if (this.Parent == null && parent != null)

    {

        Grid layer = new Grid() { Name = "maskLayer", Background = new SolidColorBrush(Color.FromArgb(128, 0, 0, 0)) };

        _grid = Window.GetWindow(parent).FindFirstVisualChild<Grid>();

        if (_grid.FindAllVisualChilds<Grid>().FirstOrDefault(r => r.Name == "maskLayer") == null)

            _grid.Children.Add(layer);

        if (_grid.RowDefinitions.Count > 0)

            Grid.SetRowSpan(layer, _grid.RowDefinitions.Count);

        if (_grid.ColumnDefinitions.Count > 0)

            Grid.SetColumnSpan(layer, _grid.ColumnDefinitions.Count);

        this.Owner = Window.GetWindow(parent);

        this.WindowStartupLocation = WindowStartupLocation.CenterOwner;

    }

    return ShowDialog();

}

小结

本文介绍了自定义消息对话框的主要思路和代码，通过造轮子，重新温习了样式、主题、控件模板、数据模板、模板选择器、触发器、值转换器等技术。这也是MaterialDesign、HandyControl等控件珠玉在前，还要自己造轮子的原因之一。

[WPF]动手写一个简单的消息对话框的更多相关文章

  1. 动手写一个简单版的谷歌TPU-矩阵乘法和卷积

    谷歌TPU是一个设计良好的矩阵计算加速单元,可以很好的加速神经网络的计算.本系列文章将利用公开的TPU V1相关资料,对其进行一定的简化.推测和修改,来实际编写一个简单版本的谷歌TPU.计划实现到行为 ...

  2. 动手写一个简单版的谷歌TPU-指令集

    系列目录 谷歌TPU概述和简化 基本单元-矩阵乘法阵列 基本单元-归一化和池化(待发布) TPU中的指令集 SimpleTPU实例: (计划中) 拓展 TPU的边界(规划中) 重新审视深度神经网络中的 ...

  3. 动手写一个简单的Web框架（模板渲染）

    动手写一个简单的Web框架(模板渲染) 在百度上搜索jinja2,显示的大部分内容都是jinja2的渲染语法,这个不是Web框架需要做的事,最终,居然在Werkzeug的官方文档里找到模板渲染的代码. ...

  4. 动手写一个简单的Web框架（Werkzeug路由问题）

    动手写一个简单的Web框架(Werkzeug路由问题) 继承上一篇博客,实现了HelloWorld,但是这并不是一个Web框架,只是自己手写的一个程序,别人是无法通过自己定义路由和返回文本,来使用的, ...

  5. 动手写一个简单的Web框架（HelloWorld的实现）

    动手写一个简单的Web框架(HelloWorld的实现) 关于python的wsgi问题可以看这篇博客 我就不具体阐述了,简单来说,wsgi标准需要我们提供一个可以被调用的python程序,可以实函数 ...

  6. 自己动手写一个简单的（IIS）小型服务器

    因为第一次在博客园发表随笔,不太会用,这个笔记是我之前在印象笔记中写好的,然后直接copy过来,有兴趣自己做一个IIS服务器的小伙伴们可以参照下面的流程做一次,也可以叫我要源代码,不过要做完,我觉得花 ...

  7. 自己动手写一个简单的MVC框架（第一版）

    一.MVC概念回顾 路由(Route).控制器(Controller).行为(Action).模型(Model).视图(View) 用一句简单地话来描述以上关键点: 路由(Route)就相当于一个公司 ...

  8. 动手写一个简单版的谷歌TPU

    谷歌TPU是一个设计良好的矩阵计算加速单元,可以很好的加速神经网络的计算.本系列文章将利用公开的TPU V1(后简称TPU)相关资料,对其进行一定的简化.推测和修改,来实际编写一个简单版本的谷歌TPU ...

  9. 自己动手写一个简单的MVC框架（第二版）

    一.ASP.NET MVC核心机制回顾 在ASP.NET MVC中,最核心的当属“路由系统”,而路由系统的核心则源于一个强大的System.Web.Routing.dll组件. 在这个System.W ...

  10. 通过GUI制作一个简单的消息对话框互发消息

    public class LTS extends JFrame { private JPanel contentPane; private JTextField textField; private ...

随机推荐

  1. Selenium+2Captcha 自动化+验证码识别实战

    本文深入探讨了使用Selenium库进行网页自动化操作,并结合2Captcha服务实现ReCAPTCHA验证码的破解.内容涵盖Selenium的基础知识.验证码的分类.2Captcha服务的使用,以及 ...

  2. DXP TreeList 目录树

    DXP TreeList 目录树 1.需求背景 需要一个支持勾选,拖动节点,保存各节点顺序的目录树. 2.创建目录树 在treeList控件中添加两个colunm 用来显示绑定数据和显示值. 接下来对 ...

  3. Spring HandlerInterceptor工作机制

    本文以一个通过正常注册拦截器流程注册拦截器失败的实际场景,来带领大家阅读源码,体会Spring的HandlerInterceptor拦截器整个工作流程 简单认识 org.springframework ...

  4. 组合查询（left_inner_right）与排序(order by _DESC _ASC)在题目中的应用

    1,想要让哪一列放在开头或者结尾,只需要将select中的查询位置放在最开始或者结尾即可: 2,组合查询要注意使用 on 加上组合条件: 3,order by 默认升序(ASC),降序使用:order ...

  5. 原来你是这样的SpringBoot--初识SpringBootAdmin

    简介 Spring Boot Admin(SBA)是一个针对spring-boot的actuator接口进行UI美化封装的监控工具.它可以:在列表中浏览所有被监控spring-boot项目的基本信息, ...

  6. 使用 PDF一机一码加密大师，加密打包PDF文件（一机一码，绑定机器，无需额外安装阅读器）

    PDF一机一码加密大师, 可以加密任意PDF文档,添加一机一码授权, 静态密码等, 可以禁止用户复制,打印PDF文档中的内容,并且加密生成的PDF在其他用户电脑上无需安装第三方阅读器即可直接阅读. 下 ...

  7. Domain Admin域名和SSL证书过期监控到期提醒

    基于Python3 + Vue3.js 技术栈实现的域名和SSL证书监测平台 用于解决,不同业务域名SSL证书,申请自不同的平台,到期后不能及时收到通知,导致线上访问异常,被老板责骂的问题 核心功能: ...

  8. 「openjudge / poj - 1057」Chessboard

    link. 调起来真的呕吐,网上又没篇题解.大概是个不错的题. 首先行和列一定是独立的,所以我们把行列分开考虑.这样的问题就弱化为:在一个长度为 \(n\) 的格子带上,有 \(n\) 个物品,每个物 ...

  9. 5. 用Rust手把手编写一个Proxy(代理), 通讯协议建立, 为内网穿透做准备

    用Rust手把手编写一个Proxy(代理), 通讯协议建立, 为内网穿透做准备 项目 ++wmproxy++ gite: https://gitee.com/tickbh/wmproxy github ...

  10. LeetCode 周赛上分之旅 #48 一道简单的树上动态规划问题

    ️ 本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 和 BaguTree Pro 知识星球提问. 学习数据结构与算法的关键在于掌握问题背后的算法思维框架,你的思考越 ...