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

Syntax

Declaration

public class Flyoutpublic class FlyoutPublic Class Flyout
<Flyout>
    singleUIElement
</Flyout>

Inheritance Hierarchy

Inherited Members

, , , , , , , , , , , , , , , , , , , , , , , , , , , ,

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 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 AttachedFlyoutProperty attached property. When set as Flyout, the Flyout displays when the button is tapped or otherwise invoked. When a Flyout is assigned to other UI elements using AttachedFlyoutProperty, you must call either the ShowAt(Windows.UI.Xaml.FrameworkElement) method or the static ShowAttachedFlyout(Windows.UI.Xaml.FrameworkElement) 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 summary

Initializes a new instance of the Flyout class.

Properties summary

Gets or sets the content of the Flyout.

Gets the identifier for the Content dependency property.

Gets or sets the Style applied to the Flyout content.

Gets the identifier for the FlyoutPresenterStyle dependency property.

Constructors

  • Flyout()
    Flyout()
    Flyout()
    Flyout()

    Initializes a new instance of the Flyout class.

    public Flyout()public Flyout()Public Function Flyout() As

Properties

  • Content
    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>
    
    

    Property Value

  • ContentProperty
    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

    Property Value

  • FlyoutPresenterStyle
    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}/>
    
    

    Property Value

    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 Margin that the FlyoutPresenter class inherits. You also can use the properties that are available on whichever element you're setting as Content, and set values of those properties directly rather than styling the FlyoutPresenter.

  • FlyoutPresenterStyleProperty
    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

    Property Value

Device family

Windows 10 (introduced v10.0.10240.0)

API contract

Windows.Foundation.UniversalApiContract (introduced v1)

Attributes

Windows.Foundation.Metadata.MarshalingBehaviorAttribute
Windows.Foundation.Metadata.StaticAttribute
Windows.UI.Xaml.Markup.ContentPropertyAttribute
Windows.Foundation.Metadata.ComposableAttribute
Windows.Foundation.Metadata.ThreadingAttribute
Windows.Foundation.Metadata.WebHostHiddenAttribute
Windows.Foundation.Metadata.ContractVersionAttribute

Details

Assembly

Windows.UI.Xaml.Controls.dll