New to Telerik UI for WinUI? Start a free 30-day trial

Implementing View-ViewModel

Updated on Mar 26, 2026

The purpose of this tutorial is to show you how to bind a RadScheduler with a ViewModel.

Before reading this tutorial you should get familiar with the Data Binding support of the RadScheduler control.

Add a new RadScheduler declaration in your XAML

Example 1

XAML

<telerik:RadScheduler />

Create a new class named MyViewModel.

Example 2

public class MyViewModel
{
}

In the MyViewModel class add two properties:
- Appointments: We will bind the AppointmentsSource property of the RadScheduler to this property.
- ResourcesTypes: We will bind the ResourceTypesSource property of the RadScheduler to this property.

Example 3

private BindableCollection<Appointment> appointments;
private BindableCollection<ResourceType> resourceTypes;
public BindableCollection<Appointment> Appointments
{
	get
	{
		return this.appointments;
	}
	set
	{
		this.appointments = value;
	}
}
public BindableCollection<ResourceType> ResourcesTypes
{
	get
	{
		return this.resourceTypes;
	}
	set
	{
		this.resourceTypes= value;
	}
}

Let's create a method in the ViewModel that generates some Resources:

Example 4

private BindableCollection<ResourceType> GenerateResourceTypes()
{
	BindableCollection<ResourceType> result = new BindableCollection<ResourceType>();

	ResourceType roomType = new ResourceType("Room");
	Resource room102 = new Resource("Room 102");
	Resource room203 = new Resource("Room 203");
	Resource room406 = new Resource("Room 406");
	roomType.Resources.Add(room102);
	roomType.Resources.Add(room203);
	roomType.Resources.Add(room406);

	ResourceType speakerType = new ResourceType("Speaker");
	Resource tomSpeaker = new Resource("Tom");
	Resource peterSpeaker = new Resource("Peter");
	speakerType.Resources.Add(tomSpeaker);
	speakerType.Resources.Add(peterSpeaker);

	result.Add(roomType);
	result.Add(speakerType);
	return result;
}

All we have to do is to initialize the resourceTypes and appointments fields:

Example 5

public MyViewModel()
{
	this.resourceTypes = this.GenerateResourceTypes();
	this.appointments = new BindableCollection<Appointment>();
}

The ViewModel is complete. Now, let's return to the View. Add some ViewDefinitions, GroupDescriptionsSource and bind the AppointmentsSource and ResourceTypes

Example 6

XAML

<telerik:RadScheduler AppointmentsSource="{Binding Appointments}" 
						 ResourceTypesSource="{Binding ResourcesTypes}" >
	<telerik:RadScheduler.ViewDefinitions>
		<telerik:DayViewDefinition />
		<telerik:WeekViewDefinition />
		<telerik:TimelineViewDefinition />
	</telerik:RadScheduler.ViewDefinitions>
	<telerik:RadScheduler.GroupDescriptionsSource>
		<telerik:GroupDescriptionCollection>
			<telerik:DateGroupDescription />
			<telerik:ResourceGroupDescription ResourceType="Speaker" />
			<telerik:ResourceGroupDescription ResourceType="Room" />
		</telerik:GroupDescriptionCollection>
	</telerik:RadScheduler.GroupDescriptionsSource>
</telerik:RadScheduler>

Finally, set the DataContext:

Example 7

this.DataContext = new MyViewModel();