[Solved] Set dates as labels for gauge control

[Marko]

Hi,

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

Best regards,
Marko

[Andrey]

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