[WPF]动手写一个简单的消息对话框
消息对话框是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>
</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>
</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.git
来源:https://www.cnblogs.com/czwy/archive/2023/11/22/17850306.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]