C#知识|上位机UI设计-详情窗体设计思路及流程(实例)
哈喽，你好啊，我是雷工！
上两节练习记录了登录窗体和主窗体的实现过程，本节继续练习内容窗体的实现，以下为练习笔记。
01 详情窗体效果展示：
02 添加窗体并设置属性
在之前练习项目的基础上添加一个Windows窗体，设置名称为：FrmIPManage.cs
设置窗体的边框和标题栏的外观设置为None；
设置窗体的尺寸：由于该窗体要显示在主窗体的Panel3控件内，因此窗体尺寸与该控件设置为统一尺寸：685,475；
窗体属性：
设置属性 | 属性值 | 备注 |
FormBorderStyle | None | 设置为无边框和标题栏 |
Size | 685,475 | 设置窗体尺寸 |
BackColor | InactiveCaption |
03 添加按钮控件
根据设计效果，添加相关控件并设置属性；
按钮的高度建议（30-35）；
具体属性设置参考下表设置：
控件名称 | 设置属性 | 属性值 | 备注 |
Label1 | Text | 当前位置：账号管理 | |
Button1 | FlatStyle | Flat | 设置无边框 |
Text | 添加账号 | ||
TextAlign | MiddleRight | 按钮文本的对齐方式 | |
BackColor | DarkSlateGray | 设置背景色 | |
Font | White | 设置字体文本色 | |
（name） | |||
Image | 图标 | 选择备好的图标素材 | |
Button2 | Text | 修改账号 | |
（name） | btnEditIP | ||
Button3 | Text | 删除账号 | |
（name） | btnDeleteIP | ||
Button4 | Text | 关闭窗口 | |
（name） | btnClose |
04 实现分割线
在WinForm窗体工具箱中没有现场的线条绘制工具，可以通过Label控件实现分割线。
具体操作步骤可以参考《如何在WinForm窗体中实现分割线绘制？》
05 下拉框控件
在账号分类标签右侧是下拉框控件，
将下拉框的name属性改为：cbbCategory
06 文本框控件
账号名称标签后是TextBox文本框控件，添加如下：
文本框控件的name属性改为：txtIPName;
07 控件对齐
WinForm窗体中也有组态软件中常用的对齐操作，比较方便，为了美观，可以通过对其操作调整各个控件的位置；
如下图，选中几个控件，然后点击中间对齐按钮，即可将几个控件水平中间对齐，比较方便；
其他控件及属性设置见下表：
控件名称 | 设置属性 | 属性值 | 备注 |
Label2 | Text | 账号分类： | |
Label3 | Text | 账号名称： | |
Label4 | Text | 查询结果总数： | |
Label5 | Text | 0 | |
（name） | lblCount | ||
Button5 | Text | 提交查询 | |
（name） | btnQuery |
08 DataGridView控件
8.1、添加控件
从工具箱-【数据】组找到-【DataGridView】控件，添加到窗体，
8.2、属性设置
将【启用添加】、【启用编辑】、【启用删除】前的勾选取消掉；
然后将其调整到合适大小，修改【BackgroundColor】背景色属性，改为与父窗体的背景色一致；
DataGridView控件其他属性设置见下表：
控件名称 | 设置属性 | 属性值 | 备注 |
DataGridView | （name） | dgvIPList | |
BackgroundColor | InactiveCaption | 设置背景色 | |
ColumnHeaderHeightSizeMode | EnableResizing | 标头高度设置为可调 | |
ColumnHeaderHeight | 30 | 设置列标题的高度 | |
GridColor | RosyBrown | 设置分割单元格的网格线的颜色 | |
EnableHeadersVisualStyles | False | ||
ColumnHeadersBorderStyle | Single |
8.3、DataGridView标题设置
选中DataGridView控件，然后点击右上角的三角，然后点击【编辑列...】
然后在弹出的窗口中点击【添加(A)...】按钮
在添加列窗口，修改页眉文本为：账号名称，然后点击【添加(A)】按钮:
标题样式背景色，字体等通过
ColumnHeadersDefaultCellStyle属性来调整：
8.4、DataGridView列宽设置
DataGridView列宽设置设置，同样在空间的编辑列内设置，根据要展示内容多少调整各个列的宽度。
账号简介列内容比较长，可以设置成自适应
8.5、DataGridView奇数行样式设置
DataGridView表格奇数行默认单元格样式设置属性为
AlternatingRowsDefaultCellStyle.如下图可以修改背景色色设置
09 添加Panel控件
设置Panel的Dock属性为Bottom
Panel控件其他属性设置见下表：
控件名称 | 设置属性 | 属性值 | 备注 |
Panel | （name） | ||
BorderStyle | FixedSingle |
10 添加GroupBox控件
在工具箱的容器组找到GroupBox控件，添加到Panel控件内。调整到合适大小。
11、其他控件
其他控件在前边介绍中都有同类型控件添加笔记，此处不再赘述，按照样式添加对应控件，并修改相关属性即可。
12、后记
以上为上位机UI设计时，基本的设计思路及流程，实际开发中一般由UI美工设计效果图，通过甲方认可后，再依照效果图开发实现相应效果及功能。
