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:TickProperties />
<telerik:TickProperties Length="0.05" />
<telerik:TickProperties Length="0.025" />
<telerik:LabelProperties />
<telerik:Needle Name="needle"
Location="Inside"
IsAnimated="True" />
</Grid>
</Grid>
• 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" />

<Grid Clip="{StaticResource ClipGeometry}" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=telerik:RadialGauge}, Path=Width}"
<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>
</Ellipse.Fill>
</Ellipse>
<Ellipse Stretch="Uniform"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Grid.Column="1"
Grid.ColumnSpan="3"
Grid.Row="1"
Grid.RowSpan="3">
<Ellipse.Fill>
Center="0.496522,0.498134"
<TransformGroup/>
</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>
</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>

<Grid Clip="{StaticResource ClipGeometry}" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=telerik:RadialGauge}, Path=Width}"
<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>
</Path.Fill>
</Path>
</Grid>
</ControlTemplate>```
```
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<ItemsPresenter />
</Grid>
</Border>
</ControlTemplate>