閱讀目錄
效果展示
準備
簡單說明 + 源碼
結尾（視頻及源碼倉庫）
1. 效果展示
欣賞效果：
2. 準備
創建一個WPF工程，比如站長使用 .NET 7[1] 創建名為 Login5 的WPF項目。
找一張圖片做為裝飾，放登錄表單左側：
添加Nuget包 MaterialDesignThemes[2]：
<PackageReference?Include="MaterialDesignThemes"?Version="4.6.0-ci176"?/>3. 簡單說明 + 源碼
界面比較簡單，代碼也不多，我們直接貼代碼。
MainWindow.xaml
界面的整體布局和樣式都在這個文件內：
<Windowx:Class="Login5.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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"Title="MainWindow"Width="800"Height="450"ResizeMode="NoResize"WindowStartupLocation="CenterScreen"WindowStyle="None"mc:Ignorable="d"><Window.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.Red.xaml"?/><ResourceDictionary?Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml"?/></ResourceDictionary.MergedDictionaries></ResourceDictionary></Window.Resources><Grid?MouseDown="Border_MouseDown"><Grid.Background><LinearGradientBrush?StartPoint="0.1,0"?EndPoint="0.9,1"><GradientStop?Offset="1"?Color="#FFE63070"?/><GradientStop?Offset="0"?Color="#FFFE8704"?/></LinearGradientBrush></Grid.Background><BorderHeight="390"VerticalAlignment="Top"Background="#100E17"CornerRadius="0?0?180?0"?/><StackPanel?Orientation="Horizontal"><StackPanel?Width="350"><ImageWidth="300"Height="300"Margin="30"VerticalAlignment="Top"Source="pack://application:,,,/Login5;component/Images/ICON4801.png"Stretch="Fill"?/></StackPanel><StackPanel?Width="350"><StackPanel?Margin="20,40"><TextBlockMargin="20"FontFamily="Great?Vibes"FontSize="38"Foreground="White"Text="用戶登錄"TextAlignment="Center"?/><StackPanel?Margin="10"?Orientation="Horizontal"><materialDesign:PackIconWidth="25"Height="25"Foreground="White"Kind="User"?/><TextBoxx:Name="txtUsername"Width="250"Margin="10,0"materialDesign:HintAssist.Hint="輸入?用戶名?/?郵箱"BorderBrush="White"CaretBrush="#FFD94448"Foreground="White"SelectionBrush="#FFD94448"?/></StackPanel><StackPanel?Margin="10"?Orientation="Horizontal"><materialDesign:PackIconWidth="25"Height="25"Foreground="White"Kind="Lock"?/><PasswordBoxx:Name="txtPassword"Width="250"Margin="10,0"materialDesign:HintAssist.Hint="********"BorderBrush="White"CaretBrush="#FFD94448"Foreground="White"SelectionBrush="#FFD94448"?/></StackPanel><StackPanel?Margin="10"?HorizontalAlignment="Center"><Buttonx:Name="btnLogin"Width="100"Height="40"materialDesign:ButtonAssist.CornerRadius="10"Background="#D94448"BorderBrush="#D94448"BorderThickness="2"Content="登錄"Foreground="White"Style="{StaticResource?MaterialDesignRaisedButton}"ToolTip="登錄"?/></StackPanel></StackPanel></StackPanel><StackPanel?Width="100"><Buttonx:Name="btnExit"Margin="10,20"Background="{x:Null}"Click="btnExit_Click"Style="{StaticResource?MaterialDesignFloatingActionButton}"ToolTip="Close"><materialDesign:PackIconWidth="30"Height="30"Foreground="White"Kind="Close"?/></Button></StackPanel></StackPanel></Grid>
</Window>MainWindow.xaml.cs
窗體拖動和關閉按鈕事件：
using?System.Windows;
using?System.Windows.Input;namespace?Login5;public?partial?class?MainWindow?:?Window
{public?MainWindow(){InitializeComponent();}private?void?Border_MouseDown(object?sender,?MouseButtonEventArgs?e){this.DragMove();}private?void?btnExit_Click(object?sender,?RoutedEventArgs?e){this.Close();}
}4. 結尾（視頻及源碼倉庫）
有興趣可以看看原作者視頻（推薦），下方給出視頻及源碼倉庫鏈接：
參考：
油管視頻作者：C# Code Academy[3]
油管視頻：Multiple User Login Form | C# WPF[4]
參考代碼：Multi-login-CSharp-WPF[5]
本文代碼：Login5[6]
參考資料
[1]
.NET 7: https://dotnet.microsoft.com/zh-cn/
[2]MaterialDesignThemes: https://dotnet9.com/2020/12/Material-designinxaml-an-open-source-csharp-WPF-Control-Library
[3]C# Code Academy: https://www.youtube.com/channel/UCMTD4dfLZb8nhMOsVwGvHJw
[4]Multiple User Login Form | C# WPF: https://www.youtube.com/watch?v=t4Kg62UeSws
[5]Multi-login-CSharp-WPF: https://github.com/alihaider11/Multi-login-CSharp-WPF
[6]Login5: https://github.com/dotnet9/TerminalMACS.ManagerForWPF/tree/master/src/WPFDesignDemos/Login5
