This is a migrated thread and some comments may be shown as answers.

[Solved] Need Help Silverlight Gauges

3 Answers 273 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Shailendra asked on 18 Nov 2008, 06:01 PM

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

3 Answers, 1 is accepted

Accepted

answered on 19 Nov 2008, 05:14 PM

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>

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

<telerik:ResourceDictionary.MergedDictionaries>

Source="/Telerik.Windows.Controls.Charting;component/Themes/generic.xaml" />

</telerik:ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</UserControl.Resources>

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