SchedulerControl.FlyoutContentTemplate Property
Gets or sets the data template used to display the appointment flyout. This is a dependency property.
Namespace: DevExpress.Xpf.Scheduling
Assembly: DevExpress.Xpf.Scheduling.v19.1.dll
Declaration
Property Value
Type | Description |
---|---|
DataTemplate | A DataTemplate object that defines the flyout appearance. |
Remarks
Use the FlyoutContentTemplate property to specify how the appointment flyout content is displayed.
Example
This example illustrates how a custom data template created to visualize appointment data is applied to the flyout content using the SchedulerControl.FlyoutContentTemplate
property.
Note
A complete sample project is available at https://github.com/DevExpress-Examples/how-to-customize-the-appointment-flyout-t584389.
<Window
x:Class="CustomAppointmentFlyoutExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:dxsch="http://schemas.devexpress.com/winfx/2008/xaml/scheduling"
xmlns:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"
xmlns:dxschv="http://schemas.devexpress.com/winfx/2008/xaml/scheduling/visual"
xmlns:dxscht="http://schemas.devexpress.com/winfx/2008/xaml/scheduling/themekeys"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
Height="350"
Width="525"
mc:Ignorable="d"
Title="MainWindow">
<Window.Resources>
<DataTemplate x:Key="appointmentFlyoutContentTemplate">
<dxlc:LayoutControl Width="250" MinHeight="150" IsHitTestVisible="False" Orientation="Vertical" Padding="11">
<StackPanel Orientation="Vertical">
<Border Height="5" Margin="1,0,1,-1" Panel.ZIndex="1" VerticalAlignment="Top" Background="{Binding StatusBrush}"/>
<dxschv:DayAppointmentControl MinHeight="35"
Panel.ZIndex="0"
VerticalAlignment="Top"
Content="{Binding}"
ShowRecurrenceImage="True"
ShowReminderImage="True"
ShowStatus="False"
Style="{DynamicResource {dxscht:SchedulerFlyoutThemeKey ResourceKey=Appointment}}" />
</StackPanel>
<dxlc:LayoutControl Margin="0,5,0,0" VerticalAlignment="Top" Orientation="Vertical" Padding="0">
<dxlc:LayoutItem Style="{DynamicResource {dxscht:SchedulerFlyoutThemeKey ResourceKey=LayoutItem_Start}}" />
<dxlc:LayoutItem Style="{DynamicResource {dxscht:SchedulerFlyoutThemeKey ResourceKey=LayoutItem_End}}" />
</dxlc:LayoutControl>
<dxlc:LayoutControl Margin="0,5,0,0" VerticalAlignment="Top" Orientation="Vertical" Padding="0">
<dxlc:LayoutItem Style="{DynamicResource {dxscht:SchedulerFlyoutThemeKey ResourceKey=LayoutItem_Location}}" />
<dxlc:LayoutItem Style="{DynamicResource {dxscht:SchedulerFlyoutThemeKey ResourceKey=LayoutItem_Reminder}}" />
<dxlc:LayoutItem Style="{DynamicResource {dxscht:SchedulerFlyoutThemeKey ResourceKey=LayoutItem_Resources}}" />
<dxlc:LayoutItem Style="{DynamicResource {dxscht:SchedulerFlyoutThemeKey ResourceKey=LayoutItem_Description}}" />
</dxlc:LayoutControl>
<Image VerticalAlignment="Bottom"
HorizontalAlignment="Right"
Source="{dx:DXImage Image=Apply_32x32.png}"
Stretch="None" />
</dxlc:LayoutControl>
</DataTemplate>
</Window.Resources>
<Grid>
<dxsch:SchedulerControl x:Name="scheduler" FlyoutContentTemplate="{StaticResource appointmentFlyoutContentTemplate}" />
</Grid>
</Window>
Related GitHub Examples
The following code snippet (auto-collected from DevExpress Examples) contains a reference to the FlyoutContentTemplate property.
Note
The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.