Need to show Labels in Ranges

2 posts, 0 answers
  1. Muthukumar
    Muthukumar avatar
    15 posts
    Member since:
    Oct 2011

    Posted 14 Oct 2011 Link to this post

    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>

  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 18 Oct 2011 Link to this post

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

  3. DevCraft banner
Back to Top