WPF自定义控件(1)——仪表盘设计[1]

0、小叙闲言

又接手一个新的项目了，再来一次上位机开发。网上有很多控件库，做仪表盘（gauge）的也不少，功能也很强大，但是个人觉得库很臃肿，自己就计划动手来写一个控件库，一是为学习，二是为了项目。下面是我花了一下午的时间做出来的，先看效果： 

这个表盘当前还比较丑，后面会一步一步地完善它的，包括各种美化，相信自己能做到的，加油！！这也是我个人第一次写博客，我会坚持下去，同时也会尽力表述清楚每一个技术细节。源码地址：https://github.com/wj-data/MyGauge

1、表盘总体设计

 一个表盘，就简单来看，应该由四个部分组成，即：表盘外轮廓、刻度（包括小刻度和大刻度）、刻度值、指针。在制作的过程中，略微用了一些数学知识，只要用心思考，都很容易的。设计外观的过程中，用到了对应如下知识点。当然也包括一些C#和WPF的基础知识，如果有不清楚的地方，可以看看刘铁猛老师的《深入浅出WPF》

表盘外轮廓	刻度	刻度值	指针
Path路径绘图	直线	TextBlock控件	Path路径绘图

2、表盘外轮廓

 初步设计，外轮廓由三段组成：yellow、green、red，借助WPF强大的绘图功能，做了一个渐变色，稍微美化了一下，如下图。（此圆的半径为：200px）

明显可以看出来，这个圆由三段弧组成的，如果观察仔细的话，可以隐约看到2根小白线，就是三段弧的分界处。

1.黄色弧绘制

代码如下：

 1 <Path StrokeThickness="30" Width="420" Height="400" StrokeStartLineCap="Round">
 2     <Path.Data>
 3         <PathGeometry Figures="M 0,200 A 200,200 0 0 1 58.57864,58.57864"/>
 4     </Path.Data>
 5     <Path.Stroke>
 6         <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
 7             <LinearGradientBrush.GradientStops>
 8                 <GradientStop Offset="0" Color="Green"/>
 9                 <GradientStop Offset="1.0" Color="Yellow"/>
10             </LinearGradientBrush.GradientStops>
11         </LinearGradientBrush>
12     </Path.Stroke>
13 </Path>

其中最为关键的代码是第3行。对其数据点的解释如下表。有不明白的地方，先记下来，后面也会用到，会慢慢理解的。

M 0,200	A 200,200	0 0 1	58.57864,58.57864
M是Path绘图的起点标记 弧的起点坐标为（0,200）	A（arc）是弧的标记 （200,200）表示x轴半径：200;y轴半径：200	圆弧旋转角度[0](有起点和终点，个人感觉这个值并没有什么用) 优势弧的标记[0](否，弧角度小于180) 正负角度标记[1](顺时针画圆)	表示终点，用数学公式计算出来的

（58.57864,58.57864）的计算方式如下：

黄色弧占1/4，故其角度为180*1/4=45度，黄色点的坐标计算如下图。

2.绿色和红色弧绘制

 有了上面黄色弧绘制作为基础，绿色和红色都是同样的道理，下面直接给出绘制三段弧的代码

 1 <Path Stroke="Yellow" StrokeThickness="30" Width="420" Height="400" StrokeStartLineCap="Round">
 2     <Path.Data>
 3         <PathGeometry