Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Gauge > Need to show Labels in Ranges

• Muthukumar

  Posted on Oct 14, 2011 (permalink)

  i have a simple gauge like below code.
  it has Radial scale Max =100 and Min =0  MajorTickStep =10
  I dont want the labels of MajorTickStep Instead of that 
   just i need to show only labels for every range. 
  
  example 
  
  Need to show the Labels where 0, 20 ,50 and 100
  
  is that possible ???
  
  

  
  <telerik:RadialScale Name="radialScale">
   <telerik:RangeList>
    <telerik:RadialRange
     Name="Green"
     Min="0"
     Max="20"
     StartWidth="0.02"
     EndWidth="0.1"
     Location="Inside"
     Background="CadetBlue"
     BorderBrush="CadetBlue"/>
   
   <telerik:RadialRange
     Name="Red"
     Min="20"
     Max="50"
     StartWidth="0.02"
     EndWidth="0.1"
     Location="Inside"
     Background="CadetBlue"
     BorderBrush="CadetBlue"/>
  <telerik:RadialRange
     Name="Red"
     Min="50"
     Max="100"
     StartWidth="0.02"
     EndWidth="0.1"
     Location="Inside"
     Background="CadetBlue"
     BorderBrush="CadetBlue"/>
   </telerik:RangeList>
  </telerik:RadialScale>
  
  

  Reply

• Andrey Andrey

  Posted on Oct 18, 2011 (permalink)

  Hi Muthukumar,
  
  Yes, it is possible. I would recommend the following way:
  1. Hide the standard labels using transparent color for them.
  2. Add custom tick marks with appropriate template.

  The sample code is below.

  <UserControl x:Class="GaugeTest.Gauge"

      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

      xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

      mc:Ignorable="d"

      d:DesignHeight="300" d:DesignWidth="400">

      <UserControl.Resources>

          <DataTemplate x:Key="TickLabelAppearance">

              <TextBlock HorizontalAlignment="Center"

                     FontFamily="{Binding Path=Properties.FontFamily}"

                     FontSize="{Binding Path=Properties.FontSize}"

                     Foreground="{Binding Path=Properties.Foreground}"

                     Margin="4,2,4,2">

              <TextBlock.Text>

                  <Binding>

                      <Binding.Converter>

                          <telerik:LabelFormatConverter />

                      </Binding.Converter>

                  </Binding>

              </TextBlock.Text>

              </TextBlock>

          </DataTemplate>

   

          <Style x:Key="TickMarkStyle" TargetType="telerik:CustomTickMark">

              <Setter Property="Offset" Value="0" />

              <Setter Property="Length" Value="0.1" />

              <Setter Property="TickWidth" Value="0.1" />

              <Setter Property="Foreground" Value="White" />

              <Setter Property="Template">

                  <Setter.Value>

                      <ControlTemplate>

                          <Grid />

                      </ControlTemplate>

                  </Setter.Value>

              </Setter>

              <Setter Property="ItemTemplate" Value="{StaticResource TickLabelAppearance}" />

          </Style>

   

      </UserControl.Resources>

      <Grid x:Name="LayoutRoot" Background="White">

          <telerik:RadGauge>

              <telerik:RadialGauge>

                  <telerik:RadialScale Name="radialScale"

                                       Max="100" Min="0" MajorTickStep="10">

                      <telerik:RadialScale.Label>

                          <telerik:LabelProperties Foreground="Transparent" />

                      </telerik:RadialScale.Label>

                      <telerik:TickList>

                          <telerik:CustomTickMark Value="0"

                                                  Style="{StaticResource TickMarkStyle}"/>

                          <telerik:CustomTickMark Value="20"

                                                  Style="{StaticResource TickMarkStyle}"/>

                          <telerik:CustomTickMark Value="50"

                                                  Style="{StaticResource TickMarkStyle}"/>

                          <telerik:CustomTickMark Value="100"

                                                  Style="{StaticResource TickMarkStyle}"/>

                      </telerik:TickList>

                      <telerik:RangeList>

                          <telerik:RadialRange Name="Green"

                                               Min="0" Max="20"

                                               StartWidth="0.02" EndWidth="0.1"

                                               Location="Inside"

                                               Background="CadetBlue" BorderBrush="CadetBlue"/>

                          <telerik:RadialRange Name="Yellow"

                                               Min="20" Max="50"

                                               StartWidth="0.02" EndWidth="0.1"

                                               Location="Inside"

                                               Background="CadetBlue" BorderBrush="CadetBlue"/>

                          <telerik:RadialRange Name="Red"

                                               Min="50" Max="100"

                                               StartWidth="0.02" EndWidth="0.1"

                                               Location="Inside"

                                               Background="CadetBlue"

                                               BorderBrush="CadetBlue"/>

                      </telerik:RangeList>

                  </telerik:RadialScale>

              </telerik:RadialGauge>

          </telerik:RadGauge>

      </Grid>

  </UserControl>

  All the best,
  Andrey Murzov
  the Telerik team

  Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Gauge > Need to show Labels in Ranges