WPF|一个比较简单带点设计的登录界面

阅读目录

效果展示
准备
简单说明 + 源码
结尾（视频及源码仓库）

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();}
}