Need Help Silverlight Gauges

4 posts, 1 answers
  1. Shailendra
    Shailendra avatar
    3 posts
    Member since:
    Nov 2008

    Posted 18 Nov 2008 Link to this post

    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

    1 <control:RadGauge x:Name="radGauge" Width="300" Height="300"    
    2             Style="{StaticResource RadGaugeStyle}">  
    3                     <gauge:RadialGauge Style="{StaticResource RadialGaugeStyle}">  
    4                         <gauge:RadialScale x:Name="radialScale" Min="0"  Max="100"                                                     
                                                
    MajorTicks="10"  MiddleTicks="2"  MinorTicks="2"    
    5                                              Style="{StaticResource RadialScaleStyle}">   
    6                             <gauge:RadialScale.MajorTick> 
    7                                 <gauge:TickProperties Style="{StaticResource TriangleTickStyle}" /> 
    8                             </gauge:RadialScale.MajorTick> 
    9                             <gauge:RadialScale.MiddleTick> 
    10                                 <gauge:TickProperties Style="{StaticResource DefaultTickStyle}"  Length="0.07" />   
    11                             </gauge:RadialScale.MiddleTick> 
    12                             <gauge:RadialScale.MinorTick> 
    13                                 <gauge:TickProperties Style="{StaticResource DefaultTickStyle}"  Length="0.05" />   
    14                             </gauge:RadialScale.MinorTick> 
    15                             <gauge:RadialScale.Label> 
    16                                 <gauge:LabelProperties  Location="Inside"  Foreground="White" Style="{StaticResource LabelPropertiesStyle}"/>   
    17                             </gauge:RadialScale.Label> 
    18                             <gauge:RadialScale.Indicators> 
    19                                 <gauge:Needle x:Name="needle" IsAnimated="true" Value="20" Style="{StaticResource NeedleStyle}" /> 
    20                             </gauge:RadialScale.Indicators> 
    21                         </gauge:RadialScale> 
    22                     </gauge:RadialGauge> 
    23                 </control:RadGauge> 
    24             </Grid> 
    25         </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.

     

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

    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

     

  2. Answer
    Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 19 Nov 2008 Link to this post

    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.
  3. Shailendra
    Shailendra avatar
    3 posts
    Member since:
    Nov 2008

    Posted 20 Nov 2008 Link to this post

    Hi Andrey,
        Thank you for your sincere feedback, I added the reference and now i can see the Gauges there.
    Thanks Again
  4. Darek
    Darek avatar
    16 posts
    Member since:
    Mar 2009

    Posted 31 Mar 2009 Link to this post

    This does not compute with UserControls.
Back to Top