Set dates as labels for gauge control

2 posts, 0 answers
  1. Marko
    Marko avatar
    3 posts
    Member since:
    Jul 2008

    Posted 14 Apr 2011 Link to this post

    Hi,

    Is it possible to setup dates as minimum and maximum values for gauge control (with dates between as major ticks)?

    Best regards,
    Marko
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 18 Apr 2011 Link to this post

    Hello Marko,

    You can use custom tick marks to show date as label of tick.
    The sample code is below.
    <UserControl x:Class="CustomTicks.MainPage"
        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="Length" Value="0.075" />
                <Setter Property="TickWidth" Value="0.2" />
                <Setter Property="FontSize" Value="14" />
                <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 Width="200" Height="300">
                <telerik:LinearGauge>
                    <telerik:LinearScale MajorTicks="4">
                        <telerik:LinearScale.Label>
                            <telerik:LabelProperties Foreground="Transparent" />
                        </telerik:LinearScale.Label>
                        <telerik:TickList>
                            <telerik:CustomTickMark Value="0"
                                                    Format="4-15-11"
                                                    Style="{StaticResource TickMarkStyle}">
                            </telerik:CustomTickMark>
                            <telerik:CustomTickMark Value="50"
                                                    Format="4-17-11"
                                                    Style="{StaticResource TickMarkStyle}">
                            </telerik:CustomTickMark>
                            <telerik:CustomTickMark Value="100"
                                                    Format="4-19-11"
                                                    Style="{StaticResource TickMarkStyle}">
                            </telerik:CustomTickMark>
                        </telerik:TickList>
                    </telerik:LinearScale>
                </telerik:LinearGauge>
            </telerik:RadGauge>
      
        </Grid>
    </UserControl>

    All the best,
    Andrey Murzov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
Back to Top