Styling Major and Minor Grid Lines

The xamTimeline™ control’s major and minor gridlines are vertical lines that mark the spacing between values on the timeline. To customize the look of the gridlines, you must set a style for them.

The following xaml code shows how to change the color, size, and intervals of the major and minor grid lines using styles in XamTimeline control.

In XAML:

    <UserControl.Resources>
        <!-- Styles for Axis -->
        <Style x:Key="rscMajorGridLineStyle" TargetType="ig:Mark">
            <Setter Property="Width" Value="10"/>
            <Setter Property="Fill" Value="Gray"/>
            <Setter Property="Stroke" Value="Gray"/>
            <Setter Property="StrokeThickness" Value="1"/>
            <Setter Property="Unit" Value="500"/>
        </Style>
        <Style x:Key="rscMinorGridLineStyle" TargetType="ig:Mark">
            <Setter Property="Width" Value="10"/>
            <Setter Property="Fill" Value="Silver"/>
            <Setter Property="Stroke" Value="Silver"/>
            <Setter Property="StrokeThickness" Value="1"/>
            <Setter Property="Unit" Value="100"/>
        </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="-3000" Maximum="2300"
                                      AutoRange=" Unit="500"
                                      ShowLabels="True"
                                      ShowMajorGridLines="True"
                                      ShowMinorGridLines="True"
                                      MajorGridLineStyle="{StaticResource rscMajorGridLineStyle}"
                                      MinorGridLineStyle="{StaticResource rscMinorGridLineStyle}"
                                      />
            </ig:XamTimeline.Axis>
            <!-- TODO: Add Numeric/Date Series ... -->
        </ig:XamTimeline>
    </Grid>

WPF | Help Topics

Styling Major and Minor Grid Lines

Related Topics