【VisualStdio】手把手教你做一个上位机（1）控件设计布局

菲子叭叭

已于 2024-08-12 15:11:06 修改

阅读量707

点赞数 7

文章标签： visualstudio

于 2024-08-11 15:07:42 首次发布

本文链接：https://blog.csdn.net/m0_73409202/article/details/141105830

版权

网上有很多形形色色的制作上位机教程，有些写的挺好的，但是过于单调。如下图，这是我自己在网上随便学习做的。

这里，我们将会设计出比较好看且功能比较齐全的上位机，如下图所示：

一、项目配置

安装完Visual Stdio软件后，在Visual Stdio intaller中安装以下两个组件，再点击右下角的“安装”按键

安装完后启动该软件

新建工程

主页面

将2.和3.用鼠标移动到屏幕最左侧

结果如下

在工程中创建一个新文件夹，起文件名“Form”，将Form1.cs拖进该文件夹中,如下

重命名Form.cs文件为->"FormHome"(这个右击该.cs文件，右键，重命名),并且再创建3个页面，分别为"FormUART""FormUSB""FormABOUT""FormMainPage",如下

二、页面配置

先做主页面，也就是“FormHome”，每个页面都需要进行页面布局（一般由专门的美工进行设计），例如如下两张上位机页面图

而本教程目标是设计成下图布局的上位机界面

去掉页面上自带的最外层浅蓝色模块

结果如下

设置宽度高度和背景色

formLayoutLeft

formLayoutLeftShadow

formlayoutTop

formLayoutTopShadow

panelLogo、panelLogoShadow

pictureBigLogo

panelMenu

添加icon图标（第三方图标）库

BtnSerial

btnUART

btnUSB

btnABOUT

这样菜单模块就做好了，接下来是串口通道选择模块

自定义控件

·初始化函数代码如下
private void InitializeComponent()
{
this.SuspendLayout();
//
// CustomComboBox
//
this.AutoScaleDimensions = new System.Drawing.SizeF(11F, 21F);
this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
this.Name = "CustomComboBox";
this.Size = new System.Drawing.Size(337, 197);
this.ResumeLayout(false);
}

继续