Programming Telerik ScheduleView for WPF/Silverlight (part 1)

With this blog post I want to cover the very basics of our brand new RadScheduleView control. It is currently available only for WPF, but soon we will provide a Silverlight version. Please, check my FAQ about RadScheduleView blog post for more information:

http://blogs.telerik.com/valerihristov/posts/10-10-25/telerik_scheduleview_for_silverlight_wpf_questions_and_answers.aspx

 

To add RadScheduleView to a new or existing application you need to first add references to the following assemblies

Telerik.Windows.Controls

Telerik.Windows.Data

Telerik.Windows.Controls.Input

Telerik.Windows.Controls.Navigation

Telerik.Windows.Controls.ScheduleView

 

If you like to drag controls from the Visual Studio Toolbox, add RadScheduleView to the Toolbox following the instructions below (in the official release it will be automatically added when you install RadControls):

http://www.telerik.com/help/wpf/installation-adding-to-vs-2008-toolbox-wpf.html

 

I am a fan of the manual XAML editing, so I added the telerik XML namespace:

<Window x:Class="FirstApplication.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"> </Window>

 

Then I added the RadScheduleView tag:

<telerik:RadScheduleView> <telerik:RadScheduleView.ViewDefinitions> <telerik:DayViewDefinition /> <telerik:WeekViewDefinition /> <telerik:MonthViewDefinition /> <telerik:TimelineViewDefinition /> </telerik:RadScheduleView.ViewDefinitions> </telerik:RadScheduleView>

 

This XAML is automatically generated when you drag RadScheduleView from the Toolbox (this feature might not be available in the Beta, though).

Note the ViewDefinitions collection – this is the first major difference from RadScheduler – you always need to specify the available view definitions. If you omit to populate the ViewDefinitions collection, the control will display the following warning message:

 

Now we need to set an AppointmentsSource. This is the second big difference from RadScheduler – you always need to specify an AppointmentsSource, e.g. there is no unbound mode. Depending on your feedback we might add this feature in the future. If the appointments source is not set, RadScheduleView will display the following warning message:

 

I created a simple ViewModel, containing a single property named Appointments, that is of type ObservableCollection<Appointment>. I populate it with a simple Linq query:

this.Appointments.AddRange(Enumerable
    .Range(8, 18)
    .Select<int, Appointment>(i =>
        new Appointment 
        { 
            Start = DateTime.Today.AddHours(i), 
            End = DateTime.Today.AddHours(i + 1), 
            Subject = string.Format("Appointment {0}", i),
            Resources = { new Resource("Room 1", "Location") }
        }));

 

The updated XAML is:

<telerik:RadScheduleView AppointmentsSource="{Binding Appointments}"> ...

</telerik:RadScheduleView>

 

Let’s get back to the ViewDefinitions. Since the view definition buttons are directly bound to the ViewDefinitions collection, you are now able to specify the titles, the order, the count and the type of the available buttons. You can even display several view definitions of the same type with different settings!

 

Custom view definitions can be created in order to provide functionality that is not available in the standard view definitions out of the box. I will show how to create a custom view definition in another blog post.

 

Let’s add some resource types. This is another difference from RadScheduler – you need to set ResourceTypesSource, instead of populating ResourceTypes collection (actually there is no ResourceTypes collection anymore). Here are some static resource types, declared in XAML:

<telerik:RadScheduleView>
    ...
    <telerik:RadScheduleView.ResourceTypesSource> <telerik:ResourceTypeCollection> <telerik:ResourceType Name="Location"> <telerik:Resource ResourceName="Room 1" /> <telerik:Resource ResourceName="Room 2" /> <telerik:Resource ResourceName="Room 3" /> </telerik:ResourceType> </telerik:ResourceTypeCollection>     </telerik:RadScheduleView.ResourceTypesSource> </telerik:RadScheduleView>

 

Now I want to group my appointments by Location. In RadScheduler there is a string property named GroupBy, that specifies the single resource which can be used to group by the appointments. In RadScheduleView we have GroupDescriptionsSource property:

<telerik:RadScheduleView>
    ...
    <telerik:RadScheduleView.GroupDescriptionsSource> <telerik:GroupDescriptionCollection> <telerik:ResourceGroupDescription ResourceType="Location" /> </telerik:GroupDescriptionCollection> </telerik:RadScheduleView.GroupDescriptionsSource> </telerik:RadScheduleView>

 

The code above will group RadScheduleView by resource type named Location. Day view and Week view are always grouped by date, so the new group description will be inserted before the standard DateGroupDescription:

 

If you want to change the group order you could use the following syntax:

<telerik:RadScheduleView>
    ...
    <telerik:RadScheduleView.GroupDescriptionsSource> <telerik:GroupDescriptionCollection> <telerik:DateGroupDescription />
            <telerik:ResourceGroupDescription ResourceType="Location" /> </telerik:GroupDescriptionCollection> </telerik:RadScheduleView.GroupDescriptionsSource> </telerik:RadScheduleView>

 

the result will be the following (note the changed group order)

 

Now I will customize the time ruler of RadScheduleView to show ticks at 15 minutes. For example the DayViewDefinition should look like this:

<telerik:RadScheduleView>
    ...
    <telerik:RadScheduleView.ViewDefinitions> <telerik:DayViewDefinition MinorTickLength="15min" MajorTickLength="1h" />
        ...
    </telerik:RadScheduleView.ViewDefinitions> </telerik:RadScheduleView>

 

Or, you can leave the MinorTickLength and MajorTickLength properties to their default values (Auto). This will let the control automatically choose the best tick length for the current zoom level.

 

In the end I want to explain how the MinTimeRulerExtent and the MaxTimeRulerExtent properties of RadScheduleView work. Basically they define the minimum and the maximum length of the time ruler in pixels, which is actually the zoom level. If RadScheduleView is measured with size less than MinTimeRulerExtent a scroll bar is displayed. If the control is measured with size between Min and MaxTimeRulerExtent, the time ruler will automatically stretch to that size. If the control has more space than MaxTimeRulerExtent it will show empty area when the time ruler ends. The default value of both properties is 1400.0.

 

To see more configuration options you can play with our online examples that are available here:

http://demos.telerik.com/wpf/

 

Valeri Hristov