Version

Styling Axis Thumb

The Thumb is the slider part of the Axis and displays detailed information for an event that it is placed on. Customizing the Thumb requires setting a style through the Axis.

The following xaml code shows how to change the color and size of the Thumb.

In XAML:

    <UserControl.Resources>
        <!-- Styles for Axis -->
        <Style x:Key="rscAxisThumbStyle" TargetType="ig:AxisThumb">
            <Setter Property="Width" Value="12" />
            <Setter Property="Height" Value="22" />
            <Setter Property="Canvas.ZIndex" Value="1" />
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ig:AxisThumb">
                        <Border Background="Red" BorderBrush="Black"
                                BorderThickness="1" CornerRadius="5" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White" >
        <ig:XamTimeline x:Name="xamTimeline"
                             Width="1000" Height="480" Margin="25">
            <!-- Set Axis properties -->
            <ig:XamTimeline.Axis>
                <ig:NumericTimeAxis Minimum="-3200" Maximum="2600"
                                      AutoRange=" Unit="400"
                                      ShowLabels="True" ShowThumb="True"
                                      ThumbStyle="{StaticResource rscAxisThumbStyle}"/>
            </ig:XamTimeline.Axis>
            <!-- TODO: Add Numeric/Date Series ... -->
        </ig:XamTimeline>
    </Grid>
XamTimeline Style Axis Thumb 01.png