Time is like water, you can not go back into the flow!
Thumbs up again, a habit, which is that you give me creative power!
This article Dotnet9 https://dotnet9.com already been included, the owners are happy to share dotnet related technologies, such as Winform, WPF, ASP.NET Core, Xamarin.Forms, etc., are also related to the desktop C ++ Qt Quick and Qt Widgets, they just share We are familiar with their own will.
Read Navigation:
- First, look at the effect
- Second, text background
- Third, code implementation
- Fourth, the article reference
- Fifth, the code download
First, look at the effect
Second, text background
YouTube big and Design com WPF God acquisition, commonly used mask dialogs are implemented, the use of open source C # WPF Control Library MaterialDesignInXAML, the site had introduced: Open Source C # WPF Control Library "MaterialDesignInXAML" .
Third, code implementation
3.1 Add Nuget library
Master Core 3.1 using .Net WPF project created to create "ScreenOverlayMessage" the solution, we need to add two Nuget libraries: MaterialDesignThemes and MaterialDesignColors, the figure is the effect of using the control library to achieve, very powerful.
3.2 of engineering structures
Do not need shots, only modified two files, App.xaml MD controls add four style files, MainWindow main window to achieve results.
3.3 App.xaml introduction MD control style
<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 The main form
The MainWindow.xaml, the overall layout, plus the following fancy FIG interface code, add the top left corner of the logo icon interface, the left navigational menus, etc., that is, all of the code below.
<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>Key to explain:
- materialDesign: DialogHost: Settings dialog box, place the mask cover that pops up after a mask box, behind the shadow position.
- materialDesign: DialogHost.DialogContent: the contents of the dialog box that pops up a dialog box to configure
Background There is a drag form's code:
private void Window_MouseDown(object sender, MouseButtonEventArgs e)
{
DragMove();
}Fourth, the article reference
建议直接打开大神视频学习，他的YouTube上还有很多代码视频哦，参考：
参考视频： Design com WPF： https://www.youtube.com/watch?v=Dwi9o3K73XM
五、代码下载
文章中代码已经全部贴出。
除非注明，文章均由 Dotnet9 整理发布，欢迎转载。
转载请注明本文地址：https://dotnet9.com/6769.html
欢迎扫描下方二维码关注 Dotnet9 的微信公众号，本站会及时推送最新技术文章（微信公众号“dotnet9_com”）：
如有收获，请大力转发，给Dotnet9赞助和支持，谢谢大家对dotnet技术的关注和支持 。