WPF 极简风格登录界面

最新推荐文章于 2024-05-22 10:27:57 发布

Love_HBB

最新推荐文章于 2024-05-22 10:27:57 发布

阅读量1.2k

点赞数

分类专栏： C#基础文章标签： wpf c# microsoft

本文链接：https://blog.csdn.net/Love_HBB/article/details/129396408

版权

C#基础专栏收录该内容

12 篇文章 2 订阅

订阅专栏

UI使用MaterialDesign，先看界面

一、界面

极简登录界面

二、下载MaterialDesign包

我使用的是VS2019，选择要引入MaterialDesign包的项目，鼠标右击选择NuGet程勋包

在浏览页签中输入MaterialDesign，下载MaterialDesignColors和MaterialDesignThemes两个包

安装成功后，在已安装页签中能看到这两个UI包

三、引用MaterialDesign

可以在GitHub下载源码，源码里有使用的Demo

GitHub地址：GitHub - MaterialDesignInXAML/MaterialDesignInXamlToolkit: Google's Material Design in XAML & WPF, for C# & VB.Net.

在App.xaml中引入要使用的包

<Application x:Class="Login_WPF.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:Login_WPF"
             StartupUri="MainWindow.xaml">
    <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 Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

四、登录界面代码

Xaml代码：

<Window x:Class="Login_WPF.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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        Background="{x:Null}"
        AllowsTransparency="True"
        WindowStyle="None"
        WindowStartupLocation="CenterScreen"
        xmlns:local="clr-namespace:Login_WPF"
        mc:Ignorable="d"
        Title="MainWindow" Height="760" Width="450">
    <materialDesign:Card UniformCornerRadius="15" Background="{DynamicResource MaterialDesignPaper}" Margin="25"
                          materialDesign:ShadowAssist.ShadowDepth="Depth4">
        <materialDesign:DialogHost CloseOnClickAway="True" x:Name="DialogHost">
            <StackPanel>
                <materialDesign:PopupBox HorizontalAlignment="Right" Margin="0 20 20 0"
                   PlacementMode="BottomAndAlignRightEdges"  StaysOpen="False" Height="25">
                    <StackPanel>
                    <StackPanel Margin="16 10 0 6" Orientation="Horizontal" HorizontalAlignment="Center">
                        <TextBlock  VerticalAlignment="Center" Text="Dark"/>
                        <ToggleButton Cursor="Hand" ToolTip="Enabled Dark Mode" Margin="12 0 8 0"
                                      x:Name="themeToggle" IsChecked="{Binding IsDarkTheme}"
                                      Click="themeToggle_Click"></ToggleButton>
                        </StackPanel>
                        <Button ToolTip="Having Trouble Logging In?" Margin="0 8 0 0" Content="Help"></Button>
                        <Button x:Name="btn_exit" ToolTip="Close Application" Content="Exit" Click="exitApp"/>
                    </StackPanel>                               
                </materialDesign:PopupBox>
                <Image Margin="0 60 0 5" Height="100" Source="wind.png"/>
                <TextBlock Margin="0 25 0 5" HorizontalAlignment="Center" FontSize="28" FontWeight="Bold" Text="Welcome Back"/>
                <TextBlock FontSize="17" FontWeight="SemiBold" HorizontalAlignment="Center" Text="Log in to your account"/>
                <TextBox Margin="0 50 0 0" x:Name="txtUserName" Width="300" FontSize="18"
                         materialDesign:HintAssist.Hint="Enter Username" BorderThickness="2" 
                         BorderBrush="{DynamicResource MaterialDesignDivider}"
                         Style="{StaticResource MaterialDesignOutlinedTextBox}"/>
                <PasswordBox Margin="0 20 0 0" x:Name="txtPassword" Width="300" FontSize="18"
                         materialDesign:HintAssist.Hint="Enter Password" BorderThickness="2" 
                         BorderBrush="{DynamicResource MaterialDesignDivider}"
                         Style="{StaticResource MaterialDesignOutlinedPasswordBox}"/>

                <Button Margin="0 20 0 0" x:Name="loginBtn" Width="300" Height="53" FontSize="18" 
                        materialDesign:ButtonAssist.CornerRadius="10" Content="LOG IN" materialDesign:ShadowAssist.ShadowDepth="Depth0"
                         Style="{StaticResource MaterialDesignFlatMidBgButton}"/>
                <Button Margin="0 20 0 0" x:Name="signupBtn" Width="300" Height="53" FontSize="18" 
                        materialDesign:ButtonAssist.CornerRadius="10" Content="Create Account" materialDesign:ShadowAssist.ShadowDepth="Depth0"
                         Style="{StaticResource MaterialDesignFlatButton}"/>

            </StackPanel>
            
            
        </materialDesign:DialogHost>
        
    </materialDesign:Card>
</Window>

.cs代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using MaterialDesignThemes.Wpf;

namespace Login_WPF
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public bool IsDarkTheme { get; set; }
        private readonly PaletteHelper paletteHelper = new PaletteHelper();

        public MainWindow()
        {
            InitializeComponent();
            
        }

        private void themeToggle_Click(object sender, RoutedEventArgs e)
        {
            ITheme theme = paletteHelper.GetTheme();
            if (IsDarkTheme = theme.GetBaseTheme() == BaseTheme.Dark)
            {
                IsDarkTheme = false;
                theme.SetBaseTheme(Theme.Light);
            }
            else
            {

                IsDarkTheme = true;
                theme.SetBaseTheme(Theme.Dark);
            }
            paletteHelper.SetTheme(theme);
        }

        private void exitApp(object sender, RoutedEventArgs e)
        {
            Application.Current.Shutdown();
        }
        protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
        {
            base.OnMouseLeftButtonDown(e);
            DragMove();
        }
    }
}