# Visual Appointment | WPF Controls | DevExpress Documentation

This document describes the controls, templates, and styles used to visualize an appointment.

- Appointment Controls
- Content Presenters
- Data Templates
- Styles

## Appointment Controls

An [appointment](/WPF/119212/controls-and-libraries/scheduler/appointments/appointment) is visualized using different controls depending on the current view, an operation mode (drag-and-drop) and whether the appointment is an all-day appointment (the [SchedulerItemBase.AllDay](/WPF/DevExpress.Xpf.Scheduling.SchedulerItemBase.AllDay) property is set to **true**).

The visual appointment controls’ class diagram is shown below.

![WPFScheduler_AppointmentControlDiagam](/WPF/images/wpfscheduler_appointmentcontroldiagam132151.png)

## Content Presenters

An appointment is visualized using a default content presenter which comprises several presenters. The [AppointmentControl](/WPF/DevExpress.Xpf.Scheduling.Visual.AppointmentControl) properties specify their visibility, as illustrated in the following picture:

![AppointmentControl](/WPF/images/appointmentcontrol132167.png)

Tip

Use content presenters in a custom appointment data template described in the next section.

| Data for Display | API Reference |
| --- | --- |
| [AppointmentItem.Subject](/WPF/DevExpress.Xpf.Scheduling.AppointmentItem.Subject) | [AppointmentIntervalSubjectPresenter](/WPF/DevExpress.Xpf.Scheduling.Visual.AppointmentIntervalSubjectPresenter) |
| [SchedulerItemBase.Start](/WPF/DevExpress.Xpf.Scheduling.SchedulerItemBase.Start), [SchedulerItemBase.End](/WPF/DevExpress.Xpf.Scheduling.SchedulerItemBase.End) | [AppointmentIntervalSubjectPresenter](/WPF/DevExpress.Xpf.Scheduling.Visual.AppointmentIntervalSubjectPresenter), [AppointmentControlBase.ShowInterval](/WPF/DevExpress.Xpf.Scheduling.Visual.AppointmentControlBase.ShowInterval) |
| [AppointmentItem.StatusId](/WPF/DevExpress.Xpf.Scheduling.AppointmentItem.StatusId) | [AppointmentControlBase.ShowStatus](/WPF/DevExpress.Xpf.Scheduling.Visual.AppointmentControlBase.ShowStatus) |
| [AppointmentItem.Location](/WPF/DevExpress.Xpf.Scheduling.AppointmentItem.Location) | [AppointmentLocationPresenter](/WPF/DevExpress.Xpf.Scheduling.Visual.AppointmentLocationPresenter), [AppointmentControlBase.ShowLocation](/WPF/DevExpress.Xpf.Scheduling.Visual.AppointmentControlBase.ShowLocation) |
| [AppointmentItem.Description](/WPF/DevExpress.Xpf.Scheduling.AppointmentItem.Description) | [AppointmentDescriptionPresenter](/WPF/DevExpress.Xpf.Scheduling.Visual.AppointmentDescriptionPresenter), [AppointmentControlBase.ShowDescription](/WPF/DevExpress.Xpf.Scheduling.Visual.AppointmentControlBase.ShowDescription) |
| [AppointmentItem.Type](/WPF/DevExpress.Xpf.Scheduling.AppointmentItem.Type) equals to [AppointmentType.Occurrence](/CoreLibraries/DevExpress.XtraScheduler.AppointmentType) | [AppointmentImagesPanel](/WPF/DevExpress.Xpf.Scheduling.Visual.AppointmentImagesPanel), [AppointmentControlBase.ShowRecurrenceImage](/WPF/DevExpress.Xpf.Scheduling.Visual.AppointmentControlBase.ShowRecurrenceImage) |
| [AppointmentItem.IsException](/WPF/DevExpress.Xpf.Scheduling.AppointmentItem.IsException) | [AppointmentImagesPanel](/WPF/DevExpress.Xpf.Scheduling.Visual.AppointmentImagesPanel), [AppointmentControlBase.ShowRecurrenceImage](/WPF/DevExpress.Xpf.Scheduling.Visual.AppointmentControlBase.ShowRecurrenceImage) |
| An appointment has reminders | [AppointmentImagesPanel](/WPF/DevExpress.Xpf.Scheduling.Visual.AppointmentImagesPanel), [AppointmentControlBase.ShowReminderImage](/WPF/DevExpress.Xpf.Scheduling.Visual.AppointmentControlBase.ShowReminderImage) |

## Data Templates

The XAML code snippets below show the built-in data templates that visually represent appointments . You can modify and assign them to the following view properties:

| Template | Property to Assign |
| --- | --- |
| Vertical Appointment Control | [DayViewBase.AppointmentContentTemplate](/WPF/DevExpress.Xpf.Scheduling.DayViewBase.AppointmentContentTemplate) |
| Horizontal Appointment Control | [DayViewBase.AllDayAppointmentContentTemplate](/WPF/DevExpress.Xpf.Scheduling.DayViewBase.AllDayAppointmentContentTemplate),[MonthView.AppointmentContentTemplate](/WPF/DevExpress.Xpf.Scheduling.MonthView.AppointmentContentTemplate), [TimelineView.AppointmentContentTemplate](/WPF/DevExpress.Xpf.Scheduling.TimelineView.AppointmentContentTemplate) |

- Vertical Appointment Control

- XAML

<section id="tabpanel_esBrG1VCB3_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;DataTemplate x:Key=&quot;VerticalAppointmentControl.ContentTemplate&quot;&gt;
    &lt;dxschv:AppointmentContentPanel&gt;
        &lt;dxschv:AppointmentContentPanel.IntervalSubject&gt;
            &lt;dxschv:AppointmentIntervalSubjectPresenter WordWrap=&quot;True&quot; /&gt;
        &lt;/dxschv:AppointmentContentPanel.IntervalSubject&gt;
        &lt;dxschv:AppointmentContentPanel.Location&gt;
            &lt;dxschv:AppointmentLocationPresenter FontWeight=&quot;Normal&quot; 
                                                    WordWrap=&quot;True&quot; /&gt;
        &lt;/dxschv:AppointmentContentPanel.Location&gt;
        &lt;dxschv:AppointmentContentPanel.Description&gt;
            &lt;dxschv:AppointmentDescriptionPresenter Margin=&quot;0,1,0,0&quot;
                                                    FontWeight=&quot;Normal&quot;
                                                    SeparatorBrush=&quot;Black&quot;
                                                    SeparatorThickness=&quot;1&quot;
                                                    WordWrap=&quot;True&quot; /&gt;
        &lt;/dxschv:AppointmentContentPanel.Description&gt;
        &lt;dxschv:AppointmentContentPanel.Images&gt;
            &lt;dxschv:AppointmentImagesPanel /&gt;
        &lt;/dxschv:AppointmentContentPanel.Images&gt;
    &lt;/dxschv:AppointmentContentPanel&gt;
&lt;/DataTemplate&gt;
</code></pre></section>
- Horizontal Appointment Control

- XAML

<section id="tabpanel_esBrG1VCB3-1_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;DataTemplate x:Key=&quot;HorizontalAppointmentControl.ContentTemplate&quot;&gt;
    &lt;dxschv:AppointmentContentPanel&gt;
        &lt;dxschv:AppointmentContentPanel.IntervalSubject&gt;
            &lt;dxschv:AppointmentIntervalSubjectPresenter /&gt;
        &lt;/dxschv:AppointmentContentPanel.IntervalSubject&gt;
        &lt;dxschv:AppointmentContentPanel.Location&gt;
            &lt;dxschv:AppointmentLocationPresenter FontWeight=&quot;Normal&quot; /&gt;
        &lt;/dxschv:AppointmentContentPanel.Location&gt;
        &lt;dxschv:AppointmentContentPanel.Description&gt;
            &lt;dxschv:AppointmentDescriptionPresenter Margin=&quot;0,1,0,0&quot;
                                                    FontWeight=&quot;Normal&quot;
                                                    WordWrap=&quot;True&quot; /&gt;
        &lt;/dxschv:AppointmentContentPanel.Description&gt;
        &lt;dxschv:AppointmentContentPanel.Images&gt;
            &lt;dxschv:AppointmentImagesPanel /&gt;
        &lt;/dxschv:AppointmentContentPanel.Images&gt;
    &lt;/dxschv:AppointmentContentPanel&gt;
&lt;/DataTemplate&gt;
</code></pre></section>

## Styles

The following code snippet illustrates how to use styles to set the attached properties of an appointment control displayed in the view, to show or hide a specific appointment’s visual elements and change display formats, as illustrated in the following code snippet. To apply the appointment style, use the view’s **AppointmentStyle** property:  the [DayViewBase.AppointmentStyle](/WPF/DevExpress.Xpf.Scheduling.DayViewBase.AppointmentStyle) property for the [Day View](/WPF/119204/controls-and-libraries/scheduler/views/day-view), [Work Week View](/WPF/119205/controls-and-libraries/scheduler/views/work-week-view) and [Week View](/WPF/119206/controls-and-libraries/scheduler/views/week-view); the  [MonthView.AppointmentStyle](/WPF/DevExpress.Xpf.Scheduling.MonthView.AppointmentStyle) property for the [Month View](/WPF/119207/controls-and-libraries/scheduler/views/month-view); the [TimelineView.AppointmentStyle](/WPF/DevExpress.Xpf.Scheduling.TimelineView.AppointmentStyle) property for the [Timeline View](/WPF/119586/controls-and-libraries/scheduler/views/timeline-view).

This code snippet sets the [AppointmentControl](/WPF/DevExpress.Xpf.Scheduling.Visual.AppointmentControl) properties to display the appointment’s start and end time, location and description. It also demonstrates how to display an image in the appointment’s bottom right corner.

[View Example](https://github.com/DevExpress-Examples/wpf-scheduler-customize-appointment-appearance)

- MainWindow.xaml

<section id="tabpanel_foLMyTPxg6_tabid-xamlMainWindow-xaml" role="tabpanel" data-tab="tabid-xamlMainWindow-xaml">
<pre><code class="lang-xaml">&lt;DataTemplate x:Key=&quot;myImageBox&quot;&gt;
    &lt;Image Margin=&quot;2&quot; Height=&quot;16&quot; Width=&quot;16&quot;
           Source=&quot;{Binding Appointment.CustomFields[FirstVisit], Converter={local:ConditionToImageSourceConverter}}&quot; /&gt;
&lt;/DataTemplate&gt;
&lt;Style x:Key=&quot;appointmentStyle&quot; TargetType=&quot;dxschv:AppointmentControl&quot;&gt;
    &lt;Setter Property=&quot;ShowInterval&quot; Value=&quot;True&quot;/&gt;
    &lt;Setter Property=&quot;ShowDescription&quot; Value=&quot;True&quot;/&gt;
    &lt;Setter Property=&quot;ImageBoxTemplate&quot; Value=&quot;{StaticResource myImageBox}&quot;/&gt;
&lt;/Style&gt;
</code></pre></section>