Telerik blogs

Recently John showed how to create half-circle gauges and now I am glad to announce that RadGauge, both WPF and Silverlight, supports half-circle and quarter-circle styles out of the box. All you need to do is provide the correct resource through a ResourceDictionary and then use the corresponding style. The styles are named after the major geographical directions -- North, East, South and West, well we only use the first letters here - N, E, S and W. So the styles you need are <Theme>RadialGaugeHalfCircle<Direction>Style and <Theme>RadialScaleHalfCircle<Direction>Style. Check the following example - semi-circular, south-directed vista-styled gauge:

GaugeSouth

And this is the XAML used:

        <Grid.Resources>
           
<ResourceDictionary>
               
<ResourceDictionary.MergedDictionaries>
                   
<ResourceDictionary Source="/Telerik.Windows.Controls.Gauge;component/Themes/generic.xaml" />
                </
ResourceDictionary.MergedDictionaries>
           
</ResourceDictionary>
       
</Grid.Resources>

       
<telerik:RadGauge Name="radGauge" Width="340" Height="200">
           
<telerik:RadialGauge Name="radialGauge" Style="{StaticResource VistaRadialGaugeHalfCircleSStyle}">
               
<telerik:RadialScale Style="{StaticResource VistaRadialScaleHalfCircleSStyle}">
               
</telerik:RadialScale>
           
</telerik:RadialGauge>
       
</telerik:RadGauge>

The "telerik" prefix maps to "http://schemas.telerik.com/2008/xaml/presentation".

You can use the same approach for quarter-style gauges. The styles you need are <Theme>RadialGaugeQuarterCircle<Direction>Style and <Theme>RadialScaleQuarterCircle<Direction>Style. The directions here are North-West, North-East, South-East and South-West, so you can use NW, NE, SE and SW. North-west vista radial gauge looks like this:

GaugeNW

XAML:

<telerik:RadGauge Name="radGauge" Width="300" Height="300">
   
<telerik:RadialGauge Name="radialGauge" Style="{StaticResource VistaRadialGaugeQuarterCircleNWStyle}">
       
<telerik:RadialScale Style="{StaticResource VistaRadialScaleQuarterCircleNWStyle}">
       
</telerik:RadialScale>
   
</telerik:RadialGauge>
</telerik:RadGauge>
 
The usage in Silverlight is similar:
 
<UserControl x:Class="SilverlightApplication1.Page"
    xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:telerik
="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    xmlns:control
="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Gauge"
    xmlns:gauge
="clr-namespace:Telerik.Windows.Controls.Gauges;assembly=Telerik.Windows.Controls.Gauge"
    Width
="300" Height="300">
   
<Grid x:Name="LayoutRoot" Background="White">
       
<Grid.Resources>
           
<ResourceDictionary>
               
<telerik:ResourceDictionary.MergedDictionaries>
                   
<telerik:ResourceDictionary 
                        Source
="/Telerik.Windows.Controls.Gauge;component/Themes/Generic.xaml"
                        Keys
="RadialGaugeQuarterCircleNWStyle,RadialScaleQuarterCircleNWStyle">
                   
</telerik:ResourceDictionary>
               
</telerik:ResourceDictionary.MergedDictionaries>
           
</ResourceDictionary>
       
</Grid.Resources>
       
<control:RadGauge x:Name="RadGauge1" Width="300" Height="300">
           
<gauge:RadialGauge x:Name="RadialGauge1" Style="{StaticResource RadialGaugeQuarterCircleNWStyle}" >
               
<gauge:RadialScale x:Name="RadialScale1" Style="{StaticResource RadialScaleQuarterCircleNWStyle}">
               
</gauge:RadialScale>
           
</gauge:RadialGauge>
       
</control:RadGauge>
   
</Grid>
</UserControl>

For more details you can check our online examples, which you can also download from your accounts:

Have fun with RadGauge.


Comments

Comments are disabled in preview mode.