How to: Customize Appointment Appearance

• Aug 03, 2020
• 3 minutes to read

The following example provides a step-by-step instruction on how to customize the appointment appearance using a data template.

The topic consists of the following sections:

• Create a New Scheduling Application
• Create and Apply an Appointment Template
• View the Result

Create a New Scheduling Application

1. Create a new WPF Application project and open the MainWindow.xaml file in the Visual Studio Designer.

2. Add the SchedulerControl object to your project. You can do this by dragging the SchedulerControl item from the DX.18.2: Scheduling Toolbox tab to the canvas.

   

3. Right-click the SchedulerControl object and select Layout | Reset All in the context menu to stretch the SchedulerControl so that it fills the entire window.

Create an Appointment Template

1. Create a new DataTemplate object in the resources section. The following code shows a sample template:

   This code describes a custom template used to display appointment information in the AppointmentControl. The template is applied explicitly in the Day View by assigning its x:Key to the DayViewBase.AppointmentContentTemplate property.

   Note

   A complete sample project is available at https://github.com/DevExpress-Examples/how-to-customize-the-appointment-appearance-t545892.

   MainWindow.xaml

   <DataTemplate x:Key="appointmentContentTemplate">
       <dxschv:AppointmentContentPanel>
           <dxschv:AppointmentContentPanel.Background>
               <LinearGradientBrush StartPoint="0,0" EndPoint="0, 1">
                   <GradientStop Color="White" Offset="0" />
                   <GradientStop Color="Transparent" Offset="0.5" />
               </LinearGradientBrush>
           </dxschv:AppointmentContentPanel.Background>
           <dxschv:AppointmentContentPanel.IntervalSubject>
               <dxschv:AppointmentIntervalSubjectPresenter/>
           </dxschv:AppointmentContentPanel.IntervalSubject>
           <dxschv:AppointmentContentPanel.Location>
               <dxschv:AppointmentLocationPresenter FontWeight="Normal" Foreground="Blue" />
           </dxschv:AppointmentContentPanel.Location>
           <dxschv:AppointmentContentPanel.Description>
               <StackPanel>
                   <dxschv:FastTextBlock Text="{Binding Appointment.CustomFields[Note]}" FontWeight="Normal" Foreground="Red"/>
                   <dxschv:AppointmentDescriptionPresenter FontWeight="Normal" Margin="0,1,0,0" WordWrap="True"/>
               </StackPanel>
           </dxschv:AppointmentContentPanel.Description>
           <dxschv:AppointmentContentPanel.Images>
               <dxschv:AppointmentImagesPanel/>
           </dxschv:AppointmentContentPanel.Images>
       </dxschv:AppointmentContentPanel>
   </DataTemplate>
   

   Add the following namespace declaration to the MainWindow.xaml file to use the sample template:

   XAML

   xmlns:dxschv="http://schemas.devexpress.com/winfx/2008/xaml/scheduling/visual"
   

2. This template displays a custom image on a certain condition. If the FirstVisit custom property of an appointment is true, the icon appears.

   Create an ConditionToImageSourceConverter class implementing the IValueConverter interface to display an image depending on an appointment custom field value, as shown in the code below:

   Note

   A complete sample project is available at https://github.com/DevExpress-Examples/how-to-customize-the-appointment-appearance-t545892.

   LabelToImageSourceConverter.vb

   Public Class ConditionToImageSourceConverter
       Implements IValueConverter
   
       Public Function Convert(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As CultureInfo) As Object Implements IValueConverter.Convert
           If value IsNot Nothing Then
               If DirectCast(value, Boolean) Then
                   Return DXImageHelper.GetImageSource("Office2013\Actions\Show_16x16.png")
               End If
           End If
           Return Nothing
       End Function
       Public Function ConvertBack(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As CultureInfo) As Object Implements IValueConverter.ConvertBack
           Return value
       End Function
   End Class
   Public Class ConditionToImageSourceConverterExtension
       Inherits MarkupExtension
   
       Public Overrides Function ProvideValue(ByVal serviceProvider As IServiceProvider) As Object
           Return New ConditionToImageSourceConverter()
       End Function
   End Class
   

   LabelToImageSourceConverter.cs

   public class ConditionToImageSourceConverter : IValueConverter
   {
       public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
       {
           if (value != null)
           {
               if ((bool)value)
                   return DXImageHelper.GetImageSource(@"Office2013\Actions\Show_16x16.png");
           }
           return null;
       }
       public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
       {
           return value;
       }
   }
   

3. Create a markup extension to the ConditionToImageSourceConverter class to provide the value for the Binding.Converter property:

   C#

   public class ConditionToImageSourceConverterExtension : MarkupExtension {
       public override object ProvideValue(IServiceProvider serviceProvider)
       {
           return new ConditionToImageSourceConverter();
       }
   }
   

   VB.NET

   Public Class ConditionToImageSourceConverterExtension
       Inherits MarkupExtension
   
   Public Overrides Function ProvideValue(ByVal serviceProvider As IServiceProvider) As Object
           Return New ConditionToImageSourceConverter()
       End Function
   End Class
   

4. In XAML, use the AppointmentContentTemplate property of a desired View to use the created template to display appointments. The code snippet below shows how to apply the template to a DayView:

   Note

   A complete sample project is available at https://github.com/DevExpress-Examples/how-to-customize-the-appointment-appearance-t545892.

   MainWindow.xaml

   <dxsch:DayView AppointmentContentTemplate="{StaticResource appointmentContentTemplate}" 
                  AppointmentStyle="{StaticResource appointmentStyle}"
                  ShowAllDayArea="False"
                  ShowWorkTimeOnly="True" 
                  DayCount="3"/>
   <dxsch:WorkWeekView AppointmentContentTemplate="{StaticResource appointmentContentTemplate}"
                       ShowWorkTimeOnly="True" />
   

View the Result

As a result, appointments appear as shown on the image below: