Lesson 8 - Create a Custom Appointment Recurrence Dialog Using the MVVM Pattern (legacy)

• Jun 27, 2023
• 5 minutes to read

Note

You are viewing documentation for the legacy WPF Scheduler control. If you’re starting a new project, we strongly recommend that you use a new control declared in the DevExpress.Xpf.Scheduling namespace. If you decide to upgrade an existing project in order to switch to the updated scheduler control, see the Migration Guidelines document.

In this lesson, you will learn how to use the MVVM design pattern to customize the default Appointment Recurrence dialog, which can be invoked by clicking the Recurrence button in the Edit Appointment form.

Important

Before starting the example, you must perform the steps described in Lesson 7 - Create a Custom Edit Appointment Form Using the MVVM Pattern (legacy) of the current tutorial. This lesson demonstrates how to create the scheduling application and customize the default appointment editing form by utilizing an MVVM-based mechanism for form display.

The tutorial includes the following sections.

• Enable the Recurrence Functionality
• Add the Recurrence Button to the Edit Appointment Form
• Create a Custom Appointment Recurrence Dialog
• Use a Data Template to Show the Custom Dialog
• Result

Enable the Recurrence Functionality

1. Open the WPF application with the SchedulerControl, which was created in Lesson 7 - Create a Custom Edit Appointment Form Using the MVVM Pattern (legacy) of the current tutorial.

2. Open the MainViewModel file and implement the Recurrence and Type properties of the HospitalAppointment class. The values of these properties will be used to save and load the recurrence information in the data source (in this example, the System.ComponentModel.BindingList<HospitalAppointment> collection is used to define the data source).

   C#

   public class HospitalAppointment
   {
        // ...
        public string Recurrence { get; set; }
        public int Type { get; set; }
   }
   

   VB.NET

   Public Class HospitalAppointment
       ' ...
       Private privateRecurrence As String
       Public Property Recurrence() As String
           Get
               Return privateRecurrence
           End Get
           Set(ByVal value As String)
               privateRecurrence = value
           End Set
       End Property
       Private privateType As Integer
       Public Property Type() As Integer
           Get
               Return privateType
           End Get
           Set(ByVal value As Integer)
               privateType = value
           End Set
       End Property
   End Class
   

3. Switch to the MainWindow.xaml file. Use the AppointmentStorage.Mappings property to bind an appointment’s Appointment.RecurrenceInfo and Appointment.Type properties to the Recurrence and Type fields of the data source.

   XAML

   <dxsch:AppointmentStorage.Mappings>
        <dxsch:AppointmentMapping Start="StartTime" 
                                  <!------------------->                    
                                  RecurrenceInfo="Recurrence" 
                                  Type="Type"/>
   </dxsch:AppointmentStorage.Mappings>
   

Add the Recurrence Button to the Edit Appointment Form

Open the HospitalAppointmentForm.xaml file. Add the Recurrence button to the form next to the Cancel button. Bind the button to EditRecurrenceCommand to enable creating and editing recurring appointments using the Appointment Recurrence dialog.

XAML

<!--------------------------------->
<StackPanel Grid.Row="8" Grid.Column="1" Grid.ColumnSpan="2" 
            Orientation="Horizontal" HorizontalAlignment="Right">
     <!--OK button-->
     <!--Cancel button-->
     <!--Recurrence button-->
     <Button x:Name="btnRecurrence"
           Content="Recurrence"
           Command="{Binding EditRecurrenceCommand}" MinWidth="75" Margin="6,0,0,0"/>
</StackPanel>

Create a Custom Appointment Recurrence Dialog

1. In the Solution Explorer, right-click the project’s name (MVVMSchedulerApplication) and select Add | User Control…

   

2. In the Add New Item dialog, select the WPF group of templates, click the User Control (WPF) item, change its name to HospitalRecurrenceForm.xaml, and then click Add.

   

3. Locate the RecurrenceTypeEditor, DailyRecurrenceControl, WeeklyRecurrenceControl, MonthlyRecurrenceControl and RecurrenceRangeControl controls on the Recurrence form. To enable editing the recurrence pattern of an appointment, bind the added controls to the corresponding property values of the DevExpress.Xpf.Scheduler.UI.RecurrenceDialogViewModel object, which serves as a data context for any bindings within the form.

   

   As a result, your XAML may look like the following. (If it does not, you can overwrite your code with the code below).

   XAML

   <UserControl x:Class="MVVMSchedulerApplication.HospitalRecurrenceForm"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
   xmlns:dxsch="http://schemas.devexpress.com/winfx/2008/xaml/scheduler"
   xmlns:dxschi="http://schemas.devexpress.com/winfx/2008/xaml/scheduler/internal"
   xmlns:dxschdui="clr-namespace:DevExpress.Xpf.Scheduler.UI;assembly=DevExpress.Xpf.Scheduler.v14.2"
   MinWidth="550">
   
    <UserControl.Resources>
        <dx:BoolToVisibilityConverter x:Key="booleanToVisibilityConverter" />
    </UserControl.Resources>
   
    <Grid Margin="12" Background="Snow">
        <Grid.RowDefinitions>
               <RowDefinition Height="*" />
               <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <!--Recurrence Pattern Group-->
        <dx:GroupFrame Header="Recurrence Pattern" Margin="0,12,0,0" Background="Red">
               <Grid>
                   <Grid.ColumnDefinitions>
                       <ColumnDefinition Width="Auto" />
                       <ColumnDefinition Width="Auto" />
                       <ColumnDefinition Width="*" />
                   </Grid.ColumnDefinitions>
                   <dxschdui:RecurrenceTypeEditor RecurrenceType="{Binding RecurrenceType, Mode=TwoWay}" RecurrenceTypes="{Binding AvailableRecurrenceTypes}" IsReadOnly="{Binding IsReadOnly}" />
                   <StackPanel Grid.Column="2" Margin="15,0,0,0">
                       <dxsch:DailyRecurrenceControl Visibility="{Binding IsDailyRecurrence, Converter={dxschi:BoolToVisibilityConverter}}" 
                                                     RecurrenceInfo="{Binding RecurrenceInfo}" IsReadOnly="{Binding IsReadOnly}" />
                       <dxsch:WeeklyRecurrenceControl Visibility="{Binding IsWeeklyRecurrence, Converter={dxschi:BoolToVisibilityConverter}}" 
                                                     RecurrenceInfo="{Binding RecurrenceInfo}" IsReadOnly="{Binding IsReadOnly}" FirstDayOfWeek="{Binding FirstDayOfWeek}" />
                       <dxsch:MonthlyRecurrenceControl Visibility="{Binding IsMonthlyRecurrence, Converter={dxschi:BoolToVisibilityConverter}}" 
                                                     RecurrenceInfo="{Binding RecurrenceInfo}" IsReadOnly="{Binding IsReadOnly}" />
                   </StackPanel>
               </Grid>
        </dx:GroupFrame>
        <!--Recurrence End Group-->
        <dx:GroupFrame Grid.Row="1" Header="Recurrence End" Margin="0,12,0,0">
               <dxsch:RecurrenceRangeControl RecurrenceInfo="{Binding RecurrenceInfo}"
                           TimeZoneHelper="{Binding TimeZoneHelper, Mode=OneTime}"
                           Pattern="{Binding PatternCopy}" IsReadOnly="{Binding IsReadOnly}"/>
        </dx:GroupFrame>
    </Grid>
   </UserControl>
   

Use a Data Template to Display the Custom Dialog

Switch to the MainWindow.xaml file. To invoke the created Appointment Recurrence form, you need to specify a data template that contains a service used to display the form’s View. By default, the DialogService is used as a service to show the dialog window. Utilize the SchedulerControl.AppointmentRecurrenceDialogServiceTemplate property to specify the data template. To display your custom form instead of the standard one, set the ViewServiceBase.ViewTemplate property to HospitalRecurrenceForm. To define the style and size of the dialog, utilize the DialogService.DialogStyle property. The XAML code implementing this approach is shown below.

XAML

<dxsch:SchedulerControl.AppointmentRecurrenceDialogServiceTemplate>
    <DataTemplate>
       <ContentControl>
         <dx:DialogService DialogWindowStartupLocation="CenterOwner">
             <dx:DialogService.DialogStyle>
                 <Style TargetType="dx:DXWindow">
                     <Setter Property="SizeToContent" Value="WidthAndHeight"/>
                 </Style>
             </dx:DialogService.DialogStyle>
             <dx:DialogService.ViewTemplate>
                 <DataTemplate>
                     <local:HospitalRecurrenceForm/>
                 </DataTemplate>
             </dx:DialogService.ViewTemplate>
         </dx:DialogService>
       </ContentControl>
    </DataTemplate>
</dxsch:SchedulerControl.AppointmentRecurrenceDialogServiceTemplate>

Result

Run the project. Double-click any appointment or create a new one to invoke the Edit Appointment form. In the form, click the Recurrence button to display the custom Appointment Recurrence dialog shown in the image below.