UI使用MaterialDesign，先看界面

一、界面

二、下载MaterialDesign包

我使用的是VS2019，选择要引入MaterialDesign包的项目，鼠标右击选择NuGet程勋包

在浏览页签中输入MaterialDesign，下载MaterialDesignColors和MaterialDesignThemes两个包

  安装成功后，在已安装页签中能看到这两个UI包

  三、引用MaterialDesign

可以在GitHub下载源码，源码里有使用的Demo

GitHub地址：GitHub - MaterialDesignInXAML/MaterialDesignInXamlToolkit: Google's Material Design in XAML & WPF, for C# & VB.Net.

在App.xaml中引入要使用的包

<Application x:Class="Login_WPF.App"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:Login_WPF"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.Lime.xaml" /></ResourceDictionary.MergedDictionaries></ResourceDictionary></Application.Resources>
</Application>

四、登录界面代码

Xaml代码：

<Window x:Class="Login_WPF.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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"TextElement.Foreground="{DynamicResource MaterialDesignBody}"Background="{x:Null}"AllowsTransparency="True"WindowStyle="None"WindowStartupLocation="CenterScreen"xmlns:local="clr-namespace:Login_WPF"mc:Ignorable="d"Title="MainWindow" Height="760" Width="450"><materialDesign:Card UniformCornerRadius="15" Background="{DynamicResource MaterialDesignPaper}" Margin="25"materialDesign:ShadowAssist.ShadowDepth="Depth4"><materialDesign:DialogHost CloseOnClickAway="True" x:Name="DialogHost"><StackPanel><materialDesign:PopupBox HorizontalAlignment="Right" Margin="0 20 20 0"PlacementMode="BottomAndAlignRightEdges"  StaysOpen="False" Height="25"><StackPanel><StackPanel Margin="16 10 0 6" Orientation="Horizontal" HorizontalAlignment="Center"><TextBlock  VerticalAlignment="Center" Text="Dark"/><ToggleButton Cursor="Hand" ToolTip="Enabled Dark Mode" Margin="12 0 8 0"x:Name="themeToggle" IsChecked="{Binding IsDarkTheme}"Click="themeToggle_Click"></ToggleButton></StackPanel><Button ToolTip="Having Trouble Logging In?" Margin="0 8 0 0" Content="Help"></Button><Button x:Name="btn_exit" ToolTip="Close Application" Content="Exit" Click="exitApp"/></StackPanel>                               </materialDesign:PopupBox><Image Margin="0 60 0 5" Height="100" Source="wind.png"/><TextBlock Margin="0 25 0 5" HorizontalAlignment="Center" FontSize="28" FontWeight="Bold" Text="Welcome Back"/><TextBlock FontSize="17" FontWeight="SemiBold" HorizontalAlignment="Center" Text="Log in to your account"/><TextBox Margin="0 50 0 0" x:Name="txtUserName" Width="300" FontSize="18"materialDesign:HintAssist.Hint="Enter Username" BorderThickness="2" BorderBrush="{DynamicResource MaterialDesignDivider}"Style="{StaticResource MaterialDesignOutlinedTextBox}"/><PasswordBox Margin="0 20 0 0" x:Name="txtPassword" Width="300" FontSize="18"materialDesign:HintAssist.Hint="Enter Password" BorderThickness="2" BorderBrush="{DynamicResource MaterialDesignDivider}"Style="{StaticResource MaterialDesignOutlinedPasswordBox}"/><Button Margin="0 20 0 0" x:Name="loginBtn" Width="300" Height="53" FontSize="18" materialDesign:ButtonAssist.CornerRadius="10" Content="LOG IN" materialDesign:ShadowAssist.ShadowDepth="Depth0"Style="{StaticResource MaterialDesignFlatMidBgButton}"/><Button Margin="0 20 0 0" x:Name="signupBtn" Width="300" Height="53" FontSize="18" materialDesign:ButtonAssist.CornerRadius="10" Content="Create Account" materialDesign:ShadowAssist.ShadowDepth="Depth0"Style="{StaticResource MaterialDesignFlatButton}"/></StackPanel></materialDesign:DialogHost></materialDesign:Card>
</Window>

.cs代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using MaterialDesignThemes.Wpf;namespace Login_WPF
{/// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>public partial class MainWindow : Window{public bool IsDarkTheme { get; set; }private readonly PaletteHelper paletteHelper = new PaletteHelper();public MainWindow(){InitializeComponent();}private void themeToggle_Click(object sender, RoutedEventArgs e){ITheme theme = paletteHelper.GetTheme();if (IsDarkTheme = theme.GetBaseTheme() == BaseTheme.Dark){IsDarkTheme = false;theme.SetBaseTheme(Theme.Light);}else{IsDarkTheme = true;theme.SetBaseTheme(Theme.Dark);}paletteHelper.SetTheme(theme);}private void exitApp(object sender, RoutedEventArgs e){Application.Current.Shutdown();}protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e){base.OnMouseLeftButtonDown(e);DragMove();}}
}