WPF利用CircularGauge.dll绘制电流表与电压表

2017-03-27 19:13:23来源:CSDN作者:xiefei20098648人点击

CircularGauge是非常优秀的可自定义控件循环表,可用于开发电流表与电压表,开源代码可以从下面的链接去下载:
https://www.codeproject.com/kb/silverlight/circulargaugecontrol.aspx?msg=3745697#xx3745697xx
或者
http://download.csdn.net/download/little_ban/9692810

下面以绘制电流表为例,阐述WPF绘制电流表的过程
Step1. 新建一个空的WPF工程命名为,在新的工程中完成CircularGauge.dll的添加。
把刚刚下载的CircularGauge开源代码,放在新建工程的文件目录下,如下图:
这里写图片描述
右击解决方案,添加->现有工程->选择刚刚添加的开源文件中的CircularGauge.csproj工程,点击“添加”完成CircularGauge工程的添加。右击该工程查看其属性的输出类型(属性->应用程序->输出类型)是否为:类库。右击该工程的“重新生成(E)”
Step2.引用CircularGauge.dll并添加CircularGauge的命名空间。
①添加引用:右击Galvanometer的“引用”,选择“添加引用”弹出下面的窗口,点击确定完成dll的添加。
这里写图片描述
②添加CircularGauge的命名空间:

<Window x:Class="Galvanometer.MainWindow"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        xmlns:gauge="clr-namespace:CircularGauge;assembly=CircularGauge"        Name="DianLiuBiao" Height="340" Width="340"        Title="电流表" WindowStyle="SingleBorderWindow" Topmost="True">

Step3.在MainWindow.xmal中增加绘制电流表的XMAL代码。

<gauge:CircularGaugeControl x:Name="myGauge1"            Radius="150"             ScaleRadius="110"             ScaleStartAngle="120"             ScaleSweepAngle="300"            PointerLength="85"             PointerCapRadius="35"             MinValue="0"             MaxValue="1000"             MajorDivisionsCount="10"             MinorDivisionsCount="5"             CurrentValue="{Binding Score}"            ImageSource="Pics/Ampere.ico"            ImageSize="40,40"            RangeIndicatorThickness="8"            RangeIndicatorRadius="120"            RangeIndicatorLightRadius="10"            RangeIndicatorLightOffset="80"            ScaleLabelRadius="90"            ScaleLabelSize="40,20"            ScaleLabelFontSize="10"            ScaleLabelForeground="LightGray"            MajorTickSize="10,3"            MinorTickSize="3,1"            MajorTickColor="LightGray"            MinorTickColor="LightGray"            ImageOffset="-50"            GaugeBackgroundColor="Black"            PointerThickness ="16"            OptimalRangeStartValue="300"            OptimalRangeEndValue="700"             DialTextOffset="40"             DialText="mA"            DialTextColor="Black">        </gauge:CircularGaugeControl>

下面重点讲解下CircularGauge控件的几个重要参数:
- Background 背景色设置,背景颜色会自动创建一个渐变和玻璃效果。
- ScaleRadius 刻度位置的半径值,根据自己需要进行调制半径值达到调整刻度位置的目的。
- ScaleLabelRadius 刻度标签的半径值。
- RangeIndicatorRadius 刻度范围指示器的半径、
- ImageOffset 外置图片的位置偏移。
- DialTextOffset 电表标识的文本控件位置偏移。
- DialText 电表标识的文本内容,比如本文设置为 “mA”。
- RangeIndicatorLightOffset 范围指示灯的位置偏移。
- OptimalRangeStartValue 电流值最佳范围的起始值,与OptimalRangeEndValue一起搭配使用,指明电表量程的最佳范围。
- OptimalRangeEndValue 电流值最佳范围的终止值。
Step4.实现电流表动态动作的代码。
在MainWindow.xaml.cs中添加下面的代码,采用随机数动态模拟指针动作的过程。

using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Windows;using System.Windows.Controls;using System.Windows.Data;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Imaging;using System.Windows.Navigation;using System.Windows.Shapes;using System.Windows.Threading;using System.ComponentModel;namespace Galvanometer{    /// <summary>    /// MainWindow.xaml 的交互逻辑    /// </summary>    public partial class MainWindow : Window    {        //Private variables        private DispatcherTimer timer;        private Game game1;        public MainWindow()        {            InitializeComponent();            this.Loaded += new RoutedEventHandler(Window_Loaded);        }        void Window_Loaded(object sender, RoutedEventArgs e)        {            //Set the current value of the gauges            game1 = new Game(0);            this.myGauge1.DataContext = game1;            //Start the timer            timer = new DispatcherTimer();            timer.Interval = TimeSpan.FromMilliseconds(2000);            timer.Tick += new EventHandler(timer_Tick);            timer.Start();        }        void timer_Tick(object sender, EventArgs e)        {            //Update random scores            Random r = new Random();            game1.Score = r.Next(0, 1000);        }    }    /// <summary>    /// Helper class to simulate a game    /// </summary>    public class Game : INotifyPropertyChanged    {        private double score;        public double Score        {            get { return score; }            set            {                score = value;                if (PropertyChanged != null)                {                    PropertyChanged(this, new PropertyChangedEventArgs("Score"));                }            }        }        public Game(double scr)        {            this.Score = scr;        }        #region INotifyPropertyChanged Members        public event PropertyChangedEventHandler PropertyChanged;        #endregion    }}

最终实现的效果如图:
这里写图片描述

参考文献:
1、http://www.cnblogs.com/salam/archive/2010/07/23/1784045.html
2、https://www.nuget.org/packages/CircularGauge/
3、http://download.csdn.net/download/little_ban/9692810

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台