Context Flyout and Commands in WinUI Scheduler

12 Apr 20226 minutes to read

The WinUI scheduler has support to define a context flyout for appointments, time slots, and month cells are right-clicked. It will also have the built-in DelegateCommand support for handling the context flyout to add, edit, and delete appointments. There are two types of Context Flyout.

NOTE

View sample in GitHub

Set the context flyout for time slot and month cells by using the SfScheduler.CellContextFlyout property. The CellContextFlyout will appear only when the time slot or month cells are right-clicked.

NOTE

The menu flyout items which bind the SchedulerCommands.Edit and SchedulerCommands.Delete built-in commands will be disabled in the CellContextFlyout.

While binding the menu flyout item using the CommandBinding, the command parameter is achieved as SchedulerContextFlyoutInfo that contains the Appointment or DateTime of the corresponding cell.

By default, the cell context flyout will be opened when holding on any timeslot or month cell. The appointment menu flyout will be opened by holding, only if the appointment’s drag and drop is disabled using the AppointmentEditFlag property.

MainWindow.xaml
<scheduler:SfScheduler x:Name="Schedule" 
                       ViewType="Week">
    <scheduler:SfScheduler.CellContextFlyout>
        <MenuFlyout>
            <MenuFlyoutItem Text="Add" 
                            Foreground="{ThemeResource SystemBaseHighColor}" 
                            Command="{x:Bind Path=scheduler:SchedulerCommands.Add}" 
                            CommandParameter="{Binding}">
                <MenuFlyoutItem.Icon>
                    <FontIcon x:Name="Add" 
                              Foreground="{ThemeResource SystemBaseHighColor}" 
                              FontFamily="Segoe MDL2 Assets" 
                              Glyph="&#xE710;"/>
                </MenuFlyoutItem.Icon>
            </MenuFlyoutItem>
        </MenuFlyout>
    </scheduler:SfScheduler.CellContextFlyout>
</scheduler:SfScheduler>

cell-context-flyout-for-timeslots-in-winui-scheduler

Set the context flyout for schedule appointments by using the SfScheduler.AppointmentContextFlyout property. The AppointmentContextFlyout will be displayed only on appointments that are right-clicked.

NOTE

The menu flyout items which binds the SchedulerCommands. Add command will be disabled in the SfScheduler.AppointmentContextFlyout.

While binding the menu flyout items using the CommandBinding, get the command parameter as SchedulerContextFlyoutInfo that contains the Appointment or DateTime of the corresponding cell.

In the month view, the AppointmentContextFlyout opens when the MonthViewSettings.AppointmentDisplayMode is set to AppointmentDisplayMode.Appointment.

To enable the touch context flyout for appointments in the scheduler by disabling the appointment drag and drop by setting the AppointmentEditFlag property except for DragDrop. In this case, the appointment drag & drop cannot be able performed. The AppointmentContextFlyout will be displayed only on appointments and the appointment selection should be performed.

MainWindow.xaml
<scheduler:SfScheduler x:Name="Schedule" 
                               ViewType="Week">
            <scheduler:SfScheduler.AppointmentContextFlyout>
                <MenuFlyout>
                    <MenuFlyoutItem Text="Edit" Foreground="{ThemeResource SystemBaseHighColor}" Command="{x:Bind Path=scheduler:SchedulerCommands.Edit}" CommandParameter="{Binding}">
                        <MenuFlyoutItem.Icon>
                            <FontIcon x:Name="Edit" Foreground="{ThemeResource SystemBaseHighColor}" FontFamily="Segoe MDL2 Assets" Glyph="&#xE70F;"/>
                        </MenuFlyoutItem.Icon>
                    </MenuFlyoutItem>
                    <MenuFlyoutItem Text="Delete" Foreground="{ThemeResource SystemBaseHighColor}" Command="{x:Bind Path=scheduler:SchedulerCommands.Delete}" CommandParameter="{Binding}">
                        <MenuFlyoutItem.Icon>
                            <FontIcon x:Name="Delete" Foreground="{ThemeResource SystemBaseHighColor}"  FontFamily="Segoe MDL2 Assets" Glyph="&#xE74D;"/>
                        </MenuFlyoutItem.Icon>
                    </MenuFlyoutItem>
                </MenuFlyout>
            </scheduler:SfScheduler.AppointmentContextFlyout>
        </scheduler:SfScheduler>

appointment-context-flyout-for-appointments-in-winui-scheduler

ContextFlyoutOpening event

The SchedulerContextFlyoutInfo event occurs while opening the AppointmentContextFlyout or CellContextFlyout in the SfScheduler.

The SchedulerContextFlyoutOpeningEventArgs has the following members which provides the information about the ContextFlyoutOpening event.

MenuInfo: Returns the SchedulerContextFlyoutInfo which contains the information about date time, appointment, resources and scheduler of the element opens the context flyout. The AppointmentContextFlyout and CellContextFlyout received this information as a DataContext.
MenuType: Gets the element type for which the context flyout opens.
ContextMenu: It represents a shortcut context flyout that is being opened.

Context Flyout and Commands in WinUI Scheduler (SfScheduler)

Cell context flyout

Appointment context flyout

ContextFlyoutOpening event