Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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.v24.2.dll

NuGet Package: DevExpress.Wpf.Scheduling

#Declaration

public DataTemplate FlyoutContentTemplate { get; set; }

#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.

Note

This property is in use only when SchedulerControl.ToolTipMode is set to Flyout.

#Example

The SchedulerControl can display additional information for appointments when the mouse pointer hovers over them. This information is shown in the FlyoutControl or ToolTip element. To define the displayed element, use the ToolTipMode property.

Use the FlyoutContentTemplate and ToolTipContentTemplate properties to customize the appearance of the FlyoutControl and ToolTip elements.

View Example: Customize the Appointment Flyout and Tooltip

<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:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" 
    xmlns:local="clr-namespace:CustomAppointmentFlyoutExample"
    Height="500"
    Width="900"
    mc:Ignorable="d"
    Title="MainWindow">

    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>

    <Window.Resources>
        <DataTemplate x:Key="FlyoutTemplate">
            <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}}"/>
                    <TextBlock Text="{Binding CustomFields[Notes]}" Margin="2,0,0,0"/>
                </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>
                <Image VerticalAlignment="Bottom"
                    HorizontalAlignment="Right"
                    Source="{dx:DXImage Image=Apply_32x32.png}"
                    Stretch="None" />
            </dxlc:LayoutControl>
        </DataTemplate>

        <DataTemplate x:Key="TooltipTemplate">
            <dxlc:LayoutControl IsHitTestVisible="False" Orientation="Vertical" Padding="11">
                <TextBlock Text="{Binding Appointment.Subject}" FontWeight="Bold" FontSize="17"/>
                <TextBlock Text="{Binding CustomFields[Notes]}"/>
                <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>
        </DataTemplate>
    </Window.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
            <TextBlock Text="ToolTipMode:" Margin="10,0" VerticalAlignment="Center"/>
            <dxe:ComboBoxEdit VerticalAlignment="Center"
                              ItemsSource="{dxe:EnumItemsSource EnumType=dxsch:ToolTipMode}"
                              EditValue="{Binding ElementName=scheduler, Path=ToolTipMode, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
        </StackPanel>

        <dxsch:SchedulerControl x:Name="scheduler" Grid.Row="1"
                                ToolTipContentTemplate="{StaticResource TooltipTemplate}"
                                FlyoutContentTemplate="{StaticResource FlyoutTemplate}">
            <dxsch:SchedulerControl.DataSource>
                <dxsch:DataSource AppointmentsSource="{Binding Appointments}">
                    <dxsch:DataSource.AppointmentMappings>
                        <dxsch:AppointmentMappings Id="ID"
                                                   Start="StartDate"
                                                   End="EndDate"
                                                   Subject="Subject"
                                                   LabelId="LabelId">
                            <dxsch:CustomFieldMapping Name="Notes" Mapping="Notes"/>
                        </dxsch:AppointmentMappings>
                    </dxsch:DataSource.AppointmentMappings>
                </dxsch:DataSource>
            </dxsch:SchedulerControl.DataSource>
        </dxsch:SchedulerControl>

    </Grid>

</Window>
See Also