Scheduler for WPF and Silverlight | ComponentOne
Scheduler for Silverlight Tutorials / Creating a Custom Application for Custom Data / Step 4 of 5: Adding Functionality to the Application Main Page
In This Topic
    Step 4 of 5: Adding Functionality to the Application Main Page
    In This Topic

    In this step, you will add a C1Scheduler control to the main page of your application and set its properties so that it uses your custom appointment dialog to edit appointments and custom business objects collection as data source for the AppointmentStorage.

    1. Open MainPage.xaml file and add the following XAML namespaces to the <UserControl> tag:

      XAML
      Copy Code
      xmlns:c1="clr-namespace:C1.Silverlight;assembly=C1.Silverlight"
      xmlns:c1sched="clr-namespace:C1.Silverlight.Schedule;assembly=C1.Silverlight.Schedule"
      xmlns:local=" clr-namespace:SchedulerCustomData"
      

      The <UserControl> tag should resemble the following:

      XAML
      Copy Code
      <UserControl x:Class="SchedulerCustomData.MainPage"    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
      xmlns:local=" clr-namespace:SchedulerCustomData"
      xmlns:c1sched="clr-namespace:C1.C1Schedule;assembly=C1.Silverlight.Schedule.5"
      Loaded="UserControl_Loaded">
      

    2. Define custom DataTemplate for editing appointments in the page resources:

      XAML
      Copy Code
      <UserControl.Resources>
              <DataTemplate x:Key="customEditAppointmentTemplate">
                  <local:EditAppointmentDialog/>
              </DataTemplate>
          </UserControl.Resources>
      

    3. Add a C1Scheduler control to your application by locating the control in the Toolbox and double-clicking it to add it to your application.
    4. Add the following XAML to the <C1Schedule> tag set the C1Scheduler properties and event handlers:

      XAML
      Copy Code
      Height="300" HorizontalAlignment="Left" Name="c1Scheduler1" VerticalAlignment="Top" Width="400" Style="{Binding OneDayStyle, RelativeSource={RelativeSource Self}}" EditAppointmentTemplate="{StaticResource customEditAppointmentTemplate}"                             UserAddingAppointment="c1Scheduler1_UserAddingAppointment"                             AppointmentAdded="c1Scheduler1_AppointmentAdded"                             UserEditingAppointment="c1Scheduler1_UserEditingAppointment"
      

       

    5. Right-click the application and select View Code from the list to open MainPage.xaml.cs or the MainPage.xaml.vb.
    6. Add the following namespaces:

      Visual Basic
      Copy Code
      Imports C1.Silverlight.Schedule
      Imports C1.Silverlight
      Imports C1.Silverlight.DateTimeEditors
      Imports C1.C1Schedule
      Imports System.Windows.Data
      

      C#
      Copy Code
      using C1.Silverlight.Schedule;
      using C1.Silverlight;
      using C1.Silverlight.DateTimeEditors;
      using C1.C1Schedule;
      using System.Windows.Data;
      

    7. Create the AppointmentBOList class instance as a field in the MainPage class:

      Visual Basic
      Copy Code
       Dim myAppointments As AppointmentsBO = New AppointmentsBO
      

      C#
      Copy Code
      AppointmentsBO myAppointments = new AppointmentsBO();
      

    8. Insert the following code into the MainPage constructor directly below the InitializeComponent() method call to create a sample appointment:

      Visual Basic
      Copy Code
       Dim app1 As AppointmentBORow = New AppointmentBORow
              app1.Body = "Test Body"
              app1.dt = (DateTime.Now + TimeSpan.FromHours(1))
              app1.Start = DateTime.Now
              app1.Location = "Test Location"
              app1.Id = Guid.NewGuid
              app1.Subject = "Test Subject"
      

      C#
      Copy Code
      // Create a sample appointment
      AppointmentBORow app1 = new AppointmentBORow();
      app1.Body = "Test Body";
      app1.End = DateTime.Now + TimeSpan.FromHours(1);
      app1.Start = DateTime.Now;
      app1.Location = "Test Location";
      app1.Id = Guid.NewGuid();
      app1.Subject = "Test Subject";
      

    9. Fill the custom properties for the Business Objects by inserting the following code:

      Visual Basic
      Copy Code
      ' Custom BO Properties
      app1.BOProperty1 = "New Property"
      app1.BOProperty2 = "Second Property"
      myAppointments.Add(app1)
      

      C#
      Copy Code
      // Custom BO Properties
      app1.BOProperty1 = "New Property";
      app1.BOProperty2 = "Second Property";
      myAppointments.Add(app1);
      

    10. Next, map AppointmentStorage to custom business object properties and set AppointmentStorage.DataSource to the business objects collection instance:

      Visual Basic
      Copy Code
      'Data binding
       c1Scheduler1.DataStorage.AppointmentStorage.Mappings.Body.MappingName = "Body"
              c1Scheduler1.DataStorage.AppointmentStorage.Mappings.Start.MappingName = "Start"
              c1Scheduler1.DataStorage.AppointmentStorage.Mappings.End.MappingName = "End"
              c1Scheduler1.DataStorage.AppointmentStorage.Mappings.Location.MappingName = "Location"
              c1Scheduler1.DataStorage.AppointmentStorage.Mappings.IdMapping.MappingName = "Id"
              c1Scheduler1.DataStorage.AppointmentStorage.Mappings.Subject.MappingName = "Subject"
              c1Scheduler1.DataStorage.AppointmentStorage.Mappings.AppointmentProperties.MappingName = "Properties"
              c1Scheduler1.DataStorage.AppointmentStorage.DataSource = myAppointments.Appointments
          End Sub
      

      C#
      Copy Code
      //Data binding           
      c1Scheduler1.DataStorage.AppointmentStorage.Mappings.Body.MappingName = "Body";            c1Scheduler1.DataStorage.AppointmentStorage.Mappings.Start.MappingName = "Start";            c1Scheduler1.DataStorage.AppointmentStorage.Mappings.End.MappingName = "End";            c1Scheduler1.DataStorage.AppointmentStorage.Mappings.Location.MappingName = "Location";            c1Scheduler1.DataStorage.AppointmentStorage.Mappings.IdMapping.MappingName = "Id";           c1Scheduler1.DataStorage.AppointmentStorage.Mappings.Subject.MappingName = "Subject";            c1Scheduler1.DataStorage.AppointmentStorage.Mappings.AppointmentProperties.MappingName = "Properties";
      c1Scheduler1.DataStorage.AppointmentStorage.DataSource = myAppointments.Appointments;
      

    11. Insert the following code to set the Scheduler Appointment settings:

      Visual Basic
      Copy Code
      Private Sub c1Scheduler1_UserAddingAppointment(ByVal sender As Object, ByVal e As C1.Silverlight.Schedule.AppointmentActionEventArgs)
              Dim newApp As AppointmentBORow = New AppointmentBORow
              e.Appointment.Tag = newApp
          End Sub
          Private Sub c1Scheduler1_AppointmentAdded(ByVal sender As Object, ByVal e As C1.Silverlight.Schedule.AppointmentActionEventArgs)
              Dim newApp As AppointmentBORow = FindMyAppointment(CType(e.Appointment.Key(0), Guid))
              Dim editedApp As AppointmentBORow = CType(e.Appointment.Tag, AppointmentBORow)
              If (Not (editedApp) Is Nothing) Then
                  newApp.BOProperty1 = editedApp.BOProperty1
                  newApp.BOProperty2 = editedApp.BOProperty2
              End If
          End Sub
          Private Sub c1Scheduler1_UserEditingAppointment(ByVal sender As Object, ByVal e As C1.Silverlight.Schedule.AppointmentActionEventArgs)
              Dim myApp As AppointmentBORow = FindMyAppointment(CType(e.Appointment.Key(0), Guid))
              e.Appointment.Tag = myApp
          End Sub
          Private Function FindMyAppointment(ByVal id As Guid) As AppointmentBORow
              For Each app As AppointmentBORow In myAppointments.Appointments
                  If (app.Id = id) Then
                      Return app
                  End If
              Next
              Return Nothing
          End Function
      

      C#
      Copy Code
      //Set schedule interval to 1 hour
                  c1Scheduler1.VisualIntervalScale = TimeSpan.FromHours(1);
              }
              private void c1Scheduler1_UserAddingAppointment(object sender, C1.Silverlight.Schedule.AppointmentActionEventArgs e)
              {
                  AppointmentBORow newApp = new AppointmentBORow();
                  e.Appointment.Tag = newApp;
              }
              private void c1Scheduler1_AppointmentAdded(object sender, C1.Silverlight.Schedule.AppointmentActionEventArgs e)
              {
                  AppointmentBORow newApp = FindMyAppointment((Guid)e.Appointment.Key[0]);
                  AppointmentBORow editedApp = e.Appointment.Tag as AppointmentBORow;
                  if (editedApp != null)
                  {
                      newApp.BOProperty1 = editedApp.BOProperty1;
                      newApp.BOProperty2 = editedApp.BOProperty2;
                  }
              }
              private void c1Scheduler1_UserEditingAppointment(object sender, C1.Silverlight.Schedule.AppointmentActionEventArgs e)
              {
                  AppointmentBORow myApp = FindMyAppointment((Guid)e.Appointment.Key[0]);
                  e.Appointment.Tag = myApp;
              }
              AppointmentBORow FindMyAppointment(Guid id)
              {
                  foreach (AppointmentBORow app in myAppointments.Appointments)
                  {
                      if (app.Id == id)
                          return app;
                  }
                  return null;
              }
          }
      }
      

    In this step you added the C1Scheduler control to your application and set all required properties for working with custom dialog and data.