c# 美化数据开关控件

mmuyu

    虽然c#的label标签，和button按钮可以用于显示设备的状态，也是比较简单的方式就能完成的，但是这样的界面看起来还是简陋了一点。例如灯光显示控件。

像这种界面，虽然数据是很直观显示了，但是界面还有待美化，因此我们可以使用图片来显示数据的状态，这样看起来会更美观一点。

下面我们看看如何操作：


首先我们要准备用于显示的图片素材，我们可以到阿里巴巴的矢量素材库获取图标www.iconfont.cn，例如灯亮灯灭的，我们可以找到很多素材。

需要注意图标的版权**

接下来，我们在c#里面新建一个资源文件夹，用于保存图片状态。

然后我们创建4个picture box 用于显示图片，并且设置控件的大小模式为自动缩放

接下来，我们对获取的json数据的attr内的数据点数据进行比对，如果是1则为亮灯状态，此时我们应该把图片切换为亮灯的图片，我们可以通过 Image.FromFile，使用相对路径的方式应用项目内的文件。

代码如下：

1. if ((int)jsonobject["attr"]["LED_OnOff_1"] == 1)
   
2.                             {
   
3.                                 pictureBox1.Image = Image.FromFile(Application.StartupPath + "..\\..\\..\\resources\\light _on.png");
   
4.                             }
   
5.                             else
   
6.                             {
   
7.                                 pictureBox1.Image = Image.FromFile(Application.StartupPath + "..\\..\\..\\resources\\light_off.png");
   
8.                             }
   
9.                             if ((int)jsonobject["attr"]["LED_OnOff_2"] == 1)
   
10.                             {
    
11.                                 pictureBox2.Image = Image.FromFile(Application.StartupPath + "..\\..\\..\\resources\\light _on.png");
    
12.                             }
    
13.                             else
    
14.                             {
    
15.                                 pictureBox2.Image = Image.FromFile(Application.StartupPath + "..\\..\\..\\resources\\light_off.png");
    
16.                             }
    
17.                             if ((int)jsonobject["attr"]["LED_OnOff_3"] == 1)
    
18.                             {
    
19.                                 pictureBox3.Image = Image.FromFile(Application.StartupPath + "..\\..\\..\\resources\\light _on.png");
    
20.                             }
    
21.                             else
    
22.                             {
    
23.                                 pictureBox3.Image = Image.FromFile(Application.StartupPath + "..\\..\\..\\resources\\light_off.png");
    
24.                             }
    
25.                             if ((int)jsonobject["attr"]["LED_OnOff_4"] == 1)
    
26.                             {
    
27.                                 pictureBox4.Image = Image.FromFile(Application.StartupPath + "..\\..\\..\\resources\\light _on.png");
    
28.                             }
    
29.                             else
    
30.                             {
    
31.                                 pictureBox4.Image = Image.FromFile(Application.StartupPath + "..\\..\\..\\resources\\light_off.png");
    
32.                             }

复制代码

这里为了方便程序查找目录，使用Application.StartupPath 读取程序所在的文件夹，再配合相对路径组成完整的文件路径


接下来编译运行看一看结果

可以看见正常显示了，相对于文字还是美观了许多，并且app修改设备数据后，能实时显示到页面上