Telerik blogs

RadControls for WPF, 2011.Q1

The attached project will be generated in this blog and will be used in future:

DOWNLOAD: RadScheduleView_StartUp.zip

This is probably the first post of a series that will guide you through RadScheduleView styling. We will try to use Blend as much as possible for the styling and designing part and VisualStudio 2010 for some of the code that we will need.

Setting the References

RadScheduleView requires the following references:

  • Telerik.Windows.Controls
  • Telerik.Windows.Data
  • Telerik.Windows.Controls.Input
  • Telerik.Windows.Controls.Navigation
  • Telerik.Windows.Controls.ScheduleView

Adding the RadScheduleView in the Design Surface

In the MainWindow select the “[grid]” element, find the RadScheduleView in the toolbox and double-click it:

Probably the view now does not look as you expected. You should be asked to set AppointmentsSource.

Setting the ViewModel DataContext

This part is thrilling. Blend provides a great support for property editing. We will create one little class that we will use as DataContext. Using MVVM you will probably have one. Add the following class to your project:

using Telerik.Windows.Controls;
using Telerik.Windows.Controls.ScheduleView;
  
namespace RadScheduleView_DataTemplates
{
       public class ViewModel
       {
              public ViewModel()
              {
                     this.Appointments = new ObservableAppointmentCollection();
                     ResourceType rooms = new ResourceType("Room");
                     rooms.Resources.Add(new Resource("Room 101"));
                     rooms.Resources.Add(new Resource("Room 203"));
                     rooms.Resources.Add(new Resource("Room 304"));
                     this.ResourceTypes = new ResourceTypeCollection();
                     this.ResourceTypes.Add(rooms);
                     this.GroupDescription = new GroupDescriptionCollection();
                     this.GroupDescription.Add(new DateGroupDescription());
                     this.GroupDescription.Add(new ResourceGroupDescription() { ResourceType = "Room" });
              }
              public ObservableAppointmentCollection Appointments { get; private set; }
              public ResourceTypeCollection ResourceTypes { get; private set; }
              public GroupDescriptionCollection GroupDescription { get; private set; }
       }
}

 

Do not forget to rebuild the project in blend (Ctrl + Shift + B).

Setting AppointmentsSource

Select the RadScheduleView in the Design Surface and go to “Properties” in the “Data Sources” property group. Click the small rectangle at the right end of “AppointmentsSource” property and select “Data Binding”:

Click the “+ CLR Object” in the dialog that will appear:

And create an instance of our ViewModel:

And select the AppointmentsSource as source for the binding for the RadScheduleView’s AppointmentsSource property:

Setting GroupDescriptionsSource

Go on. Bind the “GroupDescriptionsSource” property to the “GroupDescription” of the ViewModel:

Setting ResourceTypesSource

And the “ResourceTypesSource” to “ResourceTypes”:

There you go grouped:

So far you should have the following XAML:

<Window 
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:local="clr-namespace:RadScheduleView_DataTemplates"
              mc:Ignorable="d"
              x:Class="RadScheduleView_DataTemplates.MainWindow"
              Title="MainWindow" Height="350" Width="525">
  
       <Window.Resources
              <local:ViewModel x:Key="ViewModel" d:IsDataSource="True"/> 
       </Window.Resources
       <Grid DataContext="{Binding Source={StaticResource ViewModel}}"
              <telerik:RadScheduleView d:LayoutOverrides="Width, Height" AppointmentsSource="{Binding Appointments}" GroupDescriptionsSource="{Binding GroupDescription}" ResourceTypesSource="{Binding ResourceTypes}"
                     <telerik:RadScheduleView.ViewDefinitions
                           <telerik:DayViewDefinition/> 
                           <telerik:WeekViewDefinition/> 
                           <telerik:MonthViewDefinition/> 
                           <telerik:TimelineViewDefinition/> 
                     </telerik:RadScheduleView.ViewDefinitions
              </telerik:RadScheduleView
       </Grid
</Window>

 

A download should be available at the top of the page. This project will be use as base for the next RadScheduleView customization posts.

 


Comments

Comments are disabled in preview mode.