阅读导航：
- 一、先看效果
- 二、本文背景
- 三、代码实现
- 四、文章参考
- 五、代码下载
一、先看效果
二、本文背景
youtube design com wpf 大神处习得，常用的遮罩对话框实现，使用的开源 c# wpf控件库 materialdesigninxaml ，本站曾有介绍：开源c# wpf控件库《materialdesigninxaml》。
三、代码实现
3.1 添加nuget库
站长使用.net core 3.1创建的wpf工程，创建“screenoverlaymessage”解决方案后，需要添加两个nuget库：materialdesignthemes和materialdesigncolors，上图的效果是使用该控件库实现的，非常强大。
3.2 工程结构
不需要截图，只修改了两个文件，app.xaml添加md控件4个样式文件，mainwindow主窗口实现效果。
3.3 app.xaml引入md控件样式
<application x:class="dropdownmenu.app"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:dropdownmenu"
startupuri="mainwindow.xaml">
<application.resources>
<resourcedictionary>
<resourcedictionary.mergeddictionaries>
<resourcedictionary source="pack://application:,,,/materialdesignthemes.wpf;component/themes/materialdesigntheme.light.xaml"/>
<resourcedictionary source="pack://application:,,,/materialdesignthemes.wpf;component/themes/materialdesigntheme.defaults.xaml"/>
<resourcedictionary source="pack://application:,,,/materialdesigncolors;component/themes/recommended/primary/materialdesigncolor.blue.xaml"/>
<resourcedictionary source="pack://application:,,,/materialdesigncolors;component/themes/recommended/accent/materialdesigncolor.indigo.xaml"/>
</resourcedictionary.mergeddictionaries>
</resourcedictionary>
</application.resources>
</application>
3.4 主窗体
mainwindow.xaml，整体布局，看上图加上下面的界面代码，添加界面左上角logo图标、左侧导航菜单等，下面即是全部代码。
<window x:class="screenoverlaymessage.mainwindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:screenoverlaymessage"
mc:ignorable="d"
xmlns:materialdesign="http://materialdesigninxaml.net/winfx/xaml/themes" mousedown="window_mousedown"
title="mainwindow" height="576" width="1024" resizemode="noresize" windowstartuplocation="centerscreen" windowstyle="none" background="#ff423a3a">
<grid>
<materialdesign:dialoghost borderbrush="{dynamicresource materialdesigndivider}">
<materialdesign:dialoghost.dialogcontent>
<grid width="300" height="150" horizontalalignment="center">
<stackpanel orientation="horizontal" margin="15">
<materialdesign:packicon kind="folder" foreground="{staticresource primaryhuemidbrush}" width="50" height="50"/>
<textblock foreground="gray" width="200" margin="15 5" textwrapping="wrap">
允许应用程序访问您计算机上的照片、媒体和文件？
</textblock>
</stackpanel>
<stackpanel orientation="horizontal" horizontalalignment="right" verticalalignment="bottom" margin="15">
<button command="{x:static materialdesign:dialoghost.closedialogcommand}" style="{dynamicresource materialdesignflatbutton}" margin="4" verticalalignment="center">
拒绝
</button>
<button command="{x:static materialdesign:dialoghost.closedialogcommand}" style="{dynamicresource materialdesignflatbutton}" margin="4" verticalalignment="center">
允许
</button>
</stackpanel>
</grid>
</materialdesign:dialoghost.dialogcontent>
<grid>
<stackpanel width="200" horizontalalignment="left" background="#ff472076">
<grid height="150" background="white">
<image source="https://img.dotnet9.com/logo.png"/>
</grid>
<button style="{staticresource materialdesignflatbutton}" command="{x:static materialdesign:dialoghost.opendialogcommand}">
<stackpanel orientation="horizontal" height="30">
<materialdesign:packicon kind="photoalbum" width="20" height="20" verticalalignment="center"/>
<textblock text="照片" margin="20 0" fontsize="15" verticalalignment="center"/>
</stackpanel>
</button>
<button style="{staticresource materialdesignflatbutton}" command="{x:static materialdesign:dialoghost.opendialogcommand}">
<stackpanel orientation="horizontal" height="30">
<materialdesign:packicon kind="music" width="20" height="20" verticalalignment="center"/>
<textblock text="音乐" margin="20 0" fontsize="15" verticalalignment="center"/>
</stackpanel>
</button>
</stackpanel>
</grid>
</materialdesign:dialoghost>
</grid>
</window>
重点讲解：
- materialdesign:dialoghost：设置遮罩对话框覆盖的地方，即弹出遮罩对话框后，背后有阴影的位置。
- materialdesign:dialoghost.dialogcontent：对话框内容，即弹出的对话框配置
后台有个拖动窗体代码：
private void window_mousedown(object sender, mousebuttoneventargs e)
{
dragmove();
}
四、文章参考
建议直接打开大神视频学习，他的youtube上还有很多代码视频哦，参考：
参考视频： design com wpf： https://www.youtube.com/watch?v=dwi9o3k73xm
五、代码下载
文章中代码已经全部贴出。
除非注明，文章均由 dotnet9 整理发布，欢迎转载。
转载请注明本文地址：
欢迎扫描下方二维码关注 dotnet9 的微信公众号，本站会及时推送最新技术文章（微信公众号“dotnet9_com”）：
如有收获，请大力转发，给dotnet9赞助和支持，谢谢大家对dotnet技术的关注和支持 。