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

[WPF]动手写一个简单的消息对话框

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

这篇具有很好参考价值的文章主要介绍了[WPF]动手写一个简单的消息对话框。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

确定“轮子”的功能

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

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

开始造“轮子”

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

自定义窗口外观

标准的窗口由两个重叠的矩形组成。外部矩形是非工作区，其中包括标题栏按钮(最小化、最大化和关闭) 、窗口边框、调整大小和移动行为、应用程序图标和标题以及系统菜单。它由操作系统的窗口管理器绘制和管理。其尺寸由标准操作系统设置决定。内部矩形是工作区，也就是应用程序的内容。
自定义窗口外观主要是针对非工作区，可以通过设置属性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等控件珠玉在前，还要自己造轮子的原因之一。

代码示例

https://github.com/czwy/AlertDialogWindow文章来源地址https://www.toymoban.com/news/detail-747173.html

到了这里，关于[WPF]动手写一个简单的消息对话框的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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

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

相关文章

  • WPF HandyControl 界面交互反馈:对话框+加载框+列表选择

    WPF HandyControl 界面交互反馈:对话框+加载框+列表选择

    我学了HandyControl的基础使用，但是发现HandyControl 封装了基础的消息提示，但是没有封装基础的交互逻辑。可能是因为我写了Uniapp，我知道封装了基础的交互其实一般就够用了。 Uniapp 界面交互反馈 我现在觉得，代码要低耦合一点，每个模块都纯粹一点，这一次我就不添加Nl

    2024年01月19日
    浏览(39)
  • MFC为资源对话框添加消息处理函数和初始化控件

    MFC为资源对话框添加消息处理函数和初始化控件

    现在我VC6新建了一个对话框工程；又在资源添加了一个新的对话框，并为新的对话框添加了名为CTestDlg的类； 在主对话框的cpp文件包含#include \\\"TestDlg.h\\\"； 在主对话框的cpp文件的OnInitDialog()成员函数中，添加2句，     CTestDlg tdlg;     tdlg.DoModal(); 就可以弹出这个对话框； 在新

    2024年01月18日
    浏览(50)
  • MFC--对话框的一个画图控件-HighSpeedChart

    MFC--对话框的一个画图控件-HighSpeedChart

    下载链接在最下面  (免费) 可在vs2022，vs2019等vs版本使用  成果展示 下载好文件后，将  整个文件夹，添加到项目中，  1.之后，将控件拖到对话框里，修改属性到与图片相同            2.为对话框添加类，我这里添加的是  3.为控件增加变量，因为不是VS自带的控件 4.点

    2024年02月04日
    浏览(84)
  • 完善对话框，点击登录对话框，如果账号和密码匹配，则弹出信息对话框，给出提示R登录成功“，提供一个Ok按钮，用户点击OK后，关闭登录界面，跳转到其他界面,

    完善对话框，点击登录对话框，如果账号和密码匹配，则弹出信息对话框，给出提示R登录成功“，提供一个Ok按钮，用户点击OK后，关闭登录界面，跳转到其他界面,

    如果账号和密码不匹配，弹出错误对话框，给出信息\\\"账号和密码不匹配，是否重新登录\\\",并提供两个按钮Yes|No，用户点击Yes后，清除密码框中的内容，继续让用户进行登录，如果用户点击No按钮，则直接关闭登录界面如果用户点击取消按钮，则弹出一个问题对话框，给出信息

    2024年04月10日
    浏览(61)
  • element-ui实现一个动态布局的对话框

    element-ui实现一个动态布局的对话框

     我把组件上传到npm了，具体使用方法请看：https://gitee.com/zengyanfang/tablelist-way/blob/master/README.md#%E5%8F%82%E6%95%B0 前言：在工作中有各种各样的对话框，最多就是填写信息这些的，一般这样的内容都是el-input输入框，el-select选择框等等之内的，这时我们就可以封装成一个组件，想

    2024年02月01日
    浏览(46)
  • ApeForms | C# - WinForm临时对话框（消息框、提示框、输入框、密码框、单选框、多选框等）

    ApeForms | C# - WinForm临时对话框（消息框、提示框、输入框、密码框、单选框、多选框等）

    ApeForms一款基于WinForm实现的开源免费商用的UI库，其中提供了一套便于用户交互的临时对话框组件（Dialog），可用于快速创建开发中常见的交互对话框，例如：消息框、提示框、输入框、单选框、多选框等。 ApeFree.ApeDialogs并不是一个包含Dialog实现的UI库，而是一套Dialog标准（

    2023年04月08日
    浏览(56)
  • 微信小程序开发系列（二十九）·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框

    微信小程序开发系列（二十九）·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框

    目录 1.  loading 提示框 1. 1  wx.showLoading()显示loading提示框 1.2  wx.hideLoading()关闭 loading 提示框 2.  showModal 模态对话框 3.  showToast 消息提示框         小程序提供了一些用于界面交互的 API，例如：loading 提示框、消息提示框、模态对话框等 API。 loading 提示框常配合网络请

    2024年03月25日
    浏览(45)
  • UG\NX二次开发 非模态消息对话框函数 UF_UI_display_nonmodal_msg

    UG\NX二次开发 非模态消息对话框函数 UF_UI_display_nonmodal_msg

    文章作者：里海 来源网站： https://blog.csdn.net/WangPaiFeiXingYuan         uc1601函数提供了一个模态消息对话框，ufun函数中还有一个非模态消息对话框，运行一次弹出一个窗口，不点确定不消失，对话框显示后不影响使用其他命令运行。         UF_UI_display_nonmodal_msg的第二个参

    2024年02月15日
    浏览(52)
  • Vue中使用element-ui 给按钮绑定一个单击事件，实现点击按钮就弹出一个dialog对话框

    Vue中使用element-ui 给按钮绑定一个单击事件，实现点击按钮就弹出一个dialog对话框

    1.需求描述 想要实现点击一个按钮就弹出一个对话框，在对话框中可输入数据进行提交，在点击取消时对话框关闭 2.功能实现 1.创建按钮 在element中把找到按钮的代码放到div里 2.创建对话框 在element中找到dialog对话框对应的代码，把代码粘贴到对应的位置 3.对话框与按钮的绑定

    2024年01月18日
    浏览(73)
  • 【windows编程之对话框】对话框原理，对话框的创建

    【windows编程之对话框】对话框原理，对话框的创建

    在本章节中我们来讲解Windows/Win32编程中对话框的原理和对话框的创建，我们在前几篇章节中讲解到了普通窗口中回调函数的处理，在普通窗口的窗口消息处理函数（回调函数）中，系统会首先调用我们自己写的回调函数，我们自己编写的回调函数没有处理的消息，才会交给系

    2024年02月03日
    浏览(90)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包