当前位置：网站首页 > 技术资源 > 正文

C#知识|上位机UI设计-详情窗体设计思路及流程(实例)

moboyou 2025-08-31 04:39 9 浏览

#winform#

哈喽，你好啊，我是雷工！

上两节练习记录了登录窗体和主窗体的实现过程，本节继续练习内容窗体的实现，以下为练习笔记。

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	修改账号
Button2	（name）	btnEditIP
Button3	Text	删除账号
Button3	（name）	btnDeleteIP
Button4	Text	关闭窗口
Button4	（name）	btnClose

04 实现分割线

在WinForm窗体工具箱中没有现场的线条绘制工具，可以通过Label控件实现分割线。

具体操作步骤可以参考《如何在WinForm窗体中实现分割线绘制？》

05 下拉框控件

在账号分类标签右侧是下拉框控件，

将下拉框的name属性改为：cbbCategory

06 文本框控件

账号名称标签后是TextBox文本框控件，添加如下：

文本框控件的name属性改为：txtIPName;

07 控件对齐

WinForm窗体中也有组态软件中常用的对齐操作，比较方便，为了美观，可以通过对其操作调整各个控件的位置；

如下图，选中几个控件，然后点击中间对齐按钮，即可将几个控件水平中间对齐，比较方便；

其他控件及属性设置见下表：

控件名称	设置属性	属性值	备注
Label2	Text	账号分类：
Label3	Text	账号名称：
Label4	Text	查询结果总数：
Label5	Text	0
Label5	（name）	lblCount
Button5	Text	提交查询
Button5	（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）
Panel	BorderStyle	FixedSingle

10 添加GroupBox控件

在工具箱的容器组找到GroupBox控件，添加到Panel控件内。调整到合适大小。

11、其他控件

其他控件在前边介绍中都有同类型控件添加笔记，此处不再赘述，按照样式添加对应控件，并修改相关属性即可。

12、后记

以上为上位机UI设计时，基本的设计思路及流程，实际开发中一般由UI美工设计效果图，通过甲方认可后，再依照效果图开发实现相应效果及功能。

文本框控件的控件名称属性值

C#知识|上位机UI设计-详情窗体设计思路及流程(实例)

01 详情窗体效果展示：

02 添加窗体并设置属性

03 添加按钮控件

04 实现分割线

05 下拉框控件

06 文本框控件

07 控件对齐

08 DataGridView控件

09 添加Panel控件

10 添加GroupBox控件

11、其他控件

12、后记

相关推荐

Linux环境中查看Oracle错误和警告日志信息

絮语----工作四年的碎碎念

SQL 中的 (+)用法

oracle常见问题处理

MYSQL经典面试题汇总

医院信息系统突发应急演练记录

Windows 11:已知问题和已解决问题列表(更新时间:2022年1月)

最全面的IBMS系统集成系统技术规格书，赶紧收藏起来!

Linux下开源BI工具Metabase本地化安装及配置详解

苹果停止更新Windows版QuickTime!