Textblock/Label on Numeric Indicator

3 posts, 1 answers
  1. Aris
    Aris avatar
    5 posts
    Member since:
    Jun 2009

    Posted 29 Jun 2009 Link to this post

    Hi all,
    I am new to silverlight controls and I need some help plz.
    I have an Indicator list and over each indicator I want to display a text (title) saying what this indicator shows.
    My code is below

    <control:RadGauge Width="250" Height="300" x:Name="radGauge" Grid.Row="1" > 
                    <gauge:NumericScale x:Name="scale" Max="255"
                        <gauge:IndicatorList> 
                            <gauge:NumericIndicator x:Name="numericIndicator" Format="{}{0:F2}" 
                                Foreground="OrangeRed"  Left="0.125" Top="0.01" RelativeWidth="0.6" 
                                RelativeHeight="0.2"
                                <gauge:NumericIndicator.Background> 
                                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"
                                        <GradientStop Offset="0" Color="Blue" /> 
                                        <GradientStop Offset="0.5" Color="SkyBlue" /> 
                                        <GradientStop Offset="1" Color="Blue" /> 
                                    </LinearGradientBrush> 
                                </gauge:NumericIndicator.Background> 
                                <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black" 
                                    Background="#9F00FF7F"  /> 
                                <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black" 
                                    Background="#9F00FF7F" /> 
                                <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black" 
                                    Background="#9F00FF7F" /> 
                                <gauge:NumberPosition FontSize="56" BorderThickness="1" 
                                    Background="#9F00FF7F" Foreground="Black" RelativeWidth="0.5" /> 
                                <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black" 
                                    Background="#9F00FF7F" /> 
                                <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black" 
                                    Background="#9F00FF7F" /> 
                            </gauge:NumericIndicator> 
                        <gauge:NumericIndicator x:Name="numericIndicator2" Format="{}{0:F2}" 
                                Foreground="OrangeRed" Left="0.125" Top="0.25" RelativeWidth="0.6" 
                                RelativeHeight="0.2"
                            <gauge:NumericIndicator.Background> 
                                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"
                                    <GradientStop Offset="0" Color="Blue" /> 
                                    <GradientStop Offset="0.5" Color="SkyBlue" /> 
                                    <GradientStop Offset="1" Color="Blue" /> 
                                </LinearGradientBrush> 
                            </gauge:NumericIndicator.Background> 
                            <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black" 
                                    Background="#9F00FF7F"  /> 
                            <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black" 
                                    Background="#9F00FF7F" /> 
                            <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black" 
                                    Background="#9F00FF7F" /> 
                            <gauge:NumberPosition FontSize="56" BorderThickness="1" 
                                    Background="#9F00FF7F" Foreground="Black" RelativeWidth="0.5" /> 
                            <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black" 
                                    Background="#9F00FF7F" /> 
                            <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black" 
                                    Background="#9F00FF7F" /> 
                        </gauge:NumericIndicator>                     
                        <gauge:NumericIndicator x:Name="numericIndicator3" Format="{}{0:F2}" 
                                Foreground="OrangeRed" Left="0.125" Top="0.5" RelativeWidth="0.6" 
                                RelativeHeight="0.2"
                            <gauge:NumericIndicator.Background> 
                                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"
                                    <GradientStop Offset="0" Color="Blue" /> 
                                    <GradientStop Offset="0.5" Color="SkyBlue" /> 
                                    <GradientStop Offset="1" Color="Blue" /> 
                                </LinearGradientBrush> 
                            </gauge:NumericIndicator.Background> 
                            <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black" 
                                    Background="#9F00FF7F"  /> 
                            <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black" 
                                    Background="#9F00FF7F" /> 
                            <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black" 
                                    Background="#9F00FF7F" /> 
                            <gauge:NumberPosition FontSize="56" BorderThickness="1" 
                                    Background="#9F00FF7F" Foreground="Black" RelativeWidth="0.5" /> 
                            <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black" 
                                    Background="#9F00FF7F" /> 
                            <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black" 
                                    Background="#9F00FF7F" /> 
                        </gauge:NumericIndicator> 
                    </gauge:IndicatorList> 
                    </gauge:NumericScale> 
     
                </control:RadGauge> 
    Thank you for your help.


  2. Answer
    Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 30 Jun 2009 Link to this post

    Hello Aris,

    Unfortunately IndicatorsList does not allow you to include elements different from indicator to it. The good news is that  RadGauge control allows you to have very flexible inner layout. You can create 3 numeric scales inside it and accompany every scale with text block:

    <control:RadGauge Width="250" Height="300" x:Name="radGauge" Grid.Row="1" > 
        <Grid> 
            <Grid.RowDefinitions> 
                <RowDefinition Height="Auto" /> 
                <RowDefinition Height="Auto" /> 
                <RowDefinition Height="Auto" /> 
                <RowDefinition Height="Auto" /> 
                <RowDefinition Height="Auto" /> 
                <RowDefinition Height="Auto" /> 
            </Grid.RowDefinitions> 
     
            <TextBlock Grid.Row="0" Text="Numeric scale 1" HorizontalAlignment="Center" /> 
              
            <gauge:NumericScale x:Name="scale1" 
                                Grid.Row="1" 
                                Height="50" 
                                Width="300" 
                                Max="255">  
                <gauge:IndicatorList> 
                    <gauge:NumericIndicator x:Name="numericIndicator"   
                                            Format="{}{0:F2}"    
                                            Foreground="OrangeRed"    
                                            Left="0.125"   
                                            Top="0.01"   
                                            RelativeWidth="0.6"    
                                            RelativeHeight="1">  
                        <gauge:NumericIndicator.Background> 
                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">  
                                <GradientStop Offset="0" Color="Blue" /> 
                                <GradientStop Offset="0.5" Color="SkyBlue" /> 
                                <GradientStop Offset="1" Color="Blue" /> 
                            </LinearGradientBrush> 
                        </gauge:NumericIndicator.Background> 
                        <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black"    
                            Background="#9F00FF7F"  /> 
                        <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black"    
                            Background="#9F00FF7F" /> 
                        <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black"    
                            Background="#9F00FF7F" /> 
                        <gauge:NumberPosition FontSize="56" BorderThickness="1"    
                            Background="#9F00FF7F" Foreground="Black" RelativeWidth="0.5" /> 
                        <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black"    
                            Background="#9F00FF7F" /> 
                        <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black"    
                            Background="#9F00FF7F" /> 
                    </gauge:NumericIndicator> 
                </gauge:IndicatorList> 
            </gauge:NumericScale> 
     
            <TextBlock Grid.Row="2" Text="Numeric scale 2" HorizontalAlignment="Center" /> 
     
            <gauge:NumericScale x:Name="scale2"   
                                Grid.Row="3" 
                                Height="50" 
                                Width="300" 
                                Max="255">  
                <gauge:IndicatorList> 
                    <gauge:NumericIndicator x:Name="numericIndicator2"   
                                            Format="{}{0:F2}"    
                                            Foreground="OrangeRed"   
                                            Left="0.125"   
                                            Top="0.01"   
                                            RelativeWidth="0.6"    
                                            RelativeHeight="1">  
                        <gauge:NumericIndicator.Background> 
                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">  
                                <GradientStop Offset="0" Color="Blue" /> 
                                <GradientStop Offset="0.5" Color="SkyBlue" /> 
                                <GradientStop Offset="1" Color="Blue" /> 
                            </LinearGradientBrush> 
                        </gauge:NumericIndicator.Background> 
                        <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black"    
                            Background="#9F00FF7F"  /> 
                        <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black"    
                            Background="#9F00FF7F" /> 
                        <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black"    
                            Background="#9F00FF7F" /> 
                        <gauge:NumberPosition FontSize="56" BorderThickness="1"    
                            Background="#9F00FF7F" Foreground="Black" RelativeWidth="0.5" /> 
                        <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black"    
                            Background="#9F00FF7F" /> 
                        <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black"    
                            Background="#9F00FF7F" /> 
                    </gauge:NumericIndicator> 
                </gauge:IndicatorList> 
            </gauge:NumericScale> 
     
            <TextBlock Grid.Row="4" Text="Numeric scale 3" HorizontalAlignment="Center" /> 
              
            <gauge:NumericScale x:Name="scale3"   
                                Grid.Row="5" 
                                Height="50" 
                                Width="300" 
                                Max="255">  
                <gauge:IndicatorList> 
                    <gauge:NumericIndicator x:Name="numericIndicator3"   
                                            Format="{}{0:F2}"    
                                            Foreground="OrangeRed"   
                                            Left="0.125"   
                                            Top="0.01"   
                                            RelativeWidth="0.6"    
                                            RelativeHeight="1">  
                        <gauge:NumericIndicator.Background> 
                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">  
                                <GradientStop Offset="0" Color="Blue" /> 
                                <GradientStop Offset="0.5" Color="SkyBlue" /> 
                                <GradientStop Offset="1" Color="Blue" /> 
                            </LinearGradientBrush> 
                        </gauge:NumericIndicator.Background> 
                        <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black"    
                            Background="#9F00FF7F"  /> 
                        <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black"    
                            Background="#9F00FF7F" /> 
                        <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black"    
                            Background="#9F00FF7F" /> 
                        <gauge:NumberPosition FontSize="56" BorderThickness="1"    
                            Background="#9F00FF7F" Foreground="Black" RelativeWidth="0.5" /> 
                        <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black"    
                            Background="#9F00FF7F" /> 
                        <gauge:NumberPosition FontSize="56" BorderThickness="1" Foreground="Black"    
                            Background="#9F00FF7F" /> 
                    </gauge:NumericIndicator> 
                </gauge:IndicatorList> 
            </gauge:NumericScale> 
        </Grid> 
    </control:RadGauge> 
     


    Kind regards,
    Andrey Murzov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. DevCraft banner
  4. Aris
    Aris avatar
    5 posts
    Member since:
    Jun 2009

    Posted 06 Jul 2009 Link to this post

    Thank very much :D
    That worked fine for me.
    Keep up the very very good work you guys doing
Back to Top