閱讀導(dǎo)航:
- 一、先看效果
- 二、本文背景
- 三、代碼實(shí)現(xiàn)
- 四、文章參考
- 五、代碼下載
一、先看效果
二、本文背景
YouTube Design com WPF 大神處習(xí)得,常用的遮罩對(duì)話框?qū)崿F(xiàn),使用的開源 C# WPF控件庫 MaterialDesignInXAML ,本站曾有介紹:開源C# WPF控件庫《MaterialDesignInXAML》。
三、代碼實(shí)現(xiàn)
3.1 添加Nuget庫
站長使用.Net Core 3.1創(chuàng)建的WPF工程,創(chuàng)建“ScreenOverlayMessage”解決方案后,需要添加兩個(gè)Nuget庫:MaterialDesignThemes和MaterialDesignColors,上圖的效果是使用該控件庫實(shí)現(xiàn)的,非常強(qiáng)大。

3.2 工程結(jié)構(gòu)
不需要截圖,只修改了兩個(gè)文件,App.xaml添加MD控件4個(gè)樣式文件,MainWindow主窗口實(shí)現(xiàn)效果。
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圖標(biāo)、左側(cè)導(dǎo)航菜單等,下面即是全部代碼。
<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"> 允許應(yīng)用程序訪問您計(jì)算機(jī)上的照片、媒體和文件? </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>
重點(diǎn)講解:
- materialDesign:DialogHost:設(shè)置遮罩對(duì)話框覆蓋的地方,即彈出遮罩對(duì)話框后,背后有陰影的位置。
- materialDesign:DialogHost.DialogContent:對(duì)話框內(nèi)容,即彈出的對(duì)話框配置
后臺(tái)有個(gè)拖動(dòng)窗體代碼:
private void Window_MouseDown(object sender, MouseButtonEventArgs e){ DragMove();}
四、文章參考
建議直接打開大神視頻學(xué)習(xí),他的YouTube上還有很多代碼視頻哦,參考:
參考視頻: Design com WPF: https://www.youtube.com/watch?v=Dwi9o3K73XM
五、代碼下載
文章中代碼已經(jīng)全部貼出。
除非注明,文章均由 Dotnet9 整理發(fā)布,歡迎轉(zhuǎn)載。
轉(zhuǎn)載請(qǐng)注明本文地址:https://dotnet9.com/6769.html
歡迎掃描下方二維碼關(guān)注 Dotnet9 的微信公眾號(hào),本站會(huì)及時(shí)推送最新技術(shù)文章(微信公眾號(hào)“dotnet9_com”):
如有收獲,請(qǐng)大力轉(zhuǎn)發(fā),給Dotnet9贊助和支持,謝謝大家對(duì)dotnet技術(shù)的關(guān)注和支持 。