Styling the TimeRulerItems
The RadScheduleView control offers a wide range of customizable TimeRulerItems. The term TimeRulerItem in RadScheduleView encompasses the following elements: ticks and lines, date group item headers, day and expand buttons in month view.
This article discusses how to use the TimeRulerItemStyleSelector to customize the appearance of TimeRulerItems. We will dig further into the customization process and create a custom TimeRulerItemStyleSelector, as well. This article covers the following topics:
Generate and use the TimeRulerItemStyleSelector
Any change on the appearance of a TimeRulerItem depends on the TimeRulerItemStyleSelector and the containing styles. The selector is oriented, meaning it contains orientation dependant styles – horizontal and vertical. The TimeRulerItemStyleSelector contains the following styles:
- ExpandMonthViewButtonStyle:
- GoToDayButtonStyle:
- GoToDayTodayButtonStyle:
- GoToDayVerticalButtonStyle:
- MajorHorizontalTimeRulerItemStyle:
- MajorVerticalTimeRulerItemStyle:
- MinorHorizontalTimeRulerItemStyle:
- MinorVerticalTimeRulerItemStyle:
- TimeRulerGroupItemStyle:
- TimeRulerLineStyle:
- TimeRulerMonthViewGroupItemStyle:
- TimeRulerMonthViewItemStyle:
- TimeRulerMonthViewTodayItemStyle:
There are two ways to obtain the source code of RadScheduleView TimeRulerItemStyleSelector: from UI for WPF installation folder and from the generated template for RadScheduleView in Expression Blend.
Get TimeRulerItemStyleSelector source code from UI for WPF installation folder
Navigate to the installation folder of UI for WPF on your computer. Go into the Themes folder and select the theme that you have chosen to use as a customization base for RadScheduleView. Drill down to find the ScheduleView.xaml file in the directory that corresponds to your theme. From this resource dictionary extract the TimeRulerItemStyleSelector and the resources it uses, such as brushes and styles, into your own project.
Get TimeRulerItemStyleSelector from RadScheduleView control template
Generate the RadScheduleView template from Expression Blend by right clicking the control and selecting Edit Template > Edit a Copy. Search for the TimeRulerItemStyleSelector and copy the selector together with all needed resources, into your own project.
After choosing one of the two approaches the end result should include the following:
Note the use of the local namespace from the raw source:
The selector is applied to our instance of RadScheduleView:
Now that all TimeRulerItem styles are in place, we can apply any desired customizations and watch the TimeRulerItems change. Let’s modify the TimeRulerGroupItemStyle, for example – make the item bold and with a different font color:
The TimeRulerGroupItemStyle has been modified:
Create a custom TimeRulerItemStyleSelector
Let’s say we wish to customize the lines that correspond to the minor and major ticks in Timeline view:
Because both lines share one and the same TimeRulerLineStyle, in order to style them differently, we are going to need two separate styles. We need to create a custom TimeRulerItemStyleSelector that provides these additional styles.
To create a custom TimeRulerItemStyleSelector, inherit the OrientedTimeRulerItemStyleSelector and override the SelectStyle method. Also, prepare two properties of type Style that will hold the new styles:
If you need to take advantage of the activeViewDefinition in the body of the SelectStyle method, it is important to inherit the OrientedTimeRulerItemStyleSelector, which is located in Telerik.Windows.Controls namespace, rather than the regular StyleSelector class.
We use the Type property of the TickData class to determine whether the item is a major or a minor tick. Other properties of the TickData class include: DateData, DateTime, Duration and Offset.
We are going to use the default selector to create the XAML for the custom selector. Get the source code for the TimeRulerItemStyleSelector as described in the
Generate and use the TimeRulerItemStyleSelector section.
The next step is to prepare the actual styles for both types of TimeRulerLines. Since it is the TimeRulerLineStyle we wish to divide into two styles, the TimeRulerLineStyle is copied into the new styles. Any subsequent changes are made upon the new tick line styles: