WPF|分享一个登录界面设计
WPF|分享一个登录界面设计
分享一个登录界面,先看效果图:
文中使用到了一些图标:
我们可以从 iconfont免费下载:
请随手创建一个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)。
看上面的截图,重点说说这两处:
左侧的图形控件公司有设计师,做这种图片是很简单的,没有的时候,可以使用Polygon
、Ellipse
等实现一些简单的效果,让界面不要那么单调:
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|分享一个登录界面设计 相关文章
- WPF 登录界面与逻辑练习
WPF 登录界面与逻辑练习 这是一个按照视频学习的部分练习代码,使用MVVM架构实现 一、程序文件架构: 二、界面效果: 三、登录界面LoginView.xaml 其中用户名,密码的控件用到了模板的样式修改(编辑模板-编辑副本) Window x:Clas...
- WPF使用XAML来搭建一个登录窗口
WPF使用XAML来搭建一个登录窗口 WPF使用XAML来搭建一个登录窗口 在Wpf项目中的学习中,在WPF中,我了解到常用的窗口页面布局元素有五个,分别为Grid网格,DockPanel泊靠式面板,StackPanel栈式面板,WrapPanel自动折行面板,Canvas画布。...
- (C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格
(C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端 “这虽然是游戏,但可不是闹着玩儿的” 前言 效果预览 WPF Blend入门之新建工程并修改为自定义窗口 控件样式模板 C#连接服务器端 首先在这里先自己庆祝一下...
- Python开发测试工具案例分享②PyQt设计登录框界面
Python开发测试工具案例分享②PyQt设计登录框界面 一、QT Designer设计登录UI 1.启动QT Designer工具; 2.QT Designer工具设计登录框,保存为login.ui文件; 3.添加资源文件,文件夹中会生成一个logo.qrc文件; 4.引用logo资源文件; 引用...
- 简单分享一个轻量级自动化测试框架目录结构设计
简单分享一个轻量级自动化测试框架目录结构设计 http://blog.csdn.net/huilan_same/article/details/52319537 更多关于python selenium的文章,请关注我的专栏: PythonSelenium自动化测试详解 很多人在做自动化测试的过程中会遇到一个瓶颈,就是能...
- python如何做一个登录注册界面
python做一个登录注册界面的方法:首先初始化一个window界面,并使用画布实现欢迎的logo;然后用代码实现登录和注册按钮;接着并进行登录判断代码;最后完成注册界面即可。 【相关学习推荐:python视频教程】 python做一个登录...
- 如何设计一个安全的登录接口?
如何设计一个安全的登录接口? Java技术栈 www.javastack.cn 关注阅读更多优质文章 作者:哒哒哒哒打代码 链接:juejin.im/post/6859214952704999438 前言 大家学写程序时,第一行代码都是 hello world 。 但是当你开始学习WEB后台技术时,很多...
- 转载给你一个登录界面如何进行测试
【转载】给你一个登录界面,如何进行测试? 原文链接:http://www.cnblogs.com/tangbohu2008/p/11226779.html 在测试当中,或者面试过程中,都会碰到各种登陆功能,Web或者APP都很普遍。 对于一个登陆页面, 通常有2个Textbox(账号和密码)...
- MVP详解---利用MVP模式实现一个登录界面
MVP详解---利用MVP模式实现一个登录界面 转载请标明出处: http://blog.csdn.net/checkiming/article/details/71909629; 本文出自:【checkiming的博客】 1. 前言 目前很多Android开发程序员们在一个安卓应用整体项目代码构架中都会选择MVP模式,或许...
- 使用Python编写一个QQ办公版的图形登录界面
使用Python编写一个QQ办公版的图形登录界面! 最近,QQ的办公版本TIM进行了一次更新升级。本次更新升级大幅修改了界面的样式,看起来更加的清爽、简洁和高效了。 这种界面州的先生还是比较喜欢的,没有QQ那么花里胡哨...
- Ride+robotframework+python3.7尝试一个脚本--登录界面
Ride+robotframework+python3.7尝试一个脚本--登录界面 根据上一篇文章https://blog.csdn.net/zaxuezhe/article/details/106259996 配置好环境之后,我们来练习下编写我们的第一个脚本吧,拿常见的登录界面来举例吧~ ~ ~动次打次 ~ ~ ~ 双击打开ride工具...
- 用Python实现一个最新QQ办公版(TIM)的登录界面
用Python实现一个最新QQ办公版(TIM)的登录界面 最近,QQ的办公版本TIM进行了一次更新升级。本次更新升级大幅修改了 界面的样式,看起来更加的清爽、简洁和高效了。 这种界面我还是比较喜欢的,没有QQ那么花里胡哨,也...
- WPF验证登录
WPF验证登录 开发工具与关键技术:Visual Studio、SQL Server 撰写时间:2019年06月08日 WPF是专业的界面技术,布局功能是它的核心技术之一。友好的用户界面和良好的用户体验离不开设计精良的布局。WPF设计师最大的工作量是布局和...
- WPF应用界面开发新起点,DevExpress WPF Theme Designer抢先看
WPF应用界面开发新起点,DevExpress WPF Theme Designer抢先看 下载DevExpress v19.2完整版 DevExpress v19.2汉化资源获取 通过DevExpress WPF Controls,您能创建有着强大互动功能的XAML基础应用程序,这些应用程序专注于当代客户的需求和构建未来...
- 简易WPF界面制作
简易WPF界面制作 简易WPF界面制作 WPF是微软推出的基于Windows的用户界面框架,属于.NET Framework 3.0的一部分。它提供了统一的编程模型、语言和框架,真正做到了分离界面设计人员与开发人员的工作;同时它提供了全新的多媒体交...
- WPF设计の画刷(Brush)
WPF设计の画刷(Brush) 原文:WPF设计の画刷(Brush) 一、什么是画刷 画刷是是一种渲染方式,用于填充图形形状,如矩形、椭圆、扇形、多边形和封闭路径。在GDI+中,画刷分为以下几种:SolidBrush,TextureBrush,HatchBrush,LinearGradien...
- WPF 基础 - 图片之界面截图
1. 功能 系统截图。 2. 实现 2.1 思路 控件继承自 System.Windows.Media.Visual, 通过 System.Windows.Media.Imaging.RenderVisualToBitmap 把 Visual 对象转换为位图 rtb 将位图转成编码器接受的一帧,类型为 BitmapFrame :BitmapFrame.Create(rtb) 将 Bi
- wpf控件设计时支持(3)
wpf控件设计时支持(3) 原文:wpf控件设计时支持(3) wpf设计时调试 编辑模型 装饰器 1.wpf设计时调试 为了更好的了解wpf设计时框架,那么调试则非常重要,通过以下配置可以调试控件的设计时代码 (1)将启动项目配置成外部的visual studio i...
- WPF Demo(MVVM设计模式)
WPF MVVM设计模式实例 本人是WPF初学者,以下实例仅为本人的理解,如有错漏欢迎补充。 我们先看成品样图,并一步一步按此效果完成。 开发环境:Win10、VS2019 (一)实现将学生信息显示与主界面功能。 1.使用WPF模板创建一个项...
- Unity3D界面嵌入WPF界面中(鼠标键盘均可正常响应)
Unity3D界面嵌入WPF界面中(鼠标键盘均可正常响应) Unity3D界面嵌入WPF界面中(鼠标键盘均可正常响应) unity3D界面不能够直接嵌入到WPF控件中,但是可以嵌入到WinForm控件中,所以我们需要在WPF中使用WinForm控件作为载体。需要引...