demo演示:
你的时间宝贵,不想看啰嗦的文字,可直接拉到文末下载源码!
1. 新建项目
站长开发环境:
- vs 2019企业版 16.70
- .net 5 preview 5
.net 5 wpf 项目模板和 .net core 3.1 wpf 项目模板没有区别,创建好项目后,nuget 引入 materialdesignthemes 库:
2.引入样式
演示demo就一个xaml文件和xaml.cs文件,为了方便后面收集wpf界面设计效果,统一放在了开源项目terminalmacs.managerforwpf[1]中,所以控件样式引用直接在foodapploginview.xaml中添加:
3.控件动画效果
见上面gif动画,登录窗口加载时,用户名输入框、密码输入框、记住密码、右侧背景图片等元素有动画效果,每个部分代码结构类似,比如下面的用户名输入框代码:
使用了开源控件md的transitioningcontent组件,其中transitioneffect的kind属性设置控件动画方向。
4. 模拟登录
登录按钮布局代码: