WPF之自定义控件—蓄电池（battery）

直接进入正题：

         第一步，新建wpf项目

第二步，右击项目，添加新建项/wpf自定义用户控件

第三步，OK，会多出以下两项好的点击Generic.xaml,如下图

上面的红框框是该控件使用时需要引用的命名空间，下边的红框框是该控件的样式，也就是我们接下去要实现的部分。

第四步，对上面的ControlTemplate进行修改，然后双击打开MainWindow.xaml，引用上面的命名空间，具体代码如下：

正如上图所展示的，我们得到了一个电池的一个初步轮廓

 

第五步，既然是蓄电池，那么肯定需要用来显示电池电量的多少，所以我们对Generic.xaml添加Rectange,使用fill属性来设置电池的颜色，Height属性来设置电池电量的多少，考虑到在使用该控件时可能需要根据自定义的值的大小来设置电池电量的多少，所以使用为该控件注册一个Value属性，具体修改如下图：

部分看不到的代码是VerticalAlignment="Bottom"，这里使用了两个转变器，其中一个使用了多绑定，

下面是BrushConverter的源码，设定Value值大于0.8为绿色，介于0.2-0.8之间为黄色，小于0.2，为红色

下面是HeightConverter的源码，根据vlaue值和grid第一行的高度来变更高度

那么，我们在主窗体设置控件的value值就能显示电池的电量及色彩了，以下是效果图：

如此，自定义电池控件就完成了。当然，如果电池要弄的更好看，可以添加渐变色等效果，还可以设定计时器，使其动态刷新，变换色彩，甚至于你还可以为其注册新的Brush属性，使其能根据需要来改变色彩。