Hello Shailendra,
You didn't merge Telerik gauge styles to your page. To fix the problem you need to do following:
1. Add reference to the Telerik.Windows.Control.dll to your Silverlight application.
2. Add following namespace to the UserControl element:
xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
3. Add UserControl resources and force them to merge default Telerik styles:
<UserControl.Resources>
<ResourceDictionary>
<telerik:ResourceDictionary.MergedDictionaries>
<telerik:ResourceDictionary Keys="RadGaugeStyle,RadialGaugeStyle,RadialScaleStyle,DefaultTickStyle,TriangleTickStyle,MarkerStyle,RadialBarStyle,LabelPropertiesStyle,RadialRangeStyle,StateIndicatorStyle,NeedleStyle,CustomTickMarkStyle,FontFamilyNumericPosition,NumericIndicatorStyle,LinearGaugeStyle,LinearScaleStyle,CustomTickMarkStyle,TickLabelAppearance,HexagonalSevenSegsPosition,NumericScaleStyle,LinearBarStyle,LinearRangeStyle,SevenSegsPosition"
Source="/Telerik.Windows.Controls.Charting;component/Themes/generic.xaml" />
</telerik:ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
4. Build your Silverlight project to see gauge elements.
For you convenience I'm including whole page's XAML here:
<
UserControl x:Class="TestGaugeApplication.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.Charting"
xmlns:gauge="clr-namespace:Telerik.Windows.Controls.Gauges;assembly=Telerik.Windows.Controls.Charting"
Width="400" Height="300">
<UserControl.Resources>
<ResourceDictionary>
<telerik:ResourceDictionary.MergedDictionaries>
<telerik:ResourceDictionary Keys="RadGaugeStyle,RadialGaugeStyle,RadialScaleStyle,DefaultTickStyle,TriangleTickStyle,MarkerStyle,RadialBarStyle,LabelPropertiesStyle,RadialRangeStyle,StateIndicatorStyle,NeedleStyle,CustomTickMarkStyle,FontFamilyNumericPosition,NumericIndicatorStyle,LinearGaugeStyle,LinearScaleStyle,CustomTickMarkStyle,TickLabelAppearance,HexagonalSevenSegsPosition,NumericScaleStyle,LinearBarStyle,LinearRangeStyle,SevenSegsPosition"
Source="/Telerik.Windows.Controls.Charting;component/Themes/generic.xaml" />
</telerik:ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<control:RadGauge x:Name="radGauge"
Width="300"
Height="300"
Style="{StaticResource RadGaugeStyle}">
<gauge:RadialGauge Style="{StaticResource RadialGaugeStyle}">
<gauge:RadialScale x:Name="radialScale"
Min="0"
Max="100"
MajorTicks="10"
MiddleTicks="2"
MinorTicks="2"
Style="{StaticResource RadialScaleStyle}">
<gauge:RadialScale.MajorTick>
<gauge:TickProperties Length="0.1" Style="{StaticResource TriangleTickStyle}" />
</gauge:RadialScale.MajorTick>
<gauge:RadialScale.MiddleTick>
<gauge:TickProperties Style="{StaticResource DefaultTickStyle}"
Length="0.07" />
</gauge:RadialScale.MiddleTick>
<gauge:RadialScale.MinorTick>
<gauge:TickProperties Style="{StaticResource DefaultTickStyle}"
Length="0.05" />
</gauge:RadialScale.MinorTick>
<gauge:RadialScale.Label>
<gauge:LabelProperties Location="Inside"
Foreground="White"
Style="{StaticResource LabelPropertiesStyle}"/>
</gauge:RadialScale.Label>
<gauge:RadialScale.Indicators>
<gauge:Needle x:Name="needle"
IsAnimated="true"
Value="20"
Style="{StaticResource NeedleStyle}" />
</gauge:RadialScale.Indicators>
</gauge:RadialScale>
</gauge:RadialGauge>
</control:RadGauge>
</Grid>
</
UserControl>
Sincerely yours,
Andrey Murzov
the Telerik team
Check out
Telerik Trainer, the state of the art learning tool for Telerik products.