WPF 极简风格登录界面

这篇具有很好参考价值的文章主要介绍了WPF 极简风格登录界面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

UI使用MaterialDesign,先看界面

一、界面

using materialdesignthemes.wpf;实现showdialog,C#基础,wpf,c#,microsoft

using materialdesignthemes.wpf;实现showdialog,C#基础,wpf,c#,microsoft

极简登录界面

二、下载MaterialDesign包

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

using materialdesignthemes.wpf;实现showdialog,C#基础,wpf,c#,microsoft

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

using materialdesignthemes.wpf;实现showdialog,C#基础,wpf,c#,microsoft

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

using materialdesignthemes.wpf;实现showdialog,C#基础,wpf,c#,microsoft

  三、引用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代码文章来源地址https://www.toymoban.com/news/detail-768000.html

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

到了这里,关于WPF 极简风格登录界面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • WPF实现Element UI风格的日期时间选择器

    业务开发过程中遇到一个日期范围选择的需求,和Element UI的DateTimePicker组件比较类似,由两个日历控件组成,联动选择起始时间和结束时间。 WPF中提供了一个 DatePicker 的控件,主要由 DatePickerTextBox 、 Button 和一个 Calendar 组成,其中 Calendar 是后台代码动态添加的,因此不能直

    2024年02月12日
    浏览(47)
  • WPF Extended.Wpf.Toolkit 加载界面

    1、NuGet 中安装 Extended.Wpf.Toolkit 。 2、在MainWindow.xaml中添加xmlns:tk=\\\"http://schemas.xceed.com/wpf/xaml/toolkit\\\" 。 MainWindow.xaml 代码如下。 Window x:Class=\\\"WPF_Extended_Wpf_Toolkit_Loading.MainWindow\\\"         xmlns=\\\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\\\"         xmlns:x=\\\"http://schemas.microsoft.com/winfx/

    2024年04月28日
    浏览(41)
  • 基于Material Design风格开源、易用、强大的WPF UI控件库

    今天大姚给大家分享一款基于Material Design风格开源、免费(MIT License)、易于使用、强大的WPF UI控件库: MaterialDesignInXamlToolkit 。 MaterialDesignInXamlToolkit 是一个开源、易于使用、强大的 WPF UI 控件库,旨在帮助开发人员在 C# 和 VB.Net 中实现 Google 的 Material Design 风格的用户界面。

    2024年04月23日
    浏览(53)
  • WPF界面美化

    官网地址: gw​​​​​​​MahApps.Metro - Quick Start 使用方法 1.使用NuGet搜索 MahApps.Metro  2.修改Windows为mah:MertoWindow  3.修改MainWindow.xaml.cs 继承MetroWindos 4.App.xaml中加入       ResourceDictionary             ResourceDictionary.MergedDictionaries                 !-- MahApps.Metro resource dictiona

    2024年02月06日
    浏览(38)
  • WPF 界面结构化处理

    WPF 框架是开源的,但是不能跨平台,可以使用MAUI,这个框架可以跨平台,WPF源码可以在github上下载,下载地址:https://gitbub.com/dotnet/wpf。 框架结构 如图 XAML:eXtensible Application Markup Language的英文缩写,相应的中文名称为:可扩展应用程序标记语言。 命名空间 默认 映射:x/

    2024年02月13日
    浏览(59)
  • 【WPF】管理系统主界面

    前台代码 后台代码

    2024年02月04日
    浏览(65)
  • WPF显示初始界面--SplashScreen

    WPF应用程序的运行速度快,但并不能在瞬间启动。当第一次启动应用程序时,会有一些延迟,因为公共语言运行时(CLR)首先需要初始化.NET环境,然后启动应用程序。 对于WPF中大型程序启动时需要较长时间加载底层控件而产生的空隙可以由加载界面来填充,以此减少软件空

    2024年02月12日
    浏览(48)
  • WPF绑定与通知属性到界面

    本文同时为b站WPF课程的笔记,相关示例代码 在上一篇文章C#代码事件里面,我们介绍了利用给控件命名的方式,在后端代码中访问并修改属性。这样子直截了当,但是这样后端代码依赖于前端。如果前端的代码变动较大,后端代码可能要大面积重构。 于是利用绑定的这种方

    2024年01月25日
    浏览(48)
  • WPF实战学习笔记06-设置待办事项界面

    创建待办待办事项集合并初始化 TodoViewModel: 创建绑定右侧命令、变量 设置界面

    2024年02月15日
    浏览(48)
  • html好看的登录界面2(十四种风格登录源码)

    作者:xcLeigh 文章地址:https://blog.csdn.net/weixin_43151418/article/details/131206421 html好看的登录页面2(十四种风格登录源码) 登录的第二版,大气好看的网站登录页面html源码模板,页面源码,适用于各种项目,也可以用作学习,各种登录风格都有,高端大气上档次,直接嵌入使用,

    2024年02月09日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包