WPF|分享一个登录界面设计

作者:神秘网友 发布时间:2022-05-13 07:13:08

WPF|分享一个登录界面设计

分享一个登录界面,先看效果图:

WPF|分享一个登录界面设计

准备

文中使用到了一些图标:

WPF|分享一个登录界面设计

我们可以从 iconfont免费下载:

WPF|分享一个登录界面设计

代码简单说明

请随手创建一个WPF项目(.NET Framework、.NET 5\6\7皆可),使用tree /f命令看看最终的文件结构,和上面的截图一致:

C:.│  ModernLoginPage.xaml│  ModernLoginPage.xaml.cs│└─Images        close.png        email.png        github.png        google.png        lock.png        wechat.png

简单吧,一个图片目录存放前面下载的图标,一个xaml文件做登录界面设计,xaml.cs做界面按钮响应事件处理(实际项目建议使用Mvvm)。

WPF|分享一个登录界面设计

看上面的截图,重点说说这两处:

左侧的图形控件

公司有设计师,做这种图片是很简单的,没有的时候,可以使用PolygonEllipse等实现一些简单的效果,让界面不要那么单调:

Canvas    Polygon Points="0, 20 230,140 0,270" Fill="#4EB1B6" /    Polygon Points="100, 400 200,370 180,470" Fill="#4EB1B6" /    Ellipse Margin="250 450 0 0" Width="40" Height="40" Fill="#4EB1B6" /    Ellipse Margin="50 400 0 0" Width="20" Height="20" Fill="#4EB1B6" //Canvas
右侧的账号文本框和密码框

作者为了演示效果,账号文本框使用的 一张图片 + 一个标签控件 + 一个文本框 控件组合实现:

Border Padding="10" BorderThickness="1" BorderBrush="#acb0af" Margin="70 7" CornerRadius="5"    Grid        Grid.ColumnDefinitions            ColumnDefinition Width="auto" /            ColumnDefinition Width="*" /        /Grid.ColumnDefinitions        Image Source="/TerminalMACS.TestDemo;component/Views/ModernLogin/Images/email.png" Height="20" /        TextBlock x:Name="textEmail" MouseDown="textEmail_MouseDown" Text="邮箱"                    Style="{StaticResource textHint}" /        TextBox x:Name="txtEmail" TextChanged="txtEmail_TextChanged" Style="{StaticResource textBox}" /    /Grid/Border
private void textEmail_MouseDown(object sender, MouseButtonEventArgs e){    txtEmail.Focus();}private void txtEmail_TextChanged(object sender, TextChangedEventArgs e){    if (!string.IsNullOrEmpty(txtEmail.Text)  txtEmail.Text.Length  0)    {        textEmail.Visibility = Visibility.Collapsed;    }    else    {        textEmail.Visibility = Visibility.Visible;    }}

代码比较简单,.cs文件代码:

鼠标点击标签时,将账号文本框设置为焦点控件,提高用户体验文本框中输入账号信息时 显示|隐藏 标签

密码框逻辑同账号文本框:

Border Padding="10" BorderThickness="1" BorderBrush="#acb0af" Margin="70 7" CornerRadius="5"    Grid        Grid.ColumnDefinitions            ColumnDefinition Width="auto" /            ColumnDefinition Width="*" /        /Grid.ColumnDefinitions        Image Source="/TerminalMACS.TestDemo;component/Views/ModernLogin/Images/lock.png" Height="20" /        TextBlock x:Name="textPassword" MouseDown="textPassword_MouseDown" Text="密码"                    Style="{StaticResource textHint}" /        PasswordBox x:Name="txtPassword" PasswordChanged="txtPassword_TextChanged"                        Style="{StaticResource textBox}" /    /Grid/Border
private void textPassword_MouseDown(object sender, MouseButtonEventArgs e){    txtPassword.Focus();}private void txtPassword_TextChanged(object sender, RoutedEventArgs e){    if (!string.IsNullOrEmpty(txtPassword.Password)  txtPassword.Password.Length  0)    {        textPassword.Visibility = Visibility.Collapsed;    }    else    {        textPassword.Visibility = Visibility.Visible;    }}
参考:油管视频:C# WPF UI | How to Design Modern Login Page in WPF油管视频作者:C# WPF UI Academy

本文代码:ModernLogin

时间如流水,只能流去不流回。

WPF|分享一个登录界面设计 相关文章

  1. WPF 登录界面与逻辑练习

    WPF 登录界面与逻辑练习 这是一个按照视频学习的部分练习代码,使用MVVM架构实现 一、程序文件架构: 二、界面效果: 三、登录界面LoginView.xaml 其中用户名,密码的控件用到了模板的样式修改(编辑模板-编辑副本) Window x:Clas...

  2. WPF使用XAML来搭建一个登录窗口

    WPF使用XAML来搭建一个登录窗口 WPF使用XAML来搭建一个登录窗口 在Wpf项目中的学习中,在WPF中,我了解到常用的窗口页面布局元素有五个,分别为Grid网格,DockPanel泊靠式面板,StackPanel栈式面板,WrapPanel自动折行面板,Canvas画布。...

  3. (C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格

    (C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端 “这虽然是游戏,但可不是闹着玩儿的” 前言 效果预览 WPF Blend入门之新建工程并修改为自定义窗口 控件样式模板 C#连接服务器端 首先在这里先自己庆祝一下...

  4. Python开发测试工具案例分享②PyQt设计登录框界面

    Python开发测试工具案例分享②PyQt设计登录框界面 一、QT Designer设计登录UI 1.启动QT Designer工具; 2.QT Designer工具设计登录框,保存为login.ui文件; 3.添加资源文件,文件夹中会生成一个logo.qrc文件; 4.引用logo资源文件; 引用...

  5. 简单分享一个轻量级自动化测试框架目录结构设计

    简单分享一个轻量级自动化测试框架目录结构设计 http://blog.csdn.net/huilan_same/article/details/52319537 更多关于python selenium的文章,请关注我的专栏: PythonSelenium自动化测试详解 很多人在做自动化测试的过程中会遇到一个瓶颈,就是能...

  6. python如何做一个登录注册界面

    python做一个登录注册界面的方法:首先初始化一个window界面,并使用画布实现欢迎的logo;然后用代码实现登录和注册按钮;接着并进行登录判断代码;最后完成注册界面即可。 【相关学习推荐:python视频教程】 python做一个登录...

  7. 如何设计一个安全的登录接口?

    如何设计一个安全的登录接口? Java技术栈 www.javastack.cn 关注阅读更多优质文章 作者:哒哒哒哒打代码 链接:juejin.im/post/6859214952704999438 前言 大家学写程序时,第一行代码都是 hello world 。 但是当你开始学习WEB后台技术时,很多...

  8. 转载给你一个登录界面如何进行测试

    【转载】给你一个登录界面,如何进行测试? 原文链接:http://www.cnblogs.com/tangbohu2008/p/11226779.html 在测试当中,或者面试过程中,都会碰到各种登陆功能,Web或者APP都很普遍。 对于一个登陆页面, 通常有2个Textbox(账号和密码)...

  9. MVP详解---利用MVP模式实现一个登录界面

    MVP详解---利用MVP模式实现一个登录界面 转载请标明出处: http://blog.csdn.net/checkiming/article/details/71909629; 本文出自:【checkiming的博客】 1. 前言 目前很多Android开发程序员们在一个安卓应用整体项目代码构架中都会选择MVP模式,或许...

  10. 使用Python编写一个QQ办公版的图形登录界面

    使用Python编写一个QQ办公版的图形登录界面! 最近,QQ的办公版本TIM进行了一次更新升级。本次更新升级大幅修改了界面的样式,看起来更加的清爽、简洁和高效了。 这种界面州的先生还是比较喜欢的,没有QQ那么花里胡哨...

  11. Ride+robotframework+python3.7尝试一个脚本--登录界面

    Ride+robotframework+python3.7尝试一个脚本--登录界面 根据上一篇文章https://blog.csdn.net/zaxuezhe/article/details/106259996 配置好环境之后,我们来练习下编写我们的第一个脚本吧,拿常见的登录界面来举例吧~ ~ ~动次打次 ~ ~ ~ 双击打开ride工具...

  12. 用Python实现一个最新QQ办公版(TIM)的登录界面

    用Python实现一个最新QQ办公版(TIM)的登录界面 最近,QQ的办公版本TIM进行了一次更新升级。本次更新升级大幅修改了 界面的样式,看起来更加的清爽、简洁和高效了。 这种界面我还是比较喜欢的,没有QQ那么花里胡哨,也...

  13. WPF验证登录

    WPF验证登录 开发工具与关键技术:Visual Studio、SQL Server 撰写时间:2019年06月08日 WPF是专业的界面技术,布局功能是它的核心技术之一。友好的用户界面和良好的用户体验离不开设计精良的布局。WPF设计师最大的工作量是布局和...

  14. WPF应用界面开发新起点,DevExpress WPF Theme Designer抢先看

    WPF应用界面开发新起点,DevExpress WPF Theme Designer抢先看 下载DevExpress v19.2完整版 DevExpress v19.2汉化资源获取 通过DevExpress WPF Controls,您能创建有着强大互动功能的XAML基础应用程序,这些应用程序专注于当代客户的需求和构建未来...

  15. 简易WPF界面制作

    简易WPF界面制作 简易WPF界面制作 WPF是微软推出的基于Windows的用户界面框架,属于.NET Framework 3.0的一部分。它提供了统一的编程模型、语言和框架,真正做到了分离界面设计人员与开发人员的工作;同时它提供了全新的多媒体交...

  16. WPF设计の画刷(Brush)

    WPF设计の画刷(Brush) 原文:WPF设计の画刷(Brush) 一、什么是画刷 画刷是是一种渲染方式,用于填充图形形状,如矩形、椭圆、扇形、多边形和封闭路径。在GDI+中,画刷分为以下几种:SolidBrush,TextureBrush,HatchBrush,LinearGradien...

  17. WPF 基础 - 图片之界面截图

    1. 功能 系统截图。 2. 实现 2.1 思路 控件继承自 System.Windows.Media.Visual, 通过 System.Windows.Media.Imaging.RenderVisualToBitmap 把 Visual 对象转换为位图 rtb 将位图转成编码器接受的一帧,类型为 BitmapFrame :BitmapFrame.Create(rtb) 将 Bi

  18. wpf控件设计时支持(3)

    wpf控件设计时支持(3) 原文:wpf控件设计时支持(3) wpf设计时调试 编辑模型 装饰器 1.wpf设计时调试 为了更好的了解wpf设计时框架,那么调试则非常重要,通过以下配置可以调试控件的设计时代码 (1)将启动项目配置成外部的visual studio i...

  19. WPF Demo(MVVM设计模式)

    WPF MVVM设计模式实例 本人是WPF初学者,以下实例仅为本人的理解,如有错漏欢迎补充。 我们先看成品样图,并一步一步按此效果完成。 开发环境:Win10、VS2019 (一)实现将学生信息显示与主界面功能。 1.使用WPF模板创建一个项...

  20. Unity3D界面嵌入WPF界面中(鼠标键盘均可正常响应)

    Unity3D界面嵌入WPF界面中(鼠标键盘均可正常响应) Unity3D界面嵌入WPF界面中(鼠标键盘均可正常响应) unity3D界面不能够直接嵌入到WPF控件中,但是可以嵌入到WinForm控件中,所以我们需要在WPF中使用WinForm控件作为载体。需要引...

每天更新java,php,javaScript,go,python,nodejs,vue,android,mysql等相关技术教程,教程由网友分享而来,欢迎大家分享IT技术教程到本站,帮助自己同时也帮助他人!

Copyright 2021, All Rights Reserved. Powered by 跳墙网(www.tqwba.com)|网站地图|关键词