Telerik blogs

RadControls for WPF, 2011.Q1

We will start with the project from the previous post:

DOWNLOAD: RadScheduleView_GroupHeaderTemplates.zip

And will produce the following project that has its timeruler items modified:

DOWNLOAD: RadScheduleView_TimeRulerItemTemplates.zip

Using the GroupHeaderContentTemplateSelector you can bind to the resource data. In the time ruler this is not the case. The time ruler items present date information and at this time they can’t be modified through items source property. We will create an inline template selector and discuss some of the TimeRulerItem DataTemplates.

Converting the TimeRulerItemTemplateSelector to Local Value

Select the RadScheduleView, go to the “Styling” section in the “Properties” tab and click the rectangle near the “TimeRulerItemTemplateSelector” property. Then select conver “Convert to Local Value” and expand the selector properties from the drop down arrow:

The default implementation of the selector will be inlined in our RadScheduleView. Note that later you can click the rectangle again and convert the value to resource. All templates will be presented:

The DataTemplates set may be a subject of change in future but the logic will remain the same. You can write your own selector the way we did for GroupHeaderContentTemplateSelector but you will not be able to bind to additional properties as RadScheduleView generates the items source for tick itself. Custom selector may be of use if you are about to create your own view definition which is a matter of more advanced topic. We will pretty much stick to what we have available here.

Day TimeRulerItem DataTemplates

HorizontalDayMajorItemTemplate, HorizontalDayMinorItemTemplate as well as their VerticalDayMajorItemTemplate, VerticalDayMinorItemTemplate control the ticks in Day view. Let’s modify one.

Click the rectangle next to “VerticalDayMinorItemTemplate”:

Name it “VerticalDayMajorItemTemplate”:

When the DataTemplate is converted to resource you can click the rectangle near “VerticalDayMinorItemTemplate” which at this point should be green and edit the resource:

You will see the DataTemplate in the design surface. It will be a TextBlock with its Text property bound to “FormattedValue”. Note that the GroupHeader templates used to bind to FormattedName. I will just bold the TextBlock, go back to the ScheduleView by double clicking the design surface outside the TextBlock and rebuild with Ctrl+Shift+F5:

Week TimeRulerItem DataTemplates

The Day and Week view look alike and differ only by the number of visible days. Each day is represented as date group and day groups are each day is displayed in GroupHeader. Timeline view however does not group by days but rather show all week in a line. The separation of time there is displayed in the time ruler with TimeRulerItems including the Major and Minor ticks already mentioned and TimeRulerGroup items.

Go to the “Views” section in the “Properties” tab and set the “ActiveViewDefinitionIndex” to 3 to move the ScheduleView to Timeline view:

Convert the “HorizontalTimelineGroupTemplate” to “New Resurce” and name it “HorizontalTimelineGroupTemplate”:

Click the “HorizontalTimelineGroupTemplate” square again and select “Edit Resource” like we did with the “VerticalDayMinorItemTemplate”. You will see a TextBlock in the DataTemplate again. Make it Red, Bold, Italic. Go back to the MainWIndow.xaml and rebuild the project:

The Major and Minor ticks are displayed directly below the groups we have just edited displaying hour and minutes.

Month TimeRulerItem DataTemplate

The MonthView uses TimeRulerItem and TimeRulerGroup controls like Timeline view does but in slightly different way. The TimeRulerGroup items are the day-of-week texts displayed in the top of the month view grid while a TimeRulerItem is displayed in each “cell” of the Month view.

You can edit them the same way. Convert to resource, Edit resource:

Make the MonthGroupTemplate blue, bold and underlined and the MonthItemTemplate red and bold. Go to MainPage.xaml and rebuild:

This is pretty much how far you can go with the TimerulerItem DataTemplates.

Where are my Minor Ticks?

The DataTemplates present the information in ticks. Using them you can edit the TimeRulerItem presentation but while the GroupHeader Templates are powerful and can present a lot of information that comes from the groups you are grouping by the time ruler templates you are pretty much limited. The lines are modified using the TimeRulerItemStyleSelector and the format of the ticks is changed through “<type>StringFormat” properties on the ViewDefinitions. By default the minor ticks are formatted in a way they are not visible. We will discuss how you can change these formats in future posts.

 

 


Related Posts

Comments

Comments are disabled in preview mode.