1.0 创建一个新的项目
image.pngimage.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
网友评论