教你使用Visual Studio 2017打造一个“用户登录”窗体程序

在未来,人人都会编程。随着互联网科技的迅速发展,各种计算机语言也逐渐走进大众的视线,作为一名非科班出身的小白,我一直想掌握一门计算机语言,成为编程界的达人。经过个人的多次比较,我最终选择了C#作为自己的敲门砖。我接触C#的时间虽然不长,但是得益于C#简练的语法规则以及强大的Visual Studio 2017,让我觉得C#没有想象中的那么难。

我们不可能无缘无故去做一件事情,做事情呢心里一定要有目标,我的目标就是要利用所学的C#知识编写一款大家喜爱的UWP程序。虽然现在UWP程序的开发环境没有想象中的那么美好,但是我相信微软公司后期一定会改善它的。

接下来我就使用Visual Studio 2017打造一个“用户登录”窗体程序。

新建一个名为WFMUserlogin的窗体
文件->新建->项目->Windows桌面->Windows窗体应用
教你使用Visual Studio 2017打造一个“用户登录”窗体程序_第1张图片
自定义窗体名称-WFMUserlogin
教你使用Visual Studio 2017打造一个“用户登录”窗体程序_第2张图片
鼠标右键点击窗体会出现“属性”选项,点击“属性”进入窗体的属性界面,将Text的对应的那一栏改为“用户登录”
教你使用Visual Studio 2017打造一个“用户登录”窗体程序_第3张图片

点击VS 2017的左侧栏的“工具箱”,在“所有Windows窗体”中找到 Label 将其拖拽到主窗体中(也可以双击鼠标左键)
教你使用Visual Studio 2017打造一个“用户登录”窗体程序_第4张图片

鼠标右键点击 Label 键 “属性”选项,点击“属性”进入 Label 的属性界面,将Text的对应的那一栏改为“账号:”
教你使用Visual Studio 2017打造一个“用户登录”窗体程序_第5张图片

接下来按键盘中的Control键,鼠标点击“账号:”拖拽可复制Label键,复制完后将将Text的对应的那一栏改为“密码:”
教你使用Visual Studio 2017打造一个“用户登录”窗体程序_第6张图片

教你使用Visual Studio 2017打造一个“用户登录”窗体程序_第7张图片

点击VS 2017的左侧栏的“工具箱”,在“所有Windows窗体”中找到 TextBox 将其拖拽到主窗体中(也可以双击鼠标左键)
教你使用Visual Studio 2017打造一个“用户登录”窗体程序_第8张图片

接下来按键盘中的Control键,鼠标点击 TextBox 拖拽可复制 TextBox
教你使用Visual Studio 2017打造一个“用户登录”窗体程序_第9张图片

这样子,一个窗体雏形就设计完成啦,为了让它看起来更加美观些,我们可以调整它的大小(可以参考QQ登录窗体尺寸)。

鼠标右键点击窗体会出现“属性”选项,点击“属性”进入窗体的属性界面,将Size 属下的Width与Height 改为你心中理想的数字。
教你使用Visual Studio 2017打造一个“用户登录”窗体程序_第10张图片

然后点击鼠标左建不放松,框选住你刚刚建立的四个项,将它们移动至合适的位置。

到这里窗体已经接近完工啦!我们在给它添加一个登录按钮“Button”。点击VS 2017的左侧栏的“工具箱”,在“所有Windows窗体”中找到 Button 将其拖拽到主窗体中(也可以双击鼠标左键)。然后将鼠标放在 Button 点击鼠标右键,选择“属性”进入 Button 的属性界面,将 Text 改为 登录。

教你使用Visual Studio 2017打造一个“用户登录”窗体程序_第11张图片

教你使用Visual Studio 2017打造一个“用户登录”窗体程序_第12张图片

教你使用Visual Studio 2017打造一个“用户登录”窗体程序_第13张图片

当我们运行窗体程序时发现,窗体的默认出现位置在屏幕的左上方而不像QQ的登录窗体那样在屏幕的正中间,我们进入窗体的“属性”界面进行更改。寻找 StartPosition ,选择它属下的CenterScreen,这样,窗体运行时就会默认出现在屏幕的正中间了。

教你使用Visual Studio 2017打造一个“用户登录”窗体程序_第14张图片

教你使用Visual Studio 2017打造一个“用户登录”窗体程序_第15张图片

教你使用Visual Studio 2017打造一个“用户登录”窗体程序_第16张图片

想必大家已经发现了,窗体在运行时,控件焦点是默认出现在第二个 TextBox 中,这明显与日常的使用情况不符,它应该默认出现在第一个 TextBox 中。我们可以在“视图”下选择Tab键顺序来进行调整。

教你使用Visual Studio 2017打造一个“用户登录”窗体程序_第17张图片

点击Tab键顺序,先点击第一个TextBox,然后再点击第二个TextBox,其余不用点击。下图是我点击完后的模样。
教你使用Visual Studio 2017打造一个“用户登录”窗体程序_第18张图片

控件焦点调整完成后,再次点击Tab键顺序,这样那些蓝色标记就会消失,这样并不会影响你之前的控件焦点操作。再次运行窗体,这一次控件焦点就会默认出现在第一个TextBox中。

教你使用Visual Studio 2017打造一个“用户登录”窗体程序_第19张图片

我们在窗体输入账号及密码时发现密码是可见的,这样会泄露密码从而影响账号的安全,怎么办呢?我们进入第二个 TextBox 的属性界面,找到 UseSystemPasswordChar ,将默认的 False 改为 True 。我们再次运行窗体时输入密码发现密码已经被遮盖了。

教你使用Visual Studio 2017打造一个“用户登录”窗体程序_第20张图片

教你使用Visual Studio 2017打造一个“用户登录”窗体程序_第21张图片

一个简单的用户登录窗体就这样大功告成了,后续我会继续对这个窗体进行改进,下次见啦!

你可能感兴趣的:(C#,C#,Visual,Studio,Visual,Studio,2017,winfrom)