1.0 创建一个新的项目
image.png
image.png
在解决方案上鼠标右键单击，按步骤点击。
image.png
当前项目开发采取两层架构，数据访问层和实体层，通常我们是一个类库的形式存在：
image.png
再添加一个类库（Models），放实体类，项目最终结构如下：
image.png
然后把里面的类删掉，后面具体需要啥再新建;
image.png
下面添加引用。在DAL下面的“引用”上鼠标右键单击，然后点击添加：
image.png
选择“项目”-“models”
image.png
Models不需要添加引用，但主程序需要添加DAL和Models两个引用。
image.png
image.png
image.png
此时启动项目，项目正常运行。
2.0 项目窗口设计
首先为主窗体重命名
image.png
窗体大小取决于实际用途，比如医院的显示器分辨率一般为1440*900。
我们这里改设置如下：
image.png
当然，我们这里也把项目主窗体text改成“学员管理系统”。
3.0 登录页面
在主项目鼠标右键单击，按如下步骤点击“windows窗体”：
image.png
image.png
然后窗体大小拖动到合适大小。text改为“[学员管理系统]--用户登录”，用户登录界面一般不需要最大化，把最大化去掉。然后将左上角图标更换。
image.png
image.png
打开工具箱，拖动一个“PictureBox”到登录窗体中。
image.png
我这里调整大小为300*300。点击右上角的小三角箭头，点击“选择图像”，点击“本地资源”-“导入”。
image.png
image.png
image.png
选择图片后，发现图片不能全覆盖。这时候需要设置一下图片的相关属性。
image.png
image.png
然后拖动label、testBox、button按钮，组成如下：
image.png
登录和退出按钮参数设置：
image.png
登录窗体设置不可拉动：
image.png
增加功能键：
image.png
在控件上，鼠标会变成十字架，然后鼠标直接点击即可：
image.png
此时，运行登录窗体，第一个输入框会获得焦点，按tab键也会按我们设定的顺序跳转：
image.png
设置密码为密文显示，选中密码的输入框，设置如下属性即可：
image.png
image.png
4.0 主窗体设计
最终效果图：
主要由最上方的菜单栏，最下方的状态栏，主窗体左侧操作栏，主窗体右侧显示区域留白组成。
为了更好地显示效果，我这里再读调整主窗体大小：
image.png
4.1 菜单栏
这里我们要用到的菜单控件如下：
image.png
如下拖放MenuStrip控件,并进行普通的输入即可：
image.png
设置快捷键,比如“系统”，我们输入为“系统(&S)”，即可识别为快捷键S：
image.png
保存效果如下：
image.png
运行，按键Alt+S，“系统”可以迅速获得焦点。
设置菜单栏图像如下操作，在标签处鼠标右键单击，选择“选择图像”，操作即可：
image.png
最终效果如下：
image.png
如果“退出”和“修改密码”之间增加分隔线，鼠标右键点击“退出”，如下操作即可：
image.png
image.png
继续完善：
image.png
4.2 状态栏
image.png
状态栏在最底部，新增两个“StatusLabel”即可，里面的内容可以让代码动态控制，这里暂时写死：
image.png
运行效果如下：
image.png
4.3 主窗体设计
在工具箱找到“容器”-“SplitContainer”，拖放到窗体中：
image.png
选中中间那条缝，设置如下效果：
image.png
分隔效果会更好：
image.png
如果不好选中中间的缝，可以如下去选中：
image.png
此时随着窗口的变化，两个窗体区间会随之变化，设置如下属性，即可左边操作栏不变，而右边留白区域可以随着窗体大小变化而变化：
image.png
测试效果如下：
image.png
4.4 主窗体左侧操作栏
日历：
image.png
拖动一个button控件，设置相关参数：
image.png
调整到较为美观的大小，然后选中该button，按住Ctrl键鼠标拖动（可以选择多个，然后按键拖动），即可实现控件的快速布局：
image.png
修改文字:
image.png
此时如果一个个设置图片显得非常复杂，这里可以利用“ImageList”组件实现，快捷换图。
首先拖动一个组件“ImageList”到窗体中，组件是不可见的。
image.png
然后属性中添加想要的图片即可：
image.png
点击添加：
image.png
选中想要的图片，选择完成后，点击右下角“打开”：
image.png
点击“确定”即可：
image.png
最后选中想好设置图片的按钮，调整两个属性即可实现图片替换：
image.png
最终效果如下：
image.png
4.5 主窗体右侧区域留白
右侧主要是一个容器，作为首页面当前放入一张图片即可。
容器本身就可以设置背景图片，这里我们直接设置如下属性即可：
image.png
最终效果如下（顺便调整一下项目的图标）：
image.png
拉取一个“公共控件”-“label”到右侧区域，修改文字：
image.png
为了使字好看，如下设置属性：
image.png
image.png
然后设置背景色为透明：
image.png
最终效果如下：
image.png
END
网友评论