Customizing the Radial RadGauge

Hello everyone and happy new year. Today I decided to break the lengthy silence on my blog with an example on how to customize the RadGauge. Since there were a couple of requests for custom Radial Gauge, I will present a way to create a semi-circle gauge. That is generally achieved in two steps:

• Customize the radial scale range

Four parameters define the radial scale range: StartAngle, SweepAngle, Radius and Center. The StartAngle and SweepAngle are specified in degrees (0 to 360), starting from the right side of the gauge, going clockwise (note, that positive angle direction is starts from positive X and goes to the positive Y. Since the screen coordinates start from top-left, the Y axis points downwards, instead of upwards, the positive direction of the angle is clockwise instead of the mathematically accepted counter-clockwise). The scale Radius and Center are measured as a fraction (0.0 to 1.0) of the space available for scale in the surrounding container. Here is a sample XAML code:

* The most important parts of the XAML are in bold.

<telerik:RadGauge Grid.Column="1">
    <Grid Width="300" Height="300">
        <Grid Margin="12">
            <telerik:RadialGauge> <telerik:RadialScale Name="radialScale" StartAngle="180" SweepAngle="180" Radius="0.75">
                    <telerik:RadialScale.MajorTick>
                        <telerik:TickProperties />
                    </telerik:RadialScale.MajorTick>
                    <telerik:RadialScale.MiddleTick>
                        <telerik:TickProperties Length="0.05" />
                    </telerik:RadialScale.MiddleTick>
                    <telerik:RadialScale.MinorTick>
                        <telerik:TickProperties Length="0.025" />
                    </telerik:RadialScale.MinorTick>
                    <telerik:RadialScale.Label>
                        <telerik:LabelProperties />
                    </telerik:RadialScale.Label>
                    <telerik:RadialScale.Indicators>
                        <telerik:Needle Name="needle" 
                                        Location="Inside"
                                        IsAnimated="True" />
                    </telerik:RadialScale.Indicators>
                </telerik:RadialScale>
            </telerik:RadialGauge>
        </Grid>
    </Grid>
</telerik:RadGauge>

• The next step is to clip the foreground and background of the RadialGauge.

By default the RadialGauge uses full 360 degrees, so the gauge’s foreground and background are full ellipse (circle in the case Width == Height). We need to make only half of it to be visible. This can be easily achieved by clipping. For the current scenario RectangleGeometry will do the trick, but in general any geometry clipping will do. Here is a sample code:

<Grid.Resources>
    <telerik:FormatConverter x:Key="FormatConverter" />

   <RectangleGeometry x:Key="ClipGeometry" Rect="0,0,300,150" />

    <ControlTemplate x:Key="CustomRadialGaugeBackground" TargetType="{x:Type ContentControl}">
        <Grid Clip="{StaticResource ClipGeometry}" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=telerik:RadialGauge}, Path=Width}" 
            Height="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=telerik:RadialGauge}, Path=Height}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.15*"/>
                <ColumnDefinition/>
                <ColumnDefinition Width="0.3*"/>
                <ColumnDefinition/>
                <ColumnDefinition Width="0.15*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.15*"/>
                <RowDefinition/>
                <RowDefinition Height="0.3*"/>
                <RowDefinition/>
                <RowDefinition Height="0.15*"/>
            </Grid.RowDefinitions>
            
            <Ellipse Stroke="#FFC4C3C2" 
             StrokeThickness="2" 
             Grid.ColumnSpan="5" 
             Grid.RowSpan="5">
                <Ellipse.Fill>
                    <LinearGradientBrush StartPoint="0,0.500001" EndPoint="1,0.500001">
                        <GradientStop Color="#FFC8CACC" Offset="0"/>
                        <GradientStop Color="#FFABADAF" Offset="0.87"/>
                        <GradientStop Color="#FF8F9093" Offset="1"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse Stretch="Uniform" 
             HorizontalAlignment="Stretch" 
             VerticalAlignment="Stretch" 
             Grid.Column="1" 
             Grid.ColumnSpan="3" 
             Grid.Row="1" 
             Grid.RowSpan="3">
                <Ellipse.Fill>
                    <RadialGradientBrush RadiusX="0.548605" 
                                 RadiusY="0.553172" 
                                 Center="0.496522,0.498134" 
                                 GradientOrigin="0.496522,0.498134">
                        <RadialGradientBrush.RelativeTransform>
                            <TransformGroup/>
                        </RadialGradientBrush.RelativeTransform>
                        <GradientStop Color="#FF000000" Offset="0"/>
                        <GradientStop Color="#FF6A0600" Offset="0.296707"/>
                        <GradientStop Color="#FFAD1100" Offset="0.449867"/>
                        <GradientStop Color="#FFF11C00" Offset="0.840652"/>
                        <GradientStop Color="#FF780E00" Offset="0.939574"/>
                        <GradientStop Color="#FF000000" Offset="1"/>
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse Stretch="Uniform" 
             Opacity="0.5" 
             HorizontalAlignment="Stretch" 
             VerticalAlignment="Stretch" 
             Grid.Column="1" 
             Grid.ColumnSpan="3" 
             Grid.Row="1" 
             Grid.RowSpan="3">
                <Ellipse.Fill>
                    <LinearGradientBrush StartPoint="0.499997,-0.00352026" EndPoint="0.499997,0.992959">
                        <GradientStop Color="#FFFF7000" Offset="0"/>
                        <GradientStop Color="#FFD13F00" Offset="0.482804"/>
                        <GradientStop Color="#FFA30F00" Offset="0.554947"/>
                        <GradientStop Color="#FFA30F00" Offset="1"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse Stretch="Fill" 
             StrokeThickness="1" 
             StrokeLineJoin="Round" 
             Stroke="#34DC1900" 
             Fill="#34000000"  
             HorizontalAlignment="Stretch" 
             VerticalAlignment="Stretch" 
             Grid.Column="2" 
             Grid.Row="2" />
        </Grid>
    </ControlTemplate>

    <ControlTemplate x:Key="CustomRadialGaugeForeground" TargetType="{x:Type ContentControl}">
        <Grid Clip="{StaticResource ClipGeometry}" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=telerik:RadialGauge}, Path=Width}" 
            Height="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=telerik:RadialGauge}, Path=Height}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.15*"/>
                <ColumnDefinition/>
                <ColumnDefinition Width="0.3*"/>
                <ColumnDefinition/>
                <ColumnDefinition Width="0.15*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.15*"/>
                <RowDefinition/>
                <RowDefinition Height="0.3*"/>
                <RowDefinition/>
                <RowDefinition Height="0.15*"/>
            </Grid.RowDefinitions>

            <Path Stretch="Fill" 
          Height="Auto" 
          RenderTransformOrigin="0.5,1.31" 
          Data="M136.99973,92.000117 C60.784439,92.000117 1.6558759,113.43244 4.7598601,101.93656 20.616215,43.211116 74.261859,0 138,0 200.39567,0 251.72642,41.847141 270.18819,98.246777 275.99955,116.00015 213.21503,92.000117 136.99973,92.000117 z" 
          HorizontalAlignment="Stretch" 
          Margin="2,2,2,8" 
          Grid.Column="1" 
          Grid.ColumnSpan="3" 
          Grid.Row="1" 
          Grid.RowSpan="1">
                <Path.Fill>
                    <LinearGradientBrush StartPoint="0.499997,-0.29169" EndPoint="0.499997,1.57502">
                        <GradientStop Color="#34FFF000" Offset="0"/>
                        <GradientStop Color="#34FFA100" Offset="0.482804"/>
                        <GradientStop Color="#34FF5300" Offset="0.554947"/>
                        <GradientStop Color="#34FF5300" Offset="1"/>
                    </LinearGradientBrush>
                </Path.Fill>
            </Path>
        </Grid>
    </ControlTemplate>

 
    <ControlTemplate x:Key="CustomRadialGaugeTemplate"
TargetType="{x:Type telerik:RadialGauge}">
        <Border Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
            <Grid>
                <ContentControl Template="{StaticResource CustomRadialGaugeBackground}" />
                <ItemsPresenter />
                <ContentControl Template="{StaticResource CustomRadialGaugeForeground}" />
            </Grid>
        </Border>
    </ControlTemplate>
    
    <Style TargetType="{x:Type telerik:RadialGauge}">
        <Setter Property="Template" Value="{StaticResource CustomRadialGaugeTemplate}" />
    </Style>
</Grid.Resources>

And the final result should look like that:

Let me know if you find this blog post useful. Any suggestions for similar blog posts or ways to improve the content are welcome.