Mesta Automation A blog about WPF, C# and PLC software development
Get the latest source for CircularGauge.dll with samples from my github repository.
As i mentioned in an earlier post i often use EvelynT Gauge for my industrial software. Because of the limits of the original source code i made some changes to scale it automatically, to use databinding on min-max values and so on. This is a free BSD licensed gauge that you can freely use/embed in your application.
To use the gauge you need to fill this properties:
<gauge:CircularGaugeControl x:Name="myGauge1"
MinValue="{Binding Value, ElementName=sliderMinValue}"
MaxValue="{Binding Value, ElementName=sliderMaxValue}"
CurrentValue="{Binding Score}"
ImageSource="windowslogo.png"
ImageSize="40,50"
RangeIndicatorLightRadius="10"
RangeIndicatorLightOffset="80"
ImageOffset="-50"
DialTextOffset="55"
DialText="°C"
DialTextColor="Black"/>
As you can notice the addition here is also DialBorderThickness=”16″, to customize the appearance of the border when you use a little gauge.
To change the scaling just set the new MaxValue and call the RefreshScale() Method.
This will clear the previous scale and repaint the new one.
The full list of customizable properties is here:
<gauge:CircularGaugeControl x:Name="myGauge1"
Grid.Column="0" Grid.Row="0"
Radius="150"
ScaleRadius="110"
ScaleStartAngle="120"
ScaleSweepAngle="300"
PointerLength="85"
PointerCapRadius="35"
MinValue="0"
MaxValue="1000"
MajorDivisionsCount="10"
MinorDivisionsCount="5"
CurrentValue="{Binding Score}"
ImageSource="silverlightlogo.png"
ImageSize="60,50"
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="Black"
DialTextColor="Black">
</gauge:CircularGaugeControl>
Get it on NuGet
You can find the control on NuGet: https://www.nuget.org/packages/CircularGauge
Known issues:
– the “range” arc will be repainted over the control every time you change the scale, but i usually don’t use it, and to make it disappear from the gauge i set the
RangeIndicatorRadius to 0.
Hi am jashif , windows phone developer . I need little help . have you tried this in window 8. I tried to port this in to windows 8 but it keeps showing an exception (” Type initialization exception”)
Hi Jashif, i never tested this control in Windows 8.
Did you use Visual Studio 2012 ?
I will test it tonight to check if there are bugs with Windows 8. Thanks for letting me know. If you find where the code is broken let me know it, so i can update the control.
I upgraded the control to .Net 4.0 Client Profile so on Windows 8 it doesn’t require to download the framework 3.5.
All is working fine in Windows 8 anyway, so maybe you did something wrong with the project.
Geat thanks! Scale redraw at runtime work fine!
Hello
thanks for this Gauge its realy amazing, but how can i resize this control !!! i mean make i bigger or smaller or wha ever size i want .
The problem with this gauge is that it can’t resize at runtime.
However, there is an example where 4 gauges are shown and where you can see all the properties that you need to modify to adapt it to your screen.
You need to change manually the radius, scales, scales radius, borders, indicator, cap, etc…
As i remember, when you change some properties, to repaint the gauge you need to compile the project or to reload the designer.
Hi – I absolutely LOVE this control, thank you so much for posting it! I have a beginners question: I was wondering if you’d know how to make the needle move counter-clockwise? I’ve tried sorting it out myself without any luck. Thanks so much!!
Probably you need to set a correct scale or to play with this lines:
CircularGauge / CircularGaugeControl.cs Row 1072.
Double oldcurrentvalueAngle = (ScaleStartAngle + oldcurr_realworldunit);Double newcurrentvalueAngle = (ScaleStartAngle + newcurr_realworldunit);
//Animate the pointer from the old value to the new value
AnimatePointer(oldcurrentvalueAngle, newcurrentvalueAngle);
Hi,
Very interesting control, thanks for sharing.
I think I found a bug.
This control doesn’t correctly initialize the pointer when it’s inside an ItemsControl.
Here you can find a demo application that demonstrate the problem (look at the project CircularGaugeMultipleBoundDemoWpf)
http://www.ninjacross.com/public/Temp/CircularGauge.zip
Could you please fix it ?
Thanks for the feedback on the bug, i’ll fix it as soon as possible.
HI, Thanks for sharing, very useful control.
I want to change the Scale value 0 – 360 to 0 to 180 on right side and 0 to 180 on left side. ie 0,30,60,90,120,150,180, 150,120,90,60,30 respectively. can you change the scale value. Please suggest. Thanks in advance.
Hello, I doubt that you can do such a scale without modifying the sources. Check where the labels are rendered and add an offset to the right scale. Good luck.
Hi, Thanks for sharing this awesome control.
Any chance I can add the control to Nuget so I can pull it together with my other packages?
I can add you as a contributor on Github, so you can push to master and maintain the NuGet package.
I’d be happy to do that, my github username is ‘WernerDP’
You should have access right now. Let me know the details about the NuGet package, when ready, so I will update the article. Thank you.
Thanks mesta, will let you know once completed.
Thanks for allowing me to add to Nuget.
Package has been added and tested and is now available at the following address: https://www.nuget.org/packages/CircularGauge
I’ve also committed some artifacts and batch commands to the repository to ease future packing and updates.
How to remove the gradient and glass effect of the background?
Thanks!
You have to edit the style completely, as this is a lookless control.
https://github.com/mesta1/WPF-Circular-Gauge/blob/master/CircularGauge/CircularGauge/Themes/Generic.xaml
Can we get something like linear slider