How to: Customize Appointment Appearance

  • 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

  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.19.2: Scheduling Toolbox tab to the canvas.

    WPFScheduler_DragDropFromToolbox

  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.

    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.

    <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:

    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 DXScheduler_Examples_AppointmentAppearance_Icons_Show 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:

    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
    
  3. Create a markup extension to the ConditionToImageSourceConverter class to provide the value for the Binding.Converter property:

    public class ConditionToImageSourceConverterExtension : MarkupExtension {
        public override object ProvideValue(IServiceProvider serviceProvider)
        {
            return new ConditionToImageSourceConverter();
        }
    }
    
  4. Create a new Style object in the resources section. The following code shows a sample style:

    <Style x:Key="appointmentStyle" TargetType="dxschv:AppointmentControl">
        <Setter Property="ShowInterval" Value="True"/>
        <Setter Property="ShowDescription" Value="True"/>
        <Setter Property="ImageBoxTemplate" Value="{StaticResource myImageBox}"/>
    </Style>
    
  5. In XAML, use the AppointmentContentTemplate and AppointmentStyle properties of a desired View to apply the created template and style to appointments. The code snippet below shows how to apply the template and style to a DayView:

    <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:

CustomizeAppointmentExample

See Also