The xamTimeline™ component allows you to format the DateTime values of the DateTimeSeries object according to what unit you are displaying. For example, if your values are ordered by minutes, you may want to display just the time or if they are ordered by year, you may want to display just the year. This is easily achieved by using the xamTimeline control’s properties that are designed to format values based on the UnitType. For a list of these properties, see About Formatting xamTimeline.
This example assumes that you know how to setup your project for Infragistics XamTimeline control. The following xaml code shows you how to style xamTimeline so that it displays a particular format for both the EventTitle and AxisLabel objects when the UnitType is set to Months.
<UserControl.Resources>
<!--Style for Axis Label-->
<Style x:Key="rscAxisLabelStyle" TargetType="ig:AxisLabel">
<Setter Property="MonthsUnitStringFormat" Value="{}{0:MMM}" />
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
<ig:XamTimeline x:Name="xamTimeline"
Width="1000" Height="580" Margin="15">
<!-- Set Axis object's Unit Type and Label Style -->
<ig:XamTimeline.Axis>
<ig:DateTimeAxis Minimum="01/01/2012" Maximum="04/01/2013"
LabelStyle="{StaticResource rscAxisLabelStyle}"
AutoRange=" UnitType="Months" Unit="1"/>
</ig:XamTimeline.Axis>
<ig:XamTimeline.Series>
<ig:DateTimeSeries Title="Date Time Series"
Position="TopOrLeft">
<!--TODO: Add Date Time Entries -->
<ig:DateTimeSeries.Entries>
<ig:DateTimeEntry Time="04/01/2012" Title="Date Time Entry 1"
Details="Details Time Entry 1"/>
<ig:DateTimeEntry Time="06/01/2012" Title="Date Time Entry 2"
Details="Details Time Entry 2"/>
<ig:DateTimeEntry Time="08/01/2012" Title="Date Time Entry 3"
Details="Details Time Entry 3"/>
<ig:DateTimeEntry Time="10/01/2012" Title="Date Time Entry 3"
Details="Details Time Entry 4"/>
<ig:DateTimeEntry Time="12/01/2012" Title="Date Time Entry 3"
Details="Details Time Entry 5"/>
</ig:DateTimeSeries.Entries>
</ig:DateTimeSeries>
</ig:XamTimeline.Series>
</ig:XamTimeline>
</Grid>
