This walkthrough provides step-by-step instructions to bind UXScheduleView to WCF RIA Services and displaying a collection of data using MVVM pattern.

In this walkthrough, you will perform the following tasks:

• Create ClientUI MVVM Schedule Application (WCF RIA SP1) project using Intersoft ClientUI MVVM Schedule Application (WCF RIA SP1) project template.
• Create the Model Repository class that represents the Categories, Events and Resources data repository.
• Create the ViewModel class that describes the View.
• Bind the properties of UI controls in the View, such as the EventsSource property of the UXScheduleView, to the ViewModel.

Prerequisites

You need the following components to complete this walkthrough:

• Visual Studio 2010 SP1
• WCF RIA SP1
• Silverlight 4 Tools for Visual Studio 2010
• Intersoft ClientUI 5 or later

Creating a new ClientUI MVVM Schedule Application (WCF RIA SP1) Project

The first step is to create a new ClientUI MVVM Schedule Application (WCF RIA SP1) project using Intersoft ClientUI MVVM Schedule Application (WCF RIA SP1) project template in Visual Studio.

To create the ClientUI MVVM Schedule Application (WCF RIA SP1) project

1. Start Visual Studio 2010.
2. Create a new ClientUI MVVM Schedule Application (WCF RIA SP1) project using Intersoft ClientUI MVVM Schedule Application (WCF RIA SP1) project template. To learn more, see Walkthrough: Create New Intersoft ClientUI MVVM Schedule Application (WCF RIA SP1) Template.

Creating Model Repository Class

This section shows how to create the SoftwareDevEventsRepository class, SoftwareDevCategoriesRepository class and SoftwareDevResourcesRepository class that represents the required data repositories used in this walkthrough.

To Create the SoftwareDevEventsRepository Class

1. Create a new data repository for SoftwareDevEvents using Intersoft MVVM Data Repository (WCF RIA) item template under the ModelServices folder. You can name it SoftwareDevEventsRepository.cs
2. Replace the default base class in the DataRepository and remove the Validate method. If you would like to create a repository that supports editing, choose the EditableDataRepository as the base class instead of the DataRepository.
3. Replace all the <T> placeholders with the target entity type such as SoftwareDevEvent.
4. Replace the type of the EntityContext property to the default domain context type such as ScheduleViewSampleDataDomainContext.

To Create the SoftwareDevCategoriesRepository and SoftwareDevResourcesRepository Class

1. Repeat the steps when creating the SoftwareDevEventsRepository class.
2. Replace all the <T> placeholders with the target entity type such as SoftwareDevCategory and SoftwareDevResource.

Creating The View

This section steps you through the process of adding a new calendar page to display a collection of software dev data.

1. Add new UXPage in View folder and name it CalendarDev.xaml.
2. Add UXScheduleView directly under layout root.
   

   C#

   Copy Code

   <Grid x:Name="LayoutRoot"> <Intersoft:UXScheduleView x:Name="SampleControl1" DisplayDate="1/2/2012" NavigationPanePlaceHolderId="CalendarDevContainer" NavigationPaneBackground="{x:Null}" CalendarHeaderBackground="{x:Null}"> <Intersoft:UXScheduleDayView /> <Intersoft:UXScheduleWorkWeekView /> <Intersoft:UXScheduleWeekView IsActive="True"/> <Intersoft:UXScheduleMonthView /> </Intersoft:UXScheduleView> </Grid>

   
   

Creating the ViewModel

This section steps you through the process of creating a ViewModel class that contains the properties to describe the View that you created in the previous section. The ViewModel will inherit the ScheduleViewModelBase class which already contains a set of common properties that will be used in UXScheduleView such as Events. You can also choose to inherit from EditableScheduleViewModelGenericBase to create a ViewModel that supports data editing features such as add, edit and delete.

To create the SoftwareDevCalendarViewModel

1. Add a new class to the ViewModels folder in your Silverlight project and name it SoftwareDevCalendarViewModel.
2. Open SoftwareDevCalendarViewModel.cs and inherit the class from ScheduleViewModelBase class, then replace the placeholders with the target entity type, i.e., <SoftwareDevEvent>. The ScheduleViewModelBase class contains common members that can be bound to the UXScheduleView control.
   

   C#	Copy Code
   public class SoftwareDevCalendarViewModel : ScheduleViewModelBase<SoftwareDevEvent>

3. Override the CategoriesDataSource, EventsDataSource and ResourcesDataSource properties from the base class.
   

   C#	Copy Code
   protected override IDataRepository CategoriesDataSource { get { return SoftwareDevCategoriesRepository.Instance; } } protected override IDataRepository EventsDataSource { get { return SoftwareDevEventsRepository.Instance; } } protected override IDataRepository ResourcesDataSource { get { return SoftwareDevResourcesRepository.Instance; } }

Binding the View to the ViewModel

In the previous sections, you have learned how to create the Model and ViewModel classes, as well as the View that contains the user interface and controls used in this walkthrough. This section shows how to instantiate the ViewModel in the XAML page and bind the UI elements to the properties in the ViewModel such as the data context and UXScheduleView EventsSource property.

To bind the CalendarDev page to the CalendarDevViewModel class

1. Declare the namespace that maps to the CalendarDevViewModel class in the Customers page.
   

   XAML	Copy Code
   <Intersoft:UXPage... xmlns:ViewModels="clr-namespace:ClientUI_Schedule_Application.ViewModels" </Intersoft:UXPage>

2. Instantiate a new instance of the CalendarDevViewModel class in the UXPage resources and name it CalendarDevViewModel.
   

   XAML	Copy Code
   <Intersoft:UXPage.Resources> <ViewModels:CalendarDevViewModel x:Key="CalendarDevViewModel" /> ... </Intersoft:UXPage.Resources> <Grid x:Name="LayoutRoot" DataContext="{StaticResource CalendarDevViewModel}"> </Grid>

3. In UXScheduleView control bind the EventsSource, CategoriesSource and ResourcesSource properties with properties in the SoftwareDevViewModel.
   

   XAML

   Copy Code

   <Intersoft:UXScheduleView x:Name="SampleControl1" DisplayDate="1/2/2012" NavigationPanePlaceHolderId="CalendarDevContainer" NavigationPaneBackground="{x:Null}" CalendarHeaderBackground="{x:Null}" IsBusy="{Binding IsBusy,Mode=TwoWay}" EventsSource="{Binding Events}" CategoriesSource="{Binding Categories}" ResourcesSource="{Binding Resources}"> <Intersoft:UXScheduleDayView /> <Intersoft:UXScheduleWorkWeekView /> <Intersoft:UXScheduleWeekView IsActive="True"/> <Intersoft:UXScheduleMonthView /> </Intersoft:UXScheduleView>

Adding the CalendarDev page to the navigation pane.

1. Open the MainPage.xaml.
2. Add new navigation pane item below the existing calendar item and specify the NavigateUri to CalendarDev.
   

   XAML

   Copy Code

   <Intersoft:UXNavigationPaneItem Header="Calendar" NavigateUri="/Calendar/All" NavigationState="/Calendar" Icon="Assets/Images/Calendar.png"> <Grid x:Name="ExternalContainer"/> </Intersoft:UXNavigationPaneItem> <Intersoft:UXNavigationPaneItem Header="CalendarDev" NavigateUri="/CalendarDev" NavigationState="/CalendarDev" Icon="Assets/Images/Calendar.png"> <Grid x:Name="CalendarDevContainer"/> </Intersoft:UXNavigationPaneItem>

3. Save and run the project.

Conclusion

In this walkthrough, you have learned how to create ClientUI MVVM Schedule Application (WCF RIA SP1) using project template, and create the classes and page based on the Model, View and ViewModel pattern. You also learned how to bind UXScheduleView to a collection of data.

Complete Code Listing

This section lists the complete code used in this walkthrough.

SoftwareDevCategoriesRepository.cs

using System.ServiceModel.DomainServices.Client;
using ClientUI_Schedule_Application.Web;

namespace ClientUI_Schedule_Application.ModelServices
{
    public class SoftwareDevCategoriesRepository : DataRepository<SoftwareDevCategory>
    {
        private static IDataRepository _repository;

        /// <summary>
        /// Initializes a new instance of <see cref="PublicationCategoriesRepository"/> class.
        /// </summary>
        /// <param name="context">A <see cref="DomainContext"/> instance, providing access to all functionality of the data service.</param>
        public SoftwareDevCategoriesRepository(DomainContext context)
            : base(context)
        {
        }

        private static bool IsReusable
        {
            get { return true; }
        }

        private ScheduleViewSampleDataDomainContext EntityContext
        {
            get
            {
                return ((ScheduleViewSampleDataDomainContext)this.Context);
            }
        }

        /// <summary>
        /// Returns an instance of <see cref="PublicationCategoriesRepository"/>. 
        /// If the <see cref="IsReusable"/> is true, the property will return an existing cached copy of the instance.
        /// </summary>
        public static IDataRepository Instance
        {
            get
            {
                if (_repository == null || !IsReusable)
                    _repository = new SoftwareDevCategoriesRepository(RepositoryManager.Create());

                return _repository;
            }
        }

        /// <summary>
        /// Gets the <see cref="EntitySet"/> that provides access to a collection of entities as the results of the entity query.
        /// </summary>
        public override EntitySet<SoftwareDevCategory> EntitySet
        {
            get
            {
                return this.EntityContext.SoftwareDevCategories;
            }
        }

        /// <summary>
        /// Gets the <see cref="EntityQuery"/> that represents the entity's LINQ query.
        /// </summary>
        public override EntityQuery<SoftwareDevCategory> EntityQuery
        {
            get
            {
                return this.EntityContext.GetSoftwareDevCategoriesQuery();
            }
        }
    }
}

SoftwareDevEventsRepository.cs

using System.ServiceModel.DomainServices.Client;
using ClientUI_Schedule_Application.Web;

namespace ClientUI_Schedule_Application.ModelServices
{
    public class SoftwareDevEventsRepository : EditableDataRepository<SoftwareDevEvent>
    {
        private static IDataRepository _repository;

        /// <summary>
        /// Initializes a new instance of <see cref="PublicationCategoriesRepository"/> class.
        /// </summary>
        /// <param name="context">A <see cref="DomainContext"/> instance, providing access to all functionality of the data service.</param>
        public SoftwareDevEventsRepository(DomainContext context)
            : base(context)
        {
        }

        private static bool IsReusable
        {
            get { return true; }
        }

        private ScheduleViewSampleDataDomainContext EntityContext
        {
            get
            {
                return ((ScheduleViewSampleDataDomainContext)this.Context);
            }
        }

        /// <summary>
        /// Returns an instance of <see cref="PublicationCategoriesRepository"/>. 
        /// If the <see cref="IsReusable"/> is true, the property will return an existing cached copy of the instance.
        /// </summary>
        public static IDataRepository Instance
        {
            get
            {
                if (_repository == null || !IsReusable)
                    _repository = new SoftwareDevEventsRepository(RepositoryManager.Create());

                return _repository;
            }
        }

        /// <summary>
        /// Gets the <see cref="EntitySet"/> that provides access to a collection of entities as the results of the entity query.
        /// </summary>
        public override EntitySet<SoftwareDevEvent> EntitySet
        {
            get
            {
                return this.EntityContext.SoftwareDevEvents;
            }
        }

        /// <summary>
        /// Gets the <see cref="EntityQuery"/> that represents the entity's LINQ query.
        /// </summary>
        public override EntityQuery<SoftwareDevEvent> EntityQuery
        {
            get
            {
                return this.EntityContext.GetSoftwareDevEventsQuery();
            }
        }
    }
}

SoftwareDevResourcesRepository.cs

using System.ServiceModel.DomainServices.Client;
using ClientUI_Schedule_Application.Web;

namespace ClientUI_Schedule_Application.ModelServices
{
    public class SoftwareDevResourcesRepository : DataRepository<SoftwareDevResource>
    {
        private static IDataRepository _repository;

        /// <summary>
        /// Initializes a new instance of <see cref="PublicationCategoriesRepository"/> class.
        /// </summary>
        /// <param name="context">A <see cref="DomainContext"/> instance, providing access to all functionality of the data service.</param>
        public SoftwareDevResourcesRepository(DomainContext context)
            : base(context)
        {
        }

        private static bool IsReusable
        {
            get { return true; }
        }

        private ScheduleViewSampleDataDomainContext EntityContext
        {
            get
            {
                return ((ScheduleViewSampleDataDomainContext)this.Context);
            }
        }

        /// <summary>
        /// Returns an instance of <see cref="PublicationCategoriesRepository"/>. 
        /// If the <see cref="IsReusable"/> is true, the property will return an existing cached copy of the instance.
        /// </summary>
        public static IDataRepository Instance
        {
            get
            {
                if (_repository == null || !IsReusable)
                    _repository = new SoftwareDevResourcesRepository(RepositoryManager.Create());

                return _repository;
            }
        }

        /// <summary>
        /// Gets the <see cref="EntitySet"/> that provides access to a collection of entities as the results of the entity query.
        /// </summary>
        public override EntitySet<SoftwareDevResource> EntitySet
        {
            get
            {
                return this.EntityContext.SoftwareDevResources;
            }
        }

        /// <summary>
        /// Gets the <see cref="EntityQuery"/> that represents the entity's LINQ query.
        /// </summary>
        public override EntityQuery<SoftwareDevResource> EntityQuery
        {
            get
            {
                return this.EntityContext.GetSoftwareDevResourcesQuery();
            }
        }
    }
}

SoftwareDevCalendarViewModel.cs

using ClientUI_Schedule_Application.ModelServices;
using ClientUI_Schedule_Application.Web;

namespace ClientUI_Schedule_Application.ViewModels
{
    public class SoftwareDevCalendarViewModel : ScheduleViewModelBase<SoftwareDevEvent>
    {
        protected override IDataRepository CategoriesDataSource
        {
            get { return SoftwareDevCategoriesRepository.Instance; }
        }

        protected override IDataRepository EventsDataSource
        {
            get { return SoftwareDevEventsRepository.Instance; }
        }

        protected override IDataRepository ResourcesDataSource
        {
            get { return SoftwareDevResourcesRepository.Instance; }
        }
    }
}

CalendarDev.xaml

<Intersoft:UXPage 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        xmlns:Intersoft="http://intersoft.clientui.com/schemas"
    xmlns:ViewModels="clr-namespace:ClientUI_Schedule_Application.ViewModels"
        x:Class="ClientUI_Schedule_Application.Views.CalendarDev" 
        Title="CalendarDev Page"
        d:DesignWidth="640" d:DesignHeight="480">
    <Intersoft:UXPage.Resources>
        <ViewModels:SoftwareDevCalendarViewModel x:Key="SoftwareDevCalendarViewModel"/>
    </Intersoft:UXPage.Resources>
    <Grid x:Name="LayoutRoot" DataContext="{StaticResource SoftwareDevCalendarViewModel}">
        <Intersoft:UXScheduleView x:Name="SampleControl1" DisplayDate="1/2/2012" 
                                  NavigationPanePlaceHolderId="CalendarDevContainer" 
                                  NavigationPaneBackground="{x:Null}" 
                                  CalendarHeaderBackground="{x:Null}"
                                  IsBusy="{Binding IsBusy,Mode=TwoWay}"
                                  EventsSource="{Binding Events}" CategoriesSource="{Binding Categories}" ResourcesSource="{Binding Resources}">
            <Intersoft:UXScheduleDayView />
            <Intersoft:UXScheduleWorkWeekView />
            <Intersoft:UXScheduleWeekView IsActive="True"/>
            <Intersoft:UXScheduleMonthView />
        </Intersoft:UXScheduleView>
    </Grid>
</Intersoft:UXPage>