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

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

ff140698eefaa4c553345921e56c0696.gif

准备

文中使用到了一些图标:

140b90e43a895b92dccf35bb4d6479d0.png

我们可以从 iconfont[1]免费下载:

f67e7d111e09939b73038d38cccfeea2.gif

代码简单说明

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

C:.
│  ModernLoginPage.xaml
│  ModernLoginPage.xaml.cs
│
└─Imagesclose.pngemail.pnggithub.pnggoogle.pnglock.pngwechat.png

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

10b400ba76e6b4d4a5e328f2f8bae47a.png

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

  1. 左侧的图形控件

公司有设计师,做这种图片是很简单的,没有的时候,可以使用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>
  1. 右侧的账号文本框和密码框

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

<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[2]

  • 油管视频作者:C# WPF UI Academy[3]

本文代码:ModernLogin[4]

参考资料

[1]

iconfont: https://www.iconfont.cn/

[2]

C# WPF UI | How to Design Modern Login Page in WPF: https://www.youtube.com/watch?v=PoPUB1_q2kE&t=907s

[3]

C# WPF UI Academy: https://www.youtube.com/channel/UCtVawNW7C2t6AX1vex6a_vw

[4]

ModernLogin: https://github.com/dotnet9/TerminalMACS.ManagerForWPF/tree/master/src/TerminalMACS.TestDemo/Views/ModernLogin

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/287634.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《零基础看得懂的C++入门教程 》——(6)自己动手写个函数

一、学习目标 了解C语言的自定义函数的使用方法了解C语言自定义函数的传参了解C语言自定义函数的返回值 目录 预备第一篇&#xff0c;使用软件介绍在这一篇&#xff0c;C与C使用的软件是一样的&#xff0c;查看这篇即可&#xff1a;《软件介绍》 想了解编译原理和学习方法点…

k8s mysql数据同步_K8s——MySQL实现数据持久化

1、搭建nfs存储[rootdocker-k8s01 ~]# yum -y install nfs-utils[rootdocker-k8s01 ~]# mkdir /nfsdata/mysql -p[rootdocker-k8s01 ~]# cat /etc/exports/nfsdata *(rw,sync,no_root_squash)[rootdocker-k8s01 ~]# systemctl restart nfs-server[rootdocker-k8s01 ~]# systemc…

【计算机图形学】实验:C#语言采用GDI+定义笔刷并填充图形完整实验操作流程

一、实验目的: 熟练掌握在.net环境下对笔刷的定义,并可用定义好的笔刷填充多边形。 二、实验准备: 学习在.net环境下GDI+所提供的5种笔刷类型,掌握定义笔刷的方法和填充图形的函数,如FillRectange ( )、FillEllipse ( )等。 三、实验内容: 在.net环境中设计一个窗体…

Android之提示Invalid Region.Op - only INTERSECT and DIFFERENCE are allowed

1 问题 02-28 22:44:33.031 7379 7379 E AndroidRuntime: java.lang.IllegalArgumentException: Invalid Region.Op - only INTERSECT and DIFFERENCE are allowed 02-28 22:44:33.031 7379 7379 E AndroidRuntime: at android.graphics.Canvas.checkValidClipOp(C…

使用Java API的5个技巧

本文介绍了一些关于Java API安全和性能方面的简单易用的技巧&#xff0c;其中包括保证API Key安全和开发Web Service方面中在框架方面选择的一些建议。 程序员都喜欢使用API&#xff01;例如为app应用构建API或作为微服务架构体系的一部分。当然&#xff0c;使用API的前提是能让…

管道模式 pipe

先放一个图&#xff0c;预则立嘛 PipelinePattern.rar 这里是 不完整的码转载于:https://www.cnblogs.com/ganmk--jy/p/5525897.html

《零基础看得懂的C++入门教程 》——(7)小数组玩起来

一、学习目标 了解数组的使用方法了解一维数组的使用方法了解一维数组与循环的使用方法 目录 预备第一篇&#xff0c;使用软件介绍在这一篇&#xff0c;C与C使用的软件是一样的&#xff0c;查看这篇即可&#xff1a;《软件介绍》 想了解编译原理和学习方法点这篇&#xff0c…

SSO 方案演进

1背景介绍 随着业务与技术的发展&#xff0c;现今比以往任何时候都更需要单点登录 SSO 身份验证。现在几乎每个网站都需要某种形式的身份验证才能访问其功能和内容。随着网站和服务数量的增加&#xff0c;集中登录系统已成为一种必要。在本文中&#xff0c;我们将讨论下 …

【计算机图形学】实验:VB.net环境下的图形裁剪完整实验操作流程

一、实验目的: 熟练掌握在.net环境下对图形的裁剪。 二、实验准备: 学习图形裁剪的基本算法,以及在.net环境下裁剪图形的基本方法。 三、实验内容: 在.net环境中利用裁剪图形的基本方法对任意图形进行裁剪。

UI之常用通过颜色值和透明度怎么得到最后的颜色值

1 、问题 UI给了颜色#000000&#xff0c;透明度是75%&#xff0c;我需要最终的颜色值。 2 、透明度色值表 00%FF&#xff08;不透明&#xff09; 5%F2 10%E5 15%D8 20%CC 25%BF 30%B2 35%A5 40%99 45%8c 50%7F 55%72 60%66 65%59 70%4c 75%3F 80%33 85%21 90%19 95%0c 100%00…

《零基础看得懂的C++入门教程 》——(8)搞定二维数组与循环嵌套

一、学习目标 了解二维数组的使用方法了解循环嵌套的使用方法 目录 预备第一篇&#xff0c;使用软件介绍在这一篇&#xff0c;C与C使用的软件是一样的&#xff0c;查看这篇即可&#xff1a;《软件介绍》 想了解编译原理和学习方法点这篇&#xff0c;学习方法和一些原理C与C都…

mybatis模糊查询不同写法

工作中用到&#xff0c;写三种用法吧&#xff0c;第四种为大小写匹配查询 1. sql中字符串拼接 SELECT * FROM tableName WHERE name LIKE CONCAT(CONCAT(%, #{text}), %); 2. 使用 ${...} 代替 #{...} SELECT * FROM tableName WHERE name LIKE %${text}%; 3. 程序中拼接 Java …

常见的Ubuntu命令30条(一)

Ubuntu命令是指在Ubuntu操作系统中用于执行各种任务和操作的命令行指令。这些命令可以用于管理系统、配置网络、安装软件、浏览文件等。Ubuntu命令通常在终端&#xff08;Terminal&#xff09;应用程序中输入并执行。 在Ubuntu中&#xff0c;有许多常用的命令和指令。以下是一…

【计算机图形学】实验:C#.net环境下的图形变换完整实验操作流程

一、实验目的: 熟练掌握在.net环境下对图形的变换方法。 二、实验准备: 学习图形变换的基本算法,如平移、旋转、缩放等,以及在.net环境下变换图形的基本方法。 三、实验内容: 在.net环境中利用变换图形的基本方法对图形进行变换,包括平移、旋转、缩放、对称、复合变…

Android之给ImageView添加点击效果

1 问题 给ImageView添加点击效果 2 解决办法 1&#xff09;、新建selector.xml文件 <?xml version"1.0" encoding"utf-8"?> <selector xmlns:android"http://schemas.android.com/apk/res/android"><item android:drawable&…

python基础知识纵览(下)

python函数 1.函数作用 最大化代码重用和最小化代码冗余流程的分解2.函数基本概念 def创建对象并赋值给某一变量## 创建一个函数对象并赋值给fn_namedef fn_name(args1,args2,...,argsN): <statements>复制代码def是可执行的代码## 通过if语句判断来做定义函数,def是实…

《零基础看得懂的C++入门教程 》——(9)结构体原来如此

一、学习目标 了解C语言的结构体的使用方法了解C语言结构体的结构的赋值了解多种C语言结构体变量的赋值方法和取值方法 目录 预备第一篇&#xff0c;使用软件介绍在这一篇&#xff0c;C与C使用的软件是一样的&#xff0c;查看这篇即可&#xff1a;《软件介绍》 想了解编译原…

微信小程序python token验证_微信小程序python 用户认证

按流程图来先通过wx.login()获取code,再通过我们后台配置的接口获取openid和session_key// 登录wx.login({success: res > {console.log(res)// 发送 res.code 到后台换取 openId, sessionKey, unionIdwx.request({url: api.GET_OPENID, //data: {js_code: res.code},succes…

C#实用技巧之:将图标打包进DLL并读取

概述个人的项目界面有时候需要用到很多图标&#xff0c;这些图片可以建立一个文件夹单独存放&#xff0c;但有时涉及到多台设备部署的话&#xff0c;每台设备都需要随项目一起拷贝过去&#xff0c;如果忘记了界面显示就会出问题&#xff0c;有没有更好的办法解决&#xff1f;有…

强制IE浏览器或WebBrowser控件使用指定版本显示网页

最近为了抓取淘宝的成交数据,用C#的WebBrowser控件开发了一个简单的程序. 发现WebBrowser控件默认使用的版本是IE7的兼容模式.而淘宝的宝贝详细页居然对IE7的支持不是很好. 成交记录无法显示,而我本机安装的是IE10,那么有没有办法使我的WebBrowser控件的使用的IE版本高点呢? 查…