Telerik Forums / UI for Silverlight
This is a migrated thread and some comments may be shown as answers.

Textblock/Label on Numeric Indicator

2 Answers 106 Views
Gauge
This is a migrated thread and some comments may be shown as answers.
Aris
Top achievements
Rank 1
Aris asked on 29 Jun 2009, 02:51 PM
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 Answers, 1 is accepted

Sort by
0
Accepted
Andrey
Telerik team
answered on 30 Jun 2009, 11:57 AM
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.
0
Aris
Top achievements
Rank 1
answered on 06 Jul 2009, 08:24 AM
Thank very much :D
That worked fine for me.
Keep up the very very good work you guys doing
Tags
Gauge
Asked by
Aris
Top achievements
Rank 1
Answers by
Andrey
Telerik team
Aris
Top achievements
Rank 1
Share this question
or