鹤壁做网站公司,地州电视网站建设流程,wordpress error log,网站怎么盈利分享一个登录界面#xff0c;先看效果图#xff1a;准备文中使用到了一些图标#xff1a;我们可以从 iconfont[1]免费下载#xff1a;代码简单说明请随手创建一个WPF项目#xff08;.NET Framework、.NET 5\6\7皆可#xff09;#xff0c;使用tree /f命令看看最终的文件… 分享一个登录界面先看效果图准备文中使用到了一些图标我们可以从 iconfont[1]免费下载代码简单说明请随手创建一个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)。看上面的截图重点说说这两处左侧的图形控件公司有设计师做这种图片是很简单的没有的时候可以使用Polygon、Ellipse等实现一些简单的效果让界面不要那么单调CanvasPolygon Points0, 20 230,140 0,270 Fill#4EB1B6 /Polygon Points100, 400 200,370 180,470 Fill#4EB1B6 /Ellipse Margin250 450 0 0 Width40 Height40 Fill#4EB1B6 /Ellipse Margin50 400 0 0 Width20 Height20 Fill#4EB1B6 /
/Canvas右侧的账号文本框和密码框作者为了演示效果账号文本框使用的 一张图片 一个标签控件 一个文本框 控件组合实现Border Padding10 BorderThickness1 BorderBrush#acb0af Margin70 7 CornerRadius5GridGrid.ColumnDefinitionsColumnDefinition Widthauto /ColumnDefinition Width* //Grid.ColumnDefinitionsImage Source/TerminalMACS.TestDemo;component/Views/ModernLogin/Images/email.png Height20 /TextBlock x:NametextEmail MouseDowntextEmail_MouseDown Text邮箱Style{StaticResource textHint} /TextBox x:NametxtEmail TextChangedtxtEmail_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 Padding10 BorderThickness1 BorderBrush#acb0af Margin70 7 CornerRadius5GridGrid.ColumnDefinitionsColumnDefinition Widthauto /ColumnDefinition Width* //Grid.ColumnDefinitionsImage Source/TerminalMACS.TestDemo;component/Views/ModernLogin/Images/lock.png Height20 /TextBlock x:NametextPassword MouseDowntextPassword_MouseDown Text密码Style{StaticResource textHint} /PasswordBox x:NametxtPassword PasswordChangedtxtPassword_TextChangedStyle{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;}
}参考油管视频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?vPoPUB1_q2kEt907s[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
