C#上位机开发—— 美化界面（给按钮添加背景）

Posted 2021-05-19 Mculover666

前言

早在18年，博主第一次开始写博客，内容为 C# 上位机开发，写完后收获了不错的阅读量和好评：

• C#上位机开发（一）—— 了解上位机
• C#上位机开发（二）—— Hello，World
• C#上位机开发（三）—— 构建SerialAssistant雏形
• C#上位机开发（四）—— SerialAssistant功能完善
• C#上位机开发（五）——SerialAssistant界面升级（WinForm界面布局进阶）
• C#上位机开发（六）——SerialAssistant功能优化（串口自动扫描功能、接收数据保存功能、加载发送文件、发送历史记录、打开浏览器功能、定时发送功能）
• C#上位机开发（七）—— 修改窗口图标和exe文件图标

Github开源仓库：https://github.com/Mculover666/SerialAssistant。

一、发送按钮添加背景图片

目前所使用的都是winform默认样式，太丑了，接下来给按钮添加图片，美化按钮。

1. 寻找图标

首先在iconfont上寻找一个好看的图标：

2. 添加图片资源到工程中

首先将图片复制到项目中的 Resources 文件夹中，否则会路径找不到的错误：

接着在【解决方案管理器】中打开资源文件Resources.resx，点击添加资源后的下拉框，选择添加现有文件：

选中图片资源：

添加之后如图：

3. 修改发送按钮背景

点击发送按钮的背景图片设置属性：

选择刚刚添加到项目的图标资源：

添加之后如图：

4. 设置透明背景

Transparent为透明：

5. 去除边框显示

这个明显有边框，太丑了，通过设置属性去掉边框：


这样就做到无边框显示啦~

二、在代码中调用图片资源

在点击打开串口后，希望背景图片变为断开连接的图片，这就需要在代码中访问，格式为：

global::<命名空间>.Properties.Resources.<图片名>

比如：

button1.BackgroundImage = global::SerialAssistant.Properties.Resources.connect;

实现的效果如下：

三、最终实现界面效果