.NET 5 开发WPF - 美食应用登录UI设计

点击上方“Dotnet9”添加关注哦

Demo演示:

演示动画

你的时间宝贵,不想看啰嗦的文字,可直接拉到文末下载源码!

1. 新建项目

站长开发环境:

  • VS 2019企业版 16.70

  • .NET 5 Preview 5

.NET 5 WPF 项目模板和 .NET Core 3.1 WPF 项目模板没有区别,创建好项目后,NuGet 引入 MaterialDesignThemes 库:

安装MaterialDesignThemes库

2.引入样式

演示Demo就一个xaml文件和xaml.cs文件,为了方便后面收集WPF界面设计效果,统一放在了开源项目TerminalMACS.ManagerForWPF[1]中,所以控件样式引用直接在FoodAppLoginView.xaml中添加:

<Window.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.Amber.xaml" /><ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" /></ResourceDictionary.MergedDictionaries></ResourceDictionary>
</Window.Resources>

3.控件动画效果

见上面GIF动画,登录窗口加载时,用户名输入框、密码输入框、记住密码、右侧背景图片等元素有动画效果,每个部分代码结构类似,比如下面的用户名输入框代码:

<!--#region User name textblox-->
<materialDesign:TransitioningContent Grid.Row="2" Margin="90,20,00,0" HorizontalAlignment="Left"><materialDesign:TransitioningContent.OpeningEffects><materialDesign:TransitionEffect Kind="SlideInFromLeft" Duration="0:0:2"/></materialDesign:TransitioningContent.OpeningEffects><StackPanel Style="{StaticResource setVisibilityBasedLogin}" Orientation="Horizontal"><materialDesign:PackIcon Kind="Account" Width="16" Height="16" VerticalAlignment="Center"Margin="0,5,10,0" Foreground="{Binding ElementName=NameTextBox, Path=BorderBrush}"/><TextBox x:Name="NameTextBox" Width="140" materialDesign:HintAssist.Hint="{markup:I18n {x:Static i18NResources:Language.FoodAppLoginView_UserName}}"Style="{StaticResource MaterialDesignFloatingHintTextBox}"/></StackPanel>
</materialDesign:TransitioningContent>
<!--#endregion-->

使用了开源控件MD的TransitioningContent组件,其中TransitionEffect的Kind属性设置控件动画方向。

4. 模拟登录

登录按钮布局代码:

<!--#region control panel-->
<materialDesign:TransitioningContent Grid.Row="4" Margin="40,20,0,0"><materialDesign:TransitioningContent.OpeningEffects><materialDesign:TransitionEffect Kind="SlideInFromBottom" Duration="0:0:2"/></materialDesign:TransitioningContent.OpeningEffects><StackPanel Style="{StaticResource setVisibilityBasedLogin}" Orientation="Horizontal" HorizontalAlignment="Center"><CheckBox Content="{markup:I18n {x:Static i18NResources:Language.FoodAppLoginView_RememberMe}}"/><Button Style="{StaticResource MaterialDesignRaisedButton}"Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}"materialDesign:ButtonAssist.CornerRadius="20"Width="80" Height="40" Margin="120,0,0,0"Content="{markup:I18n {x:Static i18NResources:Language.FoodAppLoginView_Login}}"/></StackPanel>
</materialDesign:TransitioningContent>
<!--#endregion-->

点击登录时,打开等待对话框(点击时绑定了materialDesign:DialogHost.OpenDialogCommand),在等待对话框的打开与关闭事件中做登录逻辑处理。

private async Task<bool> ValidateCreds()
{// 模拟登录// 你可以发送登录信息到服务器,得到认证回馈await Task.Delay(TimeSpan.FromSeconds(2));Random gen = new Random(DateTime.Now.Millisecond);int loginProb = gen.Next(100);return loginProb <= 20;
}private async void OpenCB_DialogOpened(object sender, MaterialDesignThemes.Wpf.DialogOpenedEventArgs eventArgs)
{try{this.IsJustStarted = true;this.LoginStatusmsg = "";bool isLoggedIn = await ValidateCreds();if (isLoggedIn){// 需要关闭登录对话框并显示主窗口eventArgs.Session.Close(true);}else{// 登录失败,设置false作为参数eventArgs.Session.Close(false);}}catch (Exception){//throw;}
}private void ClosingCB_DialogClosing(object sender, MaterialDesignThemes.Wpf.DialogClosingEventArgs eventArgs)
{if (eventArgs.Parameter == null){return;}IsLoggedIn = (bool)eventArgs.Parameter;IsJustStarted = false;if(IsLoggedIn){this.LoginStatusmsg = I18nManager.Instance.Get(I18nResources.Language.FoodAppLoginView_Success).ToString();}else{this.LoginStatusmsg = I18nManager.Instance.Get(I18nResources.Language.FoodAppLoginView_Fail).ToString();}
}

等待对话框打开事件中,模拟登录逻辑。

等待对话框关闭事件中,做界面响应信息。

5. 源码下载

上面只贴了部分关键代码,源码已放Github中。

参考视频:WPF Food App Login UI Material Design [Speed Design][2]

Demo源码:FoodAppLoginUI[3]

[1]

TerminalMACS.ManagerForWPF: https://github.com/dotnet9/TerminalMACS.ManagerForWPF

[2]

WPF Food App Login UI Material Design [Speed Design]: https://www.youtube.com/watch?v=1i5oWNvIYmo

[3]

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

关注Dotnet9,分享更多好文

如果本文对你有用,

不妨点个“在看”或者转发朋友圈

????Github源码查询

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

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

相关文章

[JavaWeb-HTTP]HTTP_请求消息_请求头请求体

请求消息数据格式 1. 请求行请求方式 请求url 请求协议/版本GET /login.html HTTP/1.1* 请求方式&#xff1a;* HTTP协议有7中请求方式&#xff0c;常用的有2种* GET&#xff1a;1. 请求参数在请求行中&#xff0c;在url后。2. 请求的url长度有限制的3. 不太安全* POST&#xf…

字典树模板+洛谷P2580 于是他错误的点名开始了

题目&#xff1a; 题目背景 XS中学化学竞赛组教练是一个酷爱炉石的人。 他会一边搓炉石一边点名以至于有一天他连续点到了某个同学两次&#xff0c;然后正好被路过的校长发现了然后就是一顿欧拉欧拉欧拉&#xff08;详情请见已结束比赛 CON900&#xff09;。 题目描述 这之…

基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(五)

系列文章使用 abp cli 搭建项目给项目瘦身&#xff0c;让它跑起来完善与美化&#xff0c;Swagger登场数据访问和代码优先自定义仓储之增删改查统一规范API&#xff0c;包装返回模型再说Swagger&#xff0c;分组、描述、小绿锁接入GitHub&#xff0c;用JWT保护你的API异常处理和…

[JavaWeb-Servlet]概述与快速入门

Servlet&#xff1a; server applet * 概念&#xff1a;运行在服务器端的小程序* Servlet就是一个接口&#xff0c;定义了Java类被浏览器访问到(tomcat识别)的规则。* 将来我们自定义一个类&#xff0c;实现Servlet接口&#xff0c;复写方法。* 快速入门&#xff1a;1. 创建Ja…

01tire+洛谷P4551 最长异或路径

题目&#xff1a; 给定一棵n个点的带权树&#xff0c;结点下标从1开始到N。寻找树中找两个结点&#xff0c;求最长的异或路径。 异或路径指的是指两个结点之间唯一路径上的所有边权的异或。 输入格式 第一行一个整数NN&#xff0c;表示点数。 接下来 n−1 行&#xff0c;给…

C#9.0 终于来了,带你一起解读 nint 和 Pattern matching 两大新特性玩法

一&#xff1a;背景1. 讲故事上一篇C#9.0 终于来了&#xff0c;您还学的动吗&#xff1f; 带上VS一起解读吧&#xff01;跟大家聊到了Target-typed new 和 Lambda discard parameters&#xff0c;看博客园和公号里的阅读量都达到了新高&#xff0c;甚是欣慰&#xff0c;不管大家…

[JavaWeb-Tomcat]web服务器软件_Tomcat介绍

Tomcat&#xff1a;web服务器软件 1. 下载&#xff1a;http://tomcat.apache.org/2. 安装&#xff1a;解压压缩包即可。* 注意&#xff1a;安装目录建议不要有中文和空格3. 卸载&#xff1a;删除目录就行了4. 启动&#xff1a;* bin/startup.bat ,双击运行该文件即可* 访问&…

软件设计模式期末大作业——可乐商城管理系统

文章目录设计模式大作业软 件 设 计 模 式 任 务 书设计要求&#xff1a;学生应完成的工作&#xff1a;1. 应用场景描述2. 设计模式选择3. 实现语言与工具参考文献阅读&#xff1a;工作计划&#xff1a;一、系统目标1. 设计目的2. 需求描述二、 系统模式选择1.需求分析2.选用设…

深度解读Microsoft Build 2020:提升开发效率,优化开发环境

Microsoft Build 2020在众多新产品与技术发布中圆满落幕但身为开发技术人深知技术世界的更迭、求索却从未止步唯有不断提升自身技能栈创新方能从技术浮沉中获得更多养分让技术予力世界更有温度Microsoft Build 2020大会后&#xff0c; Visual Studio Family 和 .NET 成为众多开…

[JavaWeb]web相关概念回顾

web相关概念回顾 1. 软件架构1. C/S&#xff1a;客户端/服务器端2. B/S&#xff1a;浏览器/服务器端2. 资源分类1. 静态资源&#xff1a;所有用户访问后&#xff0c;得到的结果都是一样的&#xff0c;称为静态资源.静态资源可以直接被浏览器解析* 如&#xff1a; html,css,Jav…

Github 数据洞察之复杂信息网络

摘要&#xff1a;开源协作是数字化时代的必备技能&#xff0c;而背后的开发行为分析&#xff0c;能够让你看到一幅开源世界的全景图&#xff1b;2020年2月&#xff0c;X-lab 开放实验室联合InfoQ发布了《GitHub 2019 数字年报》&#xff0c;收到了业界的一致好评。数据科学与工…

Java解决x的平方根问题

Java解决x的平方根问题 01 题目 给你一个非负整数 x &#xff0c;计算并返回 x 的 算术平方根 。 由于返回类型是整数&#xff0c;结果只保留 整数部分 &#xff0c;小数部分将被 舍去 。 **注意&#xff1a;**不允许使用任何内置指数函数和算符&#xff0c;例如 pow(x, 0.…

[JavaWeb-Servlet]Servlet相关配置

Servlet相关配置 1. urlpartten:Servlet访问路径1. 一个Servlet可以定义多个访问路径 &#xff1a; WebServlet({"/d4","/dd4","/ddd4"})2. 路径定义规则&#xff1a;1. /xxx&#xff1a;路径匹配2. /xxx/xxx:多层路径&#xff0c;目录结构3. *.…

number one

alibab 第一天&#xff1a; 领了个联想电脑&#xff0c;之前还一直担心会不适应MAC&#xff0c;我想多了&#xff0c;不过转正之后还是会换成MAC。。。 下载安装包&#xff1a; idea&#xff1a;开始以为要专业版&#xff0c;结果用社区版的就行&#xff0c;在阿里郎上直接获…

2020年,.NET Core起飞在即,最强日志分析ELK还不会?

近期.NET社区迎来一系列利好&#xff1a;1 Build2020&#xff0c;微软发布多款产品赋能.NET开发者&#xff0c;比以往任何时候都更贴近开发者&#xff1b;2 TechEmpower第19轮编程语言框架性能排行榜&#xff0c;Asp.Net Core成为主流Web框架第一&#xff1b;3 Stackoverflow 2…

[JavaWeb-HTTP]request对象和response对象的原理

request对象和response对象的原理 1. request和response对象是由服务器创建的。我们来使用它们2. request对象是来获取请求消息&#xff0c;response对象是来设置响应消息

number two

前言 来到Alibaba工作两天后&#xff0c;迎来我的第一个周末&#xff0c;想着以后参与项目后&#xff0c;可能就不能有心情和精力来分享了&#xff0c;哈哈哈&#xff08;其实主要是杭州下雨&#xff0c;就呆在酒店打发时间喽&#xff09;. 先说下本人的一些情况&#xff1a;…

时间序列神器之争:prophet VS lstm

一、需求背景我们福禄网络致力于为广大用户提供智能化充值服务&#xff0c;包括各类通信充值卡&#xff08;比如移动、联通、电信的话费及流量充值&#xff09;、游戏类充值卡&#xff08;比如王者荣耀、吃鸡类点券、AppleStore充值、Q币、斗鱼币等&#xff09;、生活服务类&am…

maven知识提炼总结

文章目录Maven 功能构建文档生成报告依赖SCMs发布分发邮件列表Maven 特点Maven 功能 Maven 能够帮助开发者完成以下工作&#xff1a; 构建 文档生成 报告 依赖 SCMs 发布 分发 邮件列表 Maven 特点 项目设置遵循统一的规则。任意工程中共享。依赖管理包括自动更新。…

[JavaWeb-HTTP]request对象继承体系结构

request对象继承体系结构&#xff1a; ServletRequest -- 接口| 继承HttpServletRequest -- 接口| 实现org.apache.catalina.connector.RequestFacade 类(tomcat)