Flyout Class


Represents a control that displays lightweight UI that is either information, or requires user interaction. Unlike a dialog, a Flyout can be light dismissed by clicking or tapping outside of it, pressing the device's back button, or pressing the 'Esc' key.

/// [Windows.Foundation.Metadata.ContractVersion(Windows.Foundation.UniversalApiContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.UI.Xaml.Markup.ContentProperty(Name="Content")]
class Flyout : FlyoutBase
[Windows.Foundation.Metadata.ContractVersion(typeof(Windows.Foundation.UniversalApiContract), 65536)]
public class Flyout : FlyoutBase
Public Class Flyout
Inherits FlyoutBase

Object IInspectable DependencyObject FlyoutBase Flyout

Windows requirements

Device family
Windows 10 (introduced in 10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (introduced in v1.0)



For more info, design guidance, and code examples, see Flyouts.

If you have the WinUI 2 Gallery app installed, click here to open the app and see the Flyout in action.


A Flyout displays a message that requires user interaction.

Flyout control

Use a Flyout control for collecting information, for displaying more info, or for warnings and confirmations. Unlike a dialog, a Flyout does not create a separate window, and does not block other user interaction. To show a menu of items, use a MenuFlyout instead. For more info, including XAML and code examples, see Quickstart: Adding a Flyout.

A Flyout control (or MenuFlyout) is used as the value of the Button.Flyout property. This is usually set in XAML as part of a UI definition of the page. Button is the only control that has a dedicated Flyout property. To associate a Flyout with other controls, use the FlyoutBase.AttachedFlyout attached property. When set as Button.Flyout, the Flyout displays when the button is tapped or otherwise invoked. When a Flyout is assigned to other UI elements using FlyoutBase.AttachedFlyout, you must call either the ShowAt method or the static ShowAttachedFlyout method to display the flyout.

In addition to the members listed in this reference topic, there are other members of the base class FlyoutBase that are often used in typical Flyout scenarios:


If you use a Flyout with no focusable content-for example, with only text, as shown here-you should take some additional steps to ensure that your content is accessible. Specifically, you need to ensure that Windows Narrator or other screen readers can read the flyout's content.

Flyout control with text content

By default, there are properties set on the FlyoutPresenter that prevent it from receiving focus. This is the desired behavior when content inside the Flyout can receive focus. However, if the content inside the Flyout can't receive focus, you should update to the FlyoutPresenterStyle to let the FlyoutPresenter receive focus instead. To do this, set IsTabStop to true and TabNavigation to Cycle on the flyout presenter style.

This example shows how to let the FlyoutPresenter receive focus so that the content is accessible.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Button VerticalAlignment="Center" HorizontalAlignment="Center"
            Content="Open flyout">
                    <Style TargetType="FlyoutPresenter">
                        <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
                        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
                        <Setter Property="IsTabStop" Value="True"/>
                        <Setter Property="TabNavigation" Value="Cycle"/>
                <TextBlock TextWrapping="Wrap" Text="This is some text in a flyout."/>



Initializes a new instance of the Flyout class.



Gets or sets a value that indicates whether the element automatically gets focus when the user interacts with it.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.AllowFocusOnInteraction.

(Inherited from FlyoutBase)

Gets or sets a value that specifies whether the control can receive focus when it's disabled.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.AllowFocusWhenDisabled.

(Inherited from FlyoutBase)

Gets or sets a value that indicates whether animations are played when the flyout is opened or closed.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.AreOpenCloseAnimationsEnabled.

(Inherited from FlyoutBase)

Gets or sets the content of the Flyout.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Flyout.Content.


Gets the identifier for the Content dependency property.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Flyout.ContentProperty.


Gets the CoreDispatcher that this object is associated with. The CoreDispatcher represents a facility that can access the DependencyObject on the UI thread even if the code is initiated by a non-UI thread.

Equivalent WinUI property: Microsoft.UI.Xaml.DependencyObject.Dispatcher.

(Inherited from DependencyObject)

Gets or sets a value that specifies the control's preference for whether it plays sounds.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.ElementSoundMode.

(Inherited from FlyoutBase)

Gets or sets the Style applied to the Flyout content.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Flyout.FlyoutPresenterStyle.


Gets the identifier for the FlyoutPresenterStyle dependency property.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Flyout.FlyoutPresenterStyleProperty.


Gets a value that indicates whether the input device used to open the flyout does not easily open the secondary commands.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.InputDevicePrefersPrimaryCommands.

(Inherited from FlyoutBase)

Gets a value that indicates whether the flyout is shown within the bounds of the XAML root.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.IsConstrainedToRootBounds.

(Inherited from FlyoutBase)

Gets a value that indicates whether the flyout is open.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.IsOpen.

(Inherited from FlyoutBase)

Gets or sets a value that specifies whether the area outside of a light-dismiss UI is darkened.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.LightDismissOverlayMode.

(Inherited from FlyoutBase)

Gets or sets an element that should receive pointer input events even when underneath the flyout's overlay.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.OverlayInputPassThroughElement.

(Inherited from FlyoutBase)

Gets or sets the default placement to be used for the flyout, in relation to its placement target.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.Placement.

(Inherited from FlyoutBase)

Gets or sets a value that indicates whether the flyout should be shown within the bounds of the XAML root.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.ShouldConstrainToRootBounds.

(Inherited from FlyoutBase)

Gets or sets a value that indicates how a flyout behaves when shown.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.ShowMode.

(Inherited from FlyoutBase)

Gets the element to use as the flyout's placement target.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.Target.

(Inherited from FlyoutBase)

Gets or sets the XamlRoot in which this flyout is being viewed.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.XamlRoot.

(Inherited from FlyoutBase)



Clears the local value of a dependency property.

Equivalent WinUI method: Microsoft.UI.Xaml.DependencyObject.ClearValue.

(Inherited from DependencyObject)

When overridden in a derived class, initializes a control to show the flyout content as appropriate for the derived control. Note: This method has no base class implementation and must be overridden in a derived class.

Equivalent WinUI method: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.CreatePresenter.

(Inherited from FlyoutBase)

Returns any base value established for a dependency property, which would apply in cases where an animation is not active.

Equivalent WinUI method: Microsoft.UI.Xaml.DependencyObject.GetAnimationBaseValue.

(Inherited from DependencyObject)

Returns the current effective value of a dependency property from a DependencyObject.

Equivalent WinUI method: Microsoft.UI.Xaml.DependencyObject.GetValue.

(Inherited from DependencyObject)

Closes the flyout.

Equivalent WinUI method: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.Hide.

(Inherited from FlyoutBase)

Called just before a keyboard shortcut (accelerator) is processed in your app. Invoked whenever application code or internal processes call ProcessKeyboardAccelerators. Override this method to influence the default accelerator handling.

Equivalent WinUI method: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.OnProcessKeyboardAccelerators.

(Inherited from FlyoutBase)

Returns the local value of a dependency property, if a local value is set.

Equivalent WinUI method: Microsoft.UI.Xaml.DependencyObject.ReadLocalValue.

(Inherited from DependencyObject)
RegisterPropertyChangedCallback(DependencyProperty, DependencyPropertyChangedCallback)

Registers a notification function for listening to changes to a specific DependencyProperty on this DependencyObject instance.

Equivalent WinUI method: Microsoft.UI.Xaml.DependencyObject.RegisterPropertyChangedCallback.

(Inherited from DependencyObject)
SetValue(DependencyProperty, Object)

Sets the local value of a dependency property on a DependencyObject.

Equivalent WinUI method: Microsoft.UI.Xaml.DependencyObject.SetValue.

(Inherited from DependencyObject)
ShowAt(DependencyObject, FlyoutShowOptions)

Shows the flyout placed in relation to the specified element using the specified options.

Equivalent WinUI method: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.ShowAt.

(Inherited from FlyoutBase)

Shows the flyout placed in relation to the specified element.

Equivalent WinUI method: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.ShowAt.

(Inherited from FlyoutBase)

Attempts to invoke a keyboard shortcut (accelerator).

Equivalent WinUI method: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.TryInvokeKeyboardAccelerator.

(Inherited from FlyoutBase)
UnregisterPropertyChangedCallback(DependencyProperty, Int64)

Cancels a change notification that was previously registered by calling RegisterPropertyChangedCallback.

Equivalent WinUI method: Microsoft.UI.Xaml.DependencyObject.UnregisterPropertyChangedCallback.

(Inherited from DependencyObject)



Occurs when the flyout is hidden.

Equivalent WinUI event: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.Closed.

(Inherited from FlyoutBase)

Occurs when the flyout starts to be hidden.

Equivalent WinUI event: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.Closing.

(Inherited from FlyoutBase)

Occurs when the flyout is shown.

Equivalent WinUI event: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.Opened.

(Inherited from FlyoutBase)

Occurs before the flyout is shown.

Equivalent WinUI event: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.Opening.

(Inherited from FlyoutBase)

Applies to

See also