消息对话框是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. AttributeError:module‘win32com.gen_py has no attribute ‘CLSIDToClassMap‘

    解决方案如下: 1. 运行如下代码,找到文件所在位置 from win32com.client.gencache import EnsureDispatch import sys xl = Ensur ...

  2. 使用 Go 语言实现二叉搜索树

    原文链接: 使用 Go 语言实现二叉搜索树 二叉树是一种常见并且非常重要的数据结构,在很多项目中都能看到二叉树的身影. 它有很多变种,比如红黑树,常被用作 std::map 和 std::set 的底 ...

  3. 一文详解自然语言处理两大任务与代码实战：NLU与NLG

    自然语言处理(NLP)涵盖了从基础理论到实际应用的广泛领域,本文深入探讨了NLP的关键概念,包括词向量.文本预处理.自然语言理解与生成.统计与规则驱动方法等,为读者提供了全面而深入的视角. 作者 Te ...

  4. 你能看到这个汉字么“  ” ？关于Unicode的私人使用区(PUA) 和浏览器端显示处理

    如果你现在使用的是chrome查看那么你是看不到我标题中的汉字的,显示为一个小方框,但是你使用edge查看的话,这个字就能正常的显示出来,不信你试试! 本故事源于我在做数据过程中遇到Unicode编码 ...

  5. 《CTFshow-Web入门》06. Web 51~60

    @ 目录 web51 题解 web52 题解 原理 web53 题解 原理 web54 题解 原理 web55 题解 原理 web56 题解 原理 web57 题解 原理 web58 题解 原理 we ...

  6. 使用API接口获取商品数据

    ​ 在当今的数字化时代,商品数据的获取对于各种规模的企业来说都至关重要.这些数据可以帮助企业进行市场分析,制定销售策略,优化库存管理,以及实现精准营销.API(应用程序编程接口)是一种便捷的方式来获取 ...

  7. 开源通用型流式大数据统计系统XL-LightHouse介绍

    概述 XL-LightHouse是针对互联网领域繁杂的流式数据统计需求而开发的一套集成了数据写入.数据运算.数据存储和数据可视化等一系列功能,支持大数据量,支持高并发的[通用型流式大数据统计平台]: ...

  8. 图解 LeetCode 算法汇总——二分查找

    二分查找(Binary Search)是一种在有序数组中查找特定元素的高效算法.它的基本思想是将目标值与数组中间的元素进行比较,如果目标值小于中间元素,则在数组的左半部分继续查找,否则在右半部分查找, ...

  9. Spring-Boot-Starter 学习笔记（1）

    Spring-Boot-Starter 1. 准备配置类和 Bean 对象 Spring Boot 提供了两个注解: @Configuration:Spring 提供的配置类注解,作用在类上,代表整个 ...

  10. socket应用的例子

    当使用 C 语言实现 Socket 编程时,可以通过系统提供的网络库来实现网络通信.以下是一个简单的示例,演示了如何创建一个简单的服务器和客户端,实现客户端向服务器发送消息并接收回复的功能. 服务器端 ...