Telerik blogs

Presenting data to users can be done in a variety of ways, but gauges offer a unique way to present data with elegance.  Gauges are easily recognized by most users since they see them on a daily basis.  Think about when you drove to work this morning, you probably looked at your car dashboard which may have looked similar to the picture below.  You knew your speed, fuel status and a number of other important metrics at a glance.  Well, the RadGauge for WPF gives you the ability to implement this same powerful concept in your applications

image

In this post, I want to show you the basics of getting setup with a RadGauge for WPF.  After creating a new WPF application, I placed a RadGauge on my window.

XAML

<Window x:Class="RadGauge.Window1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="Window1" Height="419" Width="405" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">  
    <Grid> 
        <telerik:RadGauge Margin="10" Name="radGauge1">   
 
        </telerik:RadGauge> 
    </Grid> 
</Window>   
 
 

Design View

image

Initially, you will notice that RadGauge does not display anything.  That is because you have to define a few more details about the gauge.  The first thing you need to define is whether you want a Linear or Radial gauge. For my example, I want to demonstrate how to setup a Radial Gauge.

image

If you look at the code below, I have indicated that my RadGauge will be a RadialGauge by simply adding the <telerik:RadialGauge> section to my XAML.

XAML

<telerik:RadGauge Margin="10" Name="radGauge1">  
     <telerik:RadialGauge>   
 
     </telerik:RadialGauge> 
</telerik:RadGauge>   
 

Design View

image

I now see the beginnings of my gauge in design view, but I need the numbers on the outisde of my gauge.  This is accomplished though adding the <telerik:RadialScale> section to my XAML, as shown below.

XAML

<telerik:RadGauge Margin="10" Name="radGauge1">  
    <telerik:RadialGauge> 
        <telerik:RadialScale>   
 
        </telerik:RadialScale> 
    </telerik:RadialGauge> 
</telerik:RadGauge>   
 

Design View

image

So in just a few seconds of coding, I am almost done with a basic RadGauge in my application.  My final touch is to add an indicator to the gauge to point to the appropriate values.  So my next step is to add a single needle indicator to my gauge. 

XAML

 

<telerik:RadGauge Margin="10" Name="radGauge1">  
    <telerik:RadialGauge> 
        <telerik:RadialScale> 
            <telerik:RadialScale.Indicators> 
                <telerik:Needle/> 
            </telerik:RadialScale.Indicators> 
        </telerik:RadialScale> 
    </telerik:RadialGauge> 
</telerik:RadGauge> 
 

Design View

image

Now we have all the components necessary for our RadGauge to live in our application.  The only thing left to do is have the indicator show the proper value in the gauge.  You will see below that I have set the 'Value' property of the needle to 55 and it is displayed properly in the RadGauge. 

XAML

<telerik:RadGauge Margin="10" Name="radGauge1">  
    <telerik:RadialGauge> 
        <telerik:RadialScale> 
            <telerik:RadialScale.Indicators> 
                <telerik:Needle Value="55"/>  
            </telerik:RadialScale.Indicators> 
        </telerik:RadialScale> 
    </telerik:RadialGauge> 
</telerik:RadGauge>   
 

Design View

image

Obviously you would not necessarily be hard coding the value in your applications so the RadGauge allows binding through the DataContext property.  And there you have it, you can put a RadGauge in your applications in a matter of minutes.  Of course, there are a number of features that I have not mentioned, but this will get you started working with the RadGauge.


Comments

Comments are disabled in preview mode.