微信公众号：Dotnet9，网站：Dotnet9，问题或建议：请网站留言， 如果对您有所帮助：欢迎赞赏。

C# WPF 普通登录界面

内容目录

1. 实现效果
2. 业务场景
3. 编码实现
4. 本文参考
5. 源码下载

1.实现效果

效果 

2.业务场景

常规业务

3.编码实现

3.1 添加Nuget库

使用 .Net Core 3.1 创建名为 “Login” 的WPF解决方案，添加1个Nuget库：MaterialDesignThemes。

3.2 工程结构

3个文件变动：

1. App.xaml：添加MD控件样式
2. 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 &amp; 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