How to: Customize Time Scales in the Timeline View (legacy)

• Aug 03, 2020
• 2 minutes to read

Note

You are viewing documentation for the legacy WPF Scheduler control. If you’re starting a new project, we strongly recommend that you use a new control declared in the DevExpress.Xpf.Scheduling namespace. If you decide to upgrade an existing project in order to switch to the updated scheduler control, see the Migration Guidelines document.

This example illustrates how to access the time scale collection of the Timeline View (via the TimelineView.Scales property) and add TimeScale elements to make them available to end-users (for example, TimeScaleMonth, TimeScaleWeek and TimeScaleDay). This approach can be helpful if you wish to hide specific time intervals in the Timeline View.

To change the format of a single scale header, adjust the TimeScale.DisplayFormat property of the corresponding TimeScale object.

You can also implement your own custom time scales and add them to the TimelineView.Scales collection. This example demonstrates the comparatively simple task of creating a scale with a fixed interval (four hours) by inheriting from the TimeScaleFixedInterval class. For more complex tasks, use the TimeScale descendants and override key methods.

View Example

MainWindow.xaml

<dxsch:SchedulerControl.TimelineView>
    <dxsch:TimelineView IntervalCount="12" 
                    TimelineScrollBarVisible="False">
        <dxsch:TimelineView.Scales>
            <dxschcore:TimeScaleCollection>
                <dxschcore:TimeScaleMonth />
                <dxschcore:TimeScaleWeek />
                <dxschcore:TimeScaleDay DisplayFormat="ddd dd" />
                <local:CustomTimeScale />
            </dxschcore:TimeScaleCollection>
        </dxsch:TimelineView.Scales>
        <dxsch:TimelineView.AppointmentDisplayOptions>
            <dxsch:SchedulerTimelineViewAppointmentDisplayOptions ShowRecurrence="False"
                    ShowReminder="False" 
                    StartTimeVisibility="Auto"  
                    EndTimeVisibility="Auto" />
        </dxsch:TimelineView.AppointmentDisplayOptions>
    </dxsch:TimelineView>
</dxsch:SchedulerControl.TimelineView>

MainWindow.xaml.vb

Public Class CustomTimeScale
    Inherits TimeScaleFixedInterval

    ' Fields
    Private Const defaultEnabled As Boolean = True
    ' Methods
    Public Sub New()
        MyBase.New(TimeSpan.FromHours(4.0))
    End Sub
    Protected Overrides ReadOnly Property DefaultDisplayName() As String
        Get
            Return "Custom Scale"
        End Get
    End Property
    Protected Overrides ReadOnly Property DefaultMenuCaption() As String
        Get
            Return "Custom Scale"
        End Get
    End Property
End Class

MainWindow.xaml.cs

public class CustomTimeScale : TimeScaleFixedInterval {
    // Fields
    private const bool defaultEnabled = true;
    // Methods
    public CustomTimeScale() : base(TimeSpan.FromHours(4.0)) { }
    protected override string DefaultDisplayName { get { return "Custom Scale"; } }
    protected override string DefaultMenuCaption { get { return "Custom Scale"; } }
}

As a result, the following time scales will be available for end-users in the Timeline View.