Need Help Silverlight Gauges

[Shailendra]

Hi,
I am trying to use telerik silverlight gauges, but i cant get it running.
The design pane shows no control there.
The XAML code is as follows

	<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 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>

 

 

 

 

 

 

Can you please tell me what I am missing here while using gauges? There is an error in loading style as it says that it can't find the StaticResources, but when I add following code snippet then the whole snippet shows errors.

 

	<ContentControl.Resources>
	<ResourceDictionary>
	<telerik:ResourceDictionary.MergedDictionaries>                                 <telerik:ResourceDictionary Keys="UIText,SolidBrushCombo,RadGaugeStyle,RadialGaugeStyle,RadialScaleStyle,DefaultTickStyle,
	TriangleTickStyle,LabelPropertiesStyle,NeedleStyle,RadNumericUpDown,DefaultCombo"                                             Source="/Examples.CS;component/Examples/Gauge/RadGaugeResources.xaml" />
	</telerik:ResourceDictionary.MergedDictionaries>
	</ResourceDictionary>
	</ContentControl.Resources>

it says attached property Resources is not found. Do i need to add these resources in the app.xaml.
I am running visual studios (2008) 9 Team System with the latest patch and I have already installed Microsoft Silverlight kit.Any help will be greatly appreciated (Or can you please point me to some walkthrough for using Gauge Control for silverlight)
Thanks in Advance

 

[Andrey]

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.

[Shailendra]

Hi Andrey,
    Thank you for your sincere feedback, I added the reference and now i can see the Gauges there.
Thanks Again

[Darek]

This does not compute with UserControls.