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/Borderprivate 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/Borderprivate 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; }}本文代码：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控件作为载体。需要引...