WPF|一个比较简单带点设计的登录界面
Posted dotNET跨平台
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了WPF|一个比较简单带点设计的登录界面相关的知识，希望对你有一定的参考价值。
阅读目录
效果展示
准备
简单说明 + 源码
结尾（视频及源码仓库）
1. 效果展示
欣赏效果：
2. 准备
创建一个WPF工程，比如站长使用 .NET 7[1] 创建名为 Login5 的WPF项目。
找一张图片做为装饰，放登录表单左侧：
添加Nuget包 MaterialDesignThemes[2]：
<PackageReference Include="MaterialDesignThemes" Version="4.6.0-ci176" />3. 简单说明 + 源码
界面比较简单，代码也不多，我们直接贴代码。
MainWindow.xaml
界面的整体布局和样式都在这个文件内：
<Window
x: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>
<Border
Height="390"
VerticalAlignment="Top"
Background="#100E17"
CornerRadius="0 0 180 0" />
<StackPanel Orientation="Horizontal">
<StackPanel Width="350">
<Image
Width="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">
<TextBlock
Margin="20"
FontFamily="Great Vibes"
FontSize="38"
Foreground="White"
Text="用户登录"
TextAlignment="Center" />
<StackPanel Margin="10" Orientation="Horizontal">
<materialDesign:PackIcon
Width="25"
Height="25"
Foreground="White"
Kind="User" />
<TextBox
x: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:PackIcon
Width="25"
Height="25"
Foreground="White"
Kind="Lock" />
<PasswordBox
x:Name="txtPassword"
Width="250"
Margin="10,0"
materialDesign:HintAssist.Hint="********"
BorderBrush="White"
CaretBrush="#FFD94448"
Foreground="White"
SelectionBrush="#FFD94448" />
</StackPanel>
<StackPanel Margin="10" HorizontalAlignment="Center">
<Button
x: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">
<Button
x:Name="btnExit"
Margin="10,20"
Background="x:Null"
Click="btnExit_Click"
Style="StaticResource MaterialDesignFloatingActionButton"
ToolTip="Close">
<materialDesign:PackIcon
Width="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
以上是关于WPF|一个比较简单带点设计的登录界面的主要内容，如果未能解决你的问题，请参考以下文章