消息对话框是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. python移动文件

    #移动文件(目录) shutil.move("oldpos","newpos") shutil.move("D:/知乎日报/latest/一张优惠券, ...

  2. sqlmap指定参数注入

    在参数前面加星号

  3. 【Qt6】QWidgetAction 的使用

    在开始主题前,先看一个 C++ 例子: #include <iostream> struct Data { int a; int b; }; // 注意这里 struct Data *s; ...

  4. Codespaces个性化后台服务器配置指南

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 前文概览 在前文<浏览器上写代码,4核8G微软服 ...

  5. cockpit--一款开源的适用于单主机的Linux监控面板

    在搜索Linux监控时,偶然发现一款还不错的监控面板,该面板为red hat开发,适用于各种Linux发行版,部署也非常方便,官方文档Running Cockpit - Cockpit Project ...

  6. 项目开展CICD的实践探路

    本文介绍了作者对CICD的理解以及在项目中开展CICD的几种场景,总结了每种场景实践的关键节点.带来的收益,以及结合具体项目开展的实际应用.读者可以借鉴本文中描述的场景,或借鉴文中提到的实践方式,在项 ...

  7. ChatGPT如何生成可视化图表-示例中国近几年出生人口

    本教程收集于:AIGC从入门到精通教程汇总 ChatGPT本身不能直接生成可视化图表,但可以配合其他可视化工具或库 方法一:前端可视化开发库 Echarts(地址:Apache ECharts ) 方 ...

  8. 【SQL】所谓的连表查询

    连表查询 外连接 外连接分为两种,左(外)连接和右(外)连接 基本语法如下: SELECT 字段列表 FROM 表1 LEFT JOIN 表2 ON 条件; 这是左连接,因此以表1中的 [字段列表] ...

  9. WPF使用Blazor的快速案例

    下面我们将讲解在WPF中使用Blazor,并且使用Blazor做一些文件编辑操作,下面是需要用到的东西 WPF Blazor Masa Blazor Monaco 安装Masa Blazor模板 使用 ...

  10. js详细讲解放大镜的实现

    实现放大镜的整体思路 1.当鼠标放在图片上的时候,出现蒙层. 2.出现蒙层,让鼠标在蒙层中心 3.限制蒙层移动的范围 4.放大镜移动 最终实现的效果 鼠标放上去的时候,出现一个蒙层. 蒙层的移动范围只 ...