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
- Create a new WPF Application project and open the MainWindow.xaml file in the Visual Studio Designer.
Add the SchedulerControl object to your project. You can do this by dragging the SchedulerControl item from the DX.20.1: Scheduling Toolbox tab to the canvas.
- 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
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.
Note
A complete sample project is available at https://github.com/DevExpress-Examples/how-to-customize-the-appointment-appearance-t545892.
<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"
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.
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
Create a markup extension to the ConditionToImageSourceConverter class to provide the value for the Binding.Converter property:
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>
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:
Note
A complete sample project is available at https://github.com/DevExpress-Examples/how-to-customize-the-appointment-appearance-t545892.
<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: