Flyout Flyout Flyout Class

Definition

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.

public : class Flyout : FlyoutBase, IFlyout
public class Flyout : FlyoutBase, IFlyout
Public Class Flyout Inherits FlyoutBase Implements IFlyout
<Flyout>
    singleUIElement
</Flyout>

Inheritance
Attributes
Windows 10 requirements
Device family
Windows 10 (introduced v10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v1)

Examples

XAML Controls Gallery
XAML controls gallery

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

Remarks

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:

Accessibility

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">
        <Button.Flyout>
            <Flyout>
                <Flyout.FlyoutPresenterStyle>
                    <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"/>
                    </Style>
                </Flyout.FlyoutPresenterStyle>
                <TextBlock TextWrapping="Wrap" Text="This is some text in a flyout."/>
            </Flyout>
        </Button.Flyout>
    </Button>
</Grid>

Constructors

Flyout() Flyout() Flyout()

Initializes a new instance of the Flyout class.

public : Flyout()
public Flyout()
Public Sub New()

Properties

AllowFocusOnInteraction AllowFocusOnInteraction AllowFocusOnInteraction

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

(Inherited from FlyoutBase)
Additional features and requirements
Device family
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v3)

AllowFocusOnInteractionProperty AllowFocusOnInteractionProperty AllowFocusOnInteractionProperty

Identifies the AllowFocusOnInteraction dependency property.

(Inherited from FlyoutBase)
Additional features and requirements
Device family
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v3)

AllowFocusWhenDisabled AllowFocusWhenDisabled AllowFocusWhenDisabled

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

(Inherited from FlyoutBase)
Additional features and requirements
Device family
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v3)

AllowFocusWhenDisabledProperty AllowFocusWhenDisabledProperty AllowFocusWhenDisabledProperty

Identifies the AllowFocusWhenDisabled dependency property.

(Inherited from FlyoutBase)
Additional features and requirements
Device family
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v3)

AttachedFlyoutProperty AttachedFlyoutProperty AttachedFlyoutProperty

Identifies the FlyoutBase.AttachedFlyout XAML attached property.

(Inherited from FlyoutBase)

Content Content Content

Gets or sets the content of the Flyout.

public : UIElement Content { get; set; }
public UIElement Content { get; set; }
Public ReadWrite Property Content As UIElement
<Flyout>
    singleUIElement
</Flyout>

Value
UIElement UIElement UIElement

The content of the Flyout.

ContentProperty ContentProperty ContentProperty

Gets the identifier for the Content dependency property.

public : static DependencyProperty ContentProperty { get; }
public static DependencyProperty ContentProperty { get; }
Public Static ReadOnly Property ContentProperty As DependencyProperty
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the Content dependency property.

Dispatcher Dispatcher Dispatcher

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.

(Inherited from DependencyObject)

ElementSoundMode ElementSoundMode ElementSoundMode

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

(Inherited from FlyoutBase)
Additional features and requirements
Device family
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v3)

ElementSoundModeProperty ElementSoundModeProperty ElementSoundModeProperty

Identifies the ElementSoundMode dependency property.

(Inherited from FlyoutBase)
Additional features and requirements
Device family
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v3)

FlyoutPresenterStyle FlyoutPresenterStyle FlyoutPresenterStyle

Gets or sets the Style applied to the Flyout content.

public : Style FlyoutPresenterStyle { get; set; }
public Style FlyoutPresenterStyle { get; set; }
Public ReadWrite Property FlyoutPresenterStyle As Style
<Flyout FlyoutPresenterStyle={StaticResource styleResourceKey}/>

Value
Style Style Style

The applied Style for the Flyout content, if present; otherwise, null. The default is null.

Remarks

The Style element you use for a FlyoutPresenterStyle value must specify TargetType="FlyoutPresenter".

A Flyout itself isn't a control or even a UIElement, and thus doesn't have any properties to apply a Style to. Instead, you can style the properties of the internal FlyoutPresenter that is presenting the Content of a Flyout. The properties that can be styled are the dependency properties of the base ContentControl class or Control class, such as FontSize or Padding, or base element properties such as FrameworkElement.Margin that the FlyoutPresenter class inherits. You also can use the properties that are available on whichever element you're setting as Flyout.Content, and set values of those properties directly rather than styling the FlyoutPresenter.

See Also

FlyoutPresenterStyleProperty FlyoutPresenterStyleProperty FlyoutPresenterStyleProperty

Gets the identifier for the FlyoutPresenterStyle dependency property.

public : static DependencyProperty FlyoutPresenterStyleProperty { get; }
public static DependencyProperty FlyoutPresenterStyleProperty { get; }
Public Static ReadOnly Property FlyoutPresenterStyleProperty As DependencyProperty
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the FlyoutPresenterStyle dependency property.

LightDismissOverlayMode LightDismissOverlayMode LightDismissOverlayMode

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

(Inherited from FlyoutBase)
Additional features and requirements
Device family
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v3)

LightDismissOverlayModeProperty LightDismissOverlayModeProperty LightDismissOverlayModeProperty

Identifies the LightDismissOverlayMode dependency property.

(Inherited from FlyoutBase)
Additional features and requirements
Device family
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v3)

OverlayInputPassThroughElement OverlayInputPassThroughElement OverlayInputPassThroughElement

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

(Inherited from FlyoutBase)
Additional features and requirements
Device family
Windows 10 Creators Update (introduced v10.0.15063.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v4)

OverlayInputPassThroughElementProperty OverlayInputPassThroughElementProperty OverlayInputPassThroughElementProperty

Identifies the OverlayInputPassThroughElement dependency property.

(Inherited from FlyoutBase)
Additional features and requirements
Device family
Windows 10 Creators Update (introduced v10.0.15063.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v4)

Placement Placement Placement

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

(Inherited from FlyoutBase)

PlacementProperty PlacementProperty PlacementProperty

Identifies the Placement dependency property.

(Inherited from FlyoutBase)

Target Target Target

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

(Inherited from FlyoutBase)
Additional features and requirements
Device family
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v3)

Methods

ClearValue(DependencyProperty) ClearValue(DependencyProperty) ClearValue(DependencyProperty)

Clears the local value of a dependency property.

(Inherited from DependencyObject)

CreatePresenter CreatePresenter CreatePresenter

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.

(Inherited from FlyoutBase)

GetAnimationBaseValue(DependencyProperty) GetAnimationBaseValue(DependencyProperty) GetAnimationBaseValue(DependencyProperty)

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

(Inherited from DependencyObject)

GetAttachedFlyout(FrameworkElement) GetAttachedFlyout(FrameworkElement) GetAttachedFlyout(FrameworkElement)

Gets the flyout associated with the specified element.

(Inherited from FlyoutBase)

GetValue(DependencyProperty) GetValue(DependencyProperty) GetValue(DependencyProperty)

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

(Inherited from DependencyObject)

Hide Hide Hide

Closes the flyout.

(Inherited from FlyoutBase)

OnProcessKeyboardAccelerators(ProcessKeyboardAcceleratorEventArgs) OnProcessKeyboardAccelerators(ProcessKeyboardAcceleratorEventArgs) OnProcessKeyboardAccelerators(ProcessKeyboardAcceleratorEventArgs)

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.

(Inherited from FlyoutBase)
Additional features and requirements
Device family
Windows 10 Fall Creators Update (introduced v10.0.16299.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v5)

ReadLocalValue(DependencyProperty) ReadLocalValue(DependencyProperty) ReadLocalValue(DependencyProperty)

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

(Inherited from DependencyObject)

RegisterPropertyChangedCallback(DependencyProperty,DependencyPropertyChangedCallback) RegisterPropertyChangedCallback(DependencyProperty,DependencyPropertyChangedCallback) RegisterPropertyChangedCallback(DependencyProperty,DependencyPropertyChangedCallback)

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

(Inherited from DependencyObject)

SetAttachedFlyout(FrameworkElement,FlyoutBase) SetAttachedFlyout(FrameworkElement,FlyoutBase) SetAttachedFlyout(FrameworkElement,FlyoutBase)

Associates the specified flyout with the specified FrameworkElement.

(Inherited from FlyoutBase)

SetValue(DependencyProperty,Object) SetValue(DependencyProperty,Object) SetValue(DependencyProperty,Object)

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

(Inherited from DependencyObject)

ShowAt(FrameworkElement) ShowAt(FrameworkElement) ShowAt(FrameworkElement)

Shows the flyout placed in relation to the specified element.

(Inherited from FlyoutBase)

ShowAttachedFlyout(FrameworkElement) ShowAttachedFlyout(FrameworkElement) ShowAttachedFlyout(FrameworkElement)

Shows the flyout associated with the specified element, if any.

(Inherited from FlyoutBase)

TryInvokeKeyboardAccelerator(ProcessKeyboardAcceleratorEventArgs) TryInvokeKeyboardAccelerator(ProcessKeyboardAcceleratorEventArgs) TryInvokeKeyboardAccelerator(ProcessKeyboardAcceleratorEventArgs)

Attempts to invoke a keyboard shortcut (accelerator).

(Inherited from FlyoutBase)
Additional features and requirements
Device family
Windows 10 Fall Creators Update (introduced v10.0.16299.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v5)

UnregisterPropertyChangedCallback(DependencyProperty,Int64) UnregisterPropertyChangedCallback(DependencyProperty,Int64) UnregisterPropertyChangedCallback(DependencyProperty,Int64)

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

(Inherited from DependencyObject)

Events

Closed Closed Closed

Occurs when the flyout is hidden.

(Inherited from FlyoutBase)

Closing Closing Closing

Occurs when the flyout starts to be hidden.

(Inherited from FlyoutBase)
Additional features and requirements
Device family
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v3)

Opened Opened Opened

Occurs when the flyout is shown.

(Inherited from FlyoutBase)

Opening Opening Opening

Occurs before the flyout is shown.

(Inherited from FlyoutBase)

See Also