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 Silverlight installation folder and from the generated template for RadScheduleView in Expression Blend.
Get TimeRulerItemStyleSelector source code from UI for Silverlight installation folder
Navigate to the installation folder of UI for Silverlight 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:
<!-- Brushes -->
...
<!-- Styles-->
<Style x:Key="GoToDayButtonStyle" TargetType="telerik:RadButton">
...
</Style>
<Style x:Key="GoToDayVerticalButtonStyle" TargetType="telerik:RadButton">
...
</Style>
<Style x:Key="GoToDayTodayButtonStyle" TargetType="telerik:RadButton">
...
</Style>
<Style x:Key="GoToDayTodayVerticalButtonStyle" TargetType="telerik:RadButton">
...
</Style>
<Style x:Key="ExpandMonthViewButtonStyle" TargetType="telerik:RadToggleButton">
...
</Style>
<Style x:Key="TimeRulerGroupItemStyle" TargetType="local:TimeRulerGroupItem">
...
</Style>
<Style x:Key="TimeRulerGroupItemStyle_Vertical" TargetType="local:TimeRulerGroupItem" BasedOn="{StaticResource TimeRulerGroupItemStyle}">
...
</Style>
<Style x:Key="MajorHorizontalTimeRulerItemStyle" TargetType="local:TimeRulerItem">
...
</Style>
<Style x:Key="MinorHorizontalTimeRulerItemStyle" TargetType="local:TimeRulerItem">
...
</Style>
<Style x:Key="MajorVerticalTimeRulerItemStyle" TargetType="local:TimeRulerItem">
...
</Style>
<Style x:Key="MinorVerticalTimeRulerItemStyle" TargetType="local:TimeRulerItem">
...
</Style>
<Style x:Key="TimeRulerLineStyle" TargetType="local:TimeRulerLine">
...
</Style>
<Style x:Key="TimeRulerMonthViewGroupItemStyle" TargetType="local:TimeRulerMonthViewGroupItem">
...
</Style>
<Style x:Key="TimeRulerMonthViewItemStyle" TargetType="local:TimeRulerMonthViewItem">
...
</Style>
<Style x:Key="TimeRulerMonthViewTodayItemStyle" TargetType="local:TimeRulerMonthViewItem">
...
</Style>
<!-- TimeRulerItemStyleSelector-->
<local:OrientedTimeRulerItemStyleSelector x:Key="TimeRulerItemStyleSelector"
MonthViewGroupStyle="{StaticResource TimeRulerMonthViewGroupItemStyle}"
MonthViewTickStyle="{StaticResource TimeRulerMonthViewItemStyle}"
MonthViewTodayTickStyle="{StaticResource TimeRulerMonthViewTodayItemStyle}"
HorizontalGroupItemStyle="{StaticResource TimeRulerGroupItemStyle}"
VerticalGroupItemStyle="{StaticResource TimeRulerGroupItemStyle_Vertical}"
MajorHorizontalTickStyle="{StaticResource MajorHorizontalTimeRulerItemStyle}"
MajorVerticalTickStyle="{StaticResource MajorVerticalTimeRulerItemStyle}"
MinorHorizontalTickStyle="{StaticResource MinorHorizontalTimeRulerItemStyle}"
MinorVerticalTickStyle="{StaticResource MinorVerticalTimeRulerItemStyle}"
HorizontalLineStyle="{StaticResource TimeRulerLineStyle}"
VerticalLineStyle="{StaticResource TimeRulerLineStyle}">
</local:OrientedTimeRulerItemStyleSelector>
Note the use of the local namespace from the raw source:
xmlns:local="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.ScheduleView"
The selector is applied to our instance of RadScheduleView:
<telerik:RadScheduleView TimeRulerItemStyleSelector="{StaticResource TimeRulerItemStyleSelector}" AppointmentsSource="{Binding Appointments}" />
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:
<Style x:Key="TimeRulerGroupItemStyle" TargetType="telerik:TimeRulerGroupItem">
<Setter Property="Foreground" Value="Chocolate" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Background" Value="{StaticResource GroupHeaderHeaderBackground}" />
<Setter Property="BorderBrush" Value="{StaticResource GroupHeaderHeaderOuterBorder}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Margin" Value="0 0 -1 -1" />
<Setter Property="Padding" Value="4 2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:TimeRulerGroupItem">
<telerik:RadButton Style="{StaticResource GoToDayButtonStyle}" Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Command="telerik:RadScheduleViewCommands.SetDayViewMode"
Foreground="{TemplateBinding Foreground}"
CommandParameter="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content.DateTime.Date}">
<ContentPresenter x:Name="Content" />
</telerik:RadButton>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
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:
public class CustomTimeRulerItemStyleSelector : OrientedTimeRulerItemStyleSelector
{
public Style MinorTickLineStyle { get; set;}
public Style MajorTickLineStyle { get; set; }
public override Style SelectStyle(object item, DependencyObject container, ViewDefinitionBase activeViewDeifinition)
{
if (container is TimeRulerLine)
{
TickData tick = item as TickData;
if (tick.Type == TickType.Major)
{
return MajorTickLineStyle;
}
return MinorTickLineStyle;
}
return base.SelectStyle(item, container, activeViewDeifinition);
}
}
Public Class CustomTimeRulerItemStyleSelector
Inherits OrientedTimeRulerItemStyleSelector
Public Property MinorTickLineStyle() As Style
Get
Return m_MinorTickLineStyle
End Get
Set
m_MinorTickLineStyle = Value
End Set
End Property
Private m_MinorTickLineStyle As Style
Public Property MajorTickLineStyle() As Style
Get
Return m_MajorTickLineStyle
End Get
Set
m_MajorTickLineStyle = Value
End Set
End Property
Private m_MajorTickLineStyle As Style
Public Overrides Function SelectStyle(item As Object, container As DependencyObject, activeViewDeifinition As ViewDefinitionBase) As Style
If TypeOf container Is TimeRulerLine Then
Dim tick As TickData = TryCast(item, TickData)
If tick.Type = TickType.Major Then
Return MajorTickLineStyle
End If
Return MinorTickLineStyle
End If
Return MyBase.SelectStyle(item, container, activeViewDeifinition)
End Function
End Class
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:
<local:CustomTimeRulerItemStyleSelector.MajorTickLineStyle>
<Style TargetType="scheduleView:TimeRulerLine">
<Setter Property="BorderBrush" Value="LightCoral" />
<Setter Property="Background" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="scheduleView:TimeRulerLine">
<Border x:Name="LineVisual" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" BorderThickness="0 1 0 0">
<VisualStateManager.VisualStateGroups>
...
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</local:CustomTimeRulerItemStyleSelector.MajorTickLineStyle>
<local:CustomTimeRulerItemStyleSelector.MinorTickLineStyle>
<Style TargetType="scheduleView:TimeRulerLine">
<Setter Property="BorderBrush" Value="Khaki" />
<Setter Property="BorderThickness" Value="2" />
<Setter Property="Background" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="scheduleView:TimeRulerLine">
<Border x:Name="LineVisual" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" BorderThickness="0 1 0 0">
<VisualStateManager.VisualStateGroups>
...
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</local:CustomTimeRulerItemStyleSelector.MinorTickLineStyle>
