Telerik blogs

Today I would like to highlight one of the newest controls added to the WPF / Silverlight control suites in November – the RadGauge control.

RadGauge combines its rich assortment of radial, linear and numeric gauge types with very flexible layout composition abilities thus allowing you to attain a new level of data visualization quickly and easily.

Let us discuss the basics of the layout composition and how it is implemented in the gauge control.

There are three levels of controls that participate in the layout:

  • RadGauge
  • LinearGauge / RadialGauge
  • LinearScale / RadialScale / NumericScale

 

RadGauge is the top level class but as far as the control is concerned this is simply a container that holds the rest of the building blocks together. RadGauge can contain any mixture of layout controls (grids, panels), LinearGauge (RadialGauge) containers, and even LinearScale / RadialScale / NumericScale instances.

LinearGauge (RadialGauge) is a container that normally stores the set of linear (respectively radial) and numeric scales. One of the major goals of this container control is the ability to create common appearance for your linear (radial) gauges. The default template looks like this:

<ControlTemplate>
   
<Border Background="{TemplateBinding Background}"                            
            BorderBrush
="{TemplateBinding BorderBrush}"
            BorderThickness
="{TemplateBinding BorderThickness}">
       
<Grid>
           
<ContentControl Template="{StaticResource RadialGaugeBackground}"/>
            <
ItemsPresenter />
            <
ContentControl Template="{StaticResource RadialGaugeForeground}"/>
        </
Grid>
   
</Border>
</ControlTemplate>

In this way you can define the background and the foreground content for all scales shown in one gauge and achieve artistic look for your gauges with different effects (e.g. place the radial image as background and add some “glassy” gradient as foreground). Note that it is not compulsory to use the LinearGauge / RadialGauge container e.g. if you prefer plain range display, you can place LinearScale / RadialScale / NumericScale instances directly in the RadGauge control content.

LinearScale / RadialScale / NumericScale instances provide all of the essential gauge logic. These controls host other elements (tick marks, labels and indicators) and provide functionality to manage appearance and positioning of these elements.

 

OK, let us see some examples that visualize the concepts described so far:

The most common approach to display radial gauge would be to use the RadGauge –> RadialGauge –> RadialScale hierarchy like this:

<telerik:RadGauge Grid.Row="1" Name="RadGauge1">
   
<telerik:RadialGauge Name="RadialGauge1" Width="300" Height="300">
       
<telerik:RadialScale Name="radialScale" Min="0" Max="8000" Center="0.5,0.5" 
            Radius
="0.75" StartWidth="0.15" StartAngle="120" SweepAngle="300" BorderBrush="Transparent" 
            IsLabelRotated
="True" MajorTicks="8" MiddleTicks="1" MinorTicks="6">
           
<telerik:RadialScale.MajorTick>
               
<telerik:TickProperties Length="0.15" />
            </
telerik:RadialScale.MajorTick>
           
<telerik:RadialScale.MinorTick>
               
<telerik:TickProperties Length="0.1" TickWidth="0.1" Location="OverInside" />
            </
telerik:RadialScale.MinorTick>
           
<telerik:RadialScale.Label>
               
<telerik:LabelProperties />
            </
telerik:RadialScale.Label>
           
<telerik:RadialScale.Indicators>
               
<telerik:Needle Name="marker" IsAnimated="True" SnapType="ToGrid">
               
</telerik:Needle>
           
</telerik:RadialScale.Indicators>
       
</telerik:RadialScale>
   
</telerik:RadialGauge>
</telerik:RadGauge>
 
 radial1
 
If you would like to achieve more plain display (no orange background ellipse and “glassy” foreground look), you can show only the range scale by omitting the RadialGauge container like this:
 
<telerik:RadGauge Grid.Row="1" Name="RadGauge1">
   
<telerik:RadialScale Width="300" Height="300" Name="radialScale" Min="0" Max="8000" Center="0.5,0.5" 
        Radius
="0.75" StartWidth="0.15" StartAngle="120" SweepAngle="300" BorderBrush="Transparent" 
        IsLabelRotated
="True" MajorTicks="8" MiddleTicks="1" MinorTicks="6">
       
<telerik:RadialScale.MajorTick>
           
<telerik:TickProperties Length="0.15" />
        </
telerik:RadialScale.MajorTick>
       
<telerik:RadialScale.MinorTick>
           
<telerik:TickProperties Length="0.1" TickWidth="0.1" Location="OverInside" />
        </
telerik:RadialScale.MinorTick>
       
<telerik:RadialScale.Label>
           
<telerik:LabelProperties />
        </
telerik:RadialScale.Label>
       
<telerik:RadialScale.Indicators>
           
<telerik:Needle Name="marker" IsAnimated="True" SnapType="ToGrid">
           
</telerik:Needle>
       
</telerik:RadialScale.Indicators>
   
</telerik:RadialScale>
</telerik:RadGauge>

radial2

 

Moreover, you can mix various gauge visuals and layout controls like this:

 - Grid

       - LinearGauge

              - LinearScale

       - StackPanel

              - RadialGauge

                     - RadialScale

              - RadialScale

    <telerik:RadGauge Grid.Row="1" Name="RadGauge1">
       
    <Grid Width="520" Height="400">
           
    <Grid.ColumnDefinitions>
               
    <ColumnDefinition Width="Auto" />
                <
    ColumnDefinition Width="Auto" />
            </
    Grid.ColumnDefinitions>
           
    <telerik:LinearGauge Width="120" Height="370" Margin="15">
               
    <telerik:LinearScale Min="0" Max="100" MajorTicks="10" MiddleTicks="1" MinorTicks="5">
                   
    <telerik:LinearScale.MajorTick>
                       
    <telerik:TickProperties Length="0.1" TickWidth="0.1" Location="OverCenter">
                       
    </telerik:TickProperties>
                   
    </telerik:LinearScale.MajorTick>
                   
    <telerik:LinearScale.MiddleTick>
                       
    <telerik:TickProperties Length="0.025" TickWidth="0.5" Location="OverCenter"/>
                    </
    telerik:LinearScale.MiddleTick>
                   
    <telerik:LinearScale.MinorTick>
                       
    <telerik:TickProperties Length="0.02" TickWidth="0.3" Location="OverCenter"/>
                    </
    telerik:LinearScale.MinorTick>
                   
    <telerik:LinearScale.Label>
                       
    <telerik:LabelProperties />
                    </
    telerik:LinearScale.Label>
               
    </telerik:LinearScale>
           
    </telerik:LinearGauge>
           
    <StackPanel Orientation="Vertical" Grid.Column="1">
               
    <telerik:RadialGauge Name="RadialGauge1" Width="200" Height="200">
                   
    <telerik:RadialScale Name="radialScale" Min="0" Max="8000" Center="0.5,0.5" 
                        Radius
    ="0.75" StartWidth="0.15" StartAngle="120" SweepAngle="300" BorderBrush="Transparent" 
                        IsLabelRotated
    ="True" MajorTicks="8" MiddleTicks="1" MinorTicks="6">
                       
    <telerik:RadialScale.MajorTick>
                           
    <telerik:TickProperties Length="0.15" />
                        </
    telerik:RadialScale.MajorTick>
                       
    <telerik:RadialScale.MinorTick>
                           
    <telerik:TickProperties Length="0.1" TickWidth="0.1" Location="OverInside" />
                        </
    telerik:RadialScale.MinorTick>
                       
    <telerik:RadialScale.Label>
                           
    <telerik:LabelProperties />
                        </
    telerik:RadialScale.Label>
                       
    <telerik:RadialScale.Indicators>
                           
    <telerik:Needle Name="marker" IsAnimated="True" SnapType="ToGrid">
                           
    </telerik:Needle>
                       
    </telerik:RadialScale.Indicators>
                   
    </telerik:RadialScale>
               
    </telerik:RadialGauge>
               
    <telerik:RadialScale Width="200" Height="200" Min="0" Max="8000" Center="0.5,0.5" 
                    Radius
    ="0.75" StartWidth="0.15" StartAngle="120" SweepAngle="300" BorderBrush="Transparent" 
                    IsLabelRotated
    ="True" MajorTicks="8" MiddleTicks="1" MinorTicks="6">
                   
    <telerik:RadialScale.MajorTick>
                       
    <telerik:TickProperties Length="0.15" />
                    </
    telerik:RadialScale.MajorTick>
                   
    <telerik:RadialScale.MinorTick>
                       
    <telerik:TickProperties Length="0.1" TickWidth="0.1" Location="OverInside" />
                    </
    telerik:RadialScale.MinorTick>
                   
    <telerik:RadialScale.Label>
                       
    <telerik:LabelProperties />
                    </
    telerik:RadialScale.Label>
                   
    <telerik:RadialScale.Indicators>
                       
    <telerik:Needle Name="marker2" IsAnimated="True" SnapType="ToGrid">
                       
    </telerik:Needle>
                   
    </telerik:RadialScale.Indicators>
               
    </telerik:RadialScale>
           
    </StackPanel>
       
    </Grid>
    </telerik:RadGauge>

    radial3

     

    Hope this overview helps.


    Comments

    Comments are disabled in preview mode.