本文只是简单的登录界面布局,没有太重要的功能效果。
文章目录
C# WPF 普通登录界面
内容目录
- 实现效果
- 业务场景
- 编码实现
- 本文参考
- 源码下载
1.实现效果

效果
2.业务场景
常规业务
3.编码实现
3.1 添加Nuget库
使用 .Net Core 3.1 创建名为 “Login” 的WPF解决方案,添加1个Nuget库:MaterialDesignThemes。
3.2 工程结构
3个文件变动:
- App.xaml:添加MD控件样式
- MainWindow.xaml:主窗口实现效果
3.3 App.xaml引入MD控件样式
关键样式引用代码
<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.MergedDictionaries>
<!--Primary-->
<SolidColorBrush x:Key="PrimaryHueLightBrush" Color="#FFCDD2"/>
<SolidColorBrush x:Key="PrimaryHueLightForegroundBrush" Color="#FF333333"/>
<SolidColorBrush x:Key="PrimaryHueMidBrush" Color="#f44336"/>
<SolidColorBrush x:Key="PrimaryHueMidForegroundBrush" Color="#FFEEEEEE"/>
<SolidColorBrush x:Key="PrimaryHueDarkBrush" Color="#b71c1c"/>
<SolidColorBrush x:Key="PrimaryHueDarkForegroundBrush" Color="#FFFFFFFF"/>
<!--Accent-->
<SolidColorBrush x:Key="SecondaryAccentBrush" Color="#ff1744"/>
<SolidColorBrush x:Key="SecondaryAccentForegroundBrush" Color="#FFFFFF"/>
</ResourceDictionary>
</Application.Resources>
3.4 主窗体 MainWindow.xaml
全部代码,登录窗口布局
<Window x:Class="WpfApp2.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:WpfApp2"
mc:Ignorable="d"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
Title="登录" Height="450" Width="800">
<Grid Background="#FF1E64AA">
<Grid Width="300" Height="400">
<Border CornerRadius="3" HorizontalAlignment="Center" Width="290" Height="350" VerticalAlignment="Center" Background="White" Margin="0 35 0 0">
<StackPanel Margin="0 50 0 0">
<TextBlock Text="请登录您的账号" HorizontalAlignment="Center" Foreground="Gray" Margin="30" FontSize="21" FontFamily="Champagne & Limousines" FontWeight="SemiBold"/>
<TextBox Margin="20 10" materialDesign:HintAssist.Hint="邮箱"/>
<PasswordBox Margin="20 10" materialDesign:HintAssist.Hint="密码"/>
<Grid Margin="20 0">
<CheckBox Content="记住我" HorizontalAlignment="Left"/>
<TextBlock Text="忘记密码?" Foreground="#FF2259D1" HorizontalAlignment="Right" Cursor="Hand"/>
</Grid>
<Button Content="登录" Margin="20 30"/>
</StackPanel>
</Border>
<Border Width="70" Height="70" HorizontalAlignment="Center" VerticalAlignment="Top" Background="White" CornerRadius="50">
<Border.Effect>
<DropShadowEffect BlurRadius="15" ShadowDepth="0"/>
</Border.Effect>
<materialDesign:PackIcon Kind="Mail" Foreground="{StaticResource PrimaryHueMidBrush}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="25" Height="25"/>
</Border>
</Grid>
</Grid>
</Window>
4.本文参考
Design com WPF 大神的学习视频:First Impressions and new VS 2019
开源控件库:MaterialDesignInXamlToolkit
本站对MD开源控件库的介绍:控件介绍
5.代码下载
Github源码下载:HelloDotNetCore
除非注明,文章均由 Dotnet9 整理发布,欢迎转载。
转载请注明:
作者:Dotnet9
链接:https://dotnet9.com/6845.html
来源:Dotnet9
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
评论列表(6条)
你好,我在VS2017部署了之后提示加载失败。
@smileCode:没明白你的意思
@Dotnet9:现在可以了,我安装了vs2019,还有.Net Core 3.1就能正确打开了。
@smileCode:好的,我现在是能用就尽量用.NET CORE 3.1。
@Dotnet9:嗯嗯,我现在也是装了.Net Core 3.1还有vs2019的
@smileCode:可以加我微信,保持技术交流