Flyout class
TOC
Collapse the table of content
Expand the table of content

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.

Inheritance

Object
  DependencyObject
    FlyoutBase
      Flyout

Syntax


public class Flyout : FlyoutBase



<Flyout>
    singleUIElement
</Flyout>


XAML Values

singleUIElement

A single object element that declares the content. This must be an object that has UIElement in its hierarchy (plain strings don't work). This can be a container, such as a Panel derived class, so that multiple content items within the Flyout can be arranged in layout.

Members

The Flyout class has these types of members:

Constructors

The Flyout class has these constructors.

ConstructorDescription
Flyout Initializes a new instance of the Flyout class.

 

Events

The Flyout class has these events.

EventDescription
Closed Occurs when the flyout is hidden. (Inherited from FlyoutBase)
Closing Occurs when the flyout starts to be hidden. (Inherited from FlyoutBase)
Opened Occurs when the flyout is shown. (Inherited from FlyoutBase)
Opening Occurs before the flyout is shown. (Inherited from FlyoutBase)

 

Methods

The Flyout class has these methods. It also inherits methods from the Object class.

MethodDescription
ClearValue Clears the local value of a dependency property. (Inherited from DependencyObject)
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 Returns any base value established for a dependency property, which would apply in cases where an animation is not active. (Inherited from DependencyObject)
GetValue Returns the current effective value of a dependency property from a DependencyObject. (Inherited from DependencyObject)
Hide Closes the flyout. (Inherited from FlyoutBase)
ReadLocalValue Returns the local value of a dependency property, if a local value is set. (Inherited from DependencyObject)
RegisterPropertyChangedCallback Registers a notification function for listening to changes to a specific DependencyProperty on this DependencyObject instance. (Inherited from DependencyObject)
SetValue Sets the local value of a dependency property on a DependencyObject. (Inherited from DependencyObject)
ShowAt Shows the flyout placed in relation to the specified element. (Inherited from FlyoutBase)
UnregisterPropertyChangedCallback Cancels a change notification that was previously registered by calling RegisterPropertyChangedCallback. (Inherited from DependencyObject)

 

Properties

The Flyout class has these properties.

PropertyAccess typeDescription

AllowFocusOnInteraction

Read/write

Gets or sets a value that indicates whether the element automatically gets focus when the user interacts with it. (Inherited from FlyoutBase)

AllowFocusWhenDisabled

Read/write

Gets or sets a value that specifies whether the control can receive focus when it's disabled. (Inherited from FlyoutBase)

Content

Read/write

Gets or sets the content of the Flyout.

ContentProperty

Read-only

Gets the identifier for the Content dependency property.

Dispatcher

Read-only

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

Read/write

Gets or sets a value that specifies the control's preference for whether it plays sounds. (Inherited from FlyoutBase)

FlyoutPresenterStyle

Read/write

Gets or sets the Style applied to the Flyout content.

FlyoutPresenterStyleProperty

Read-only

Gets the identifier for the FlyoutPresenterStyle dependency property.

LightDismissOverlayMode

Read/write

Gets or sets a value that specifies whether the area outside of a light-dismiss UI is darkened. (Inherited from FlyoutBase)

Placement

Read/write

Gets or sets the default placement to be used for the flyout, in relation to its placement target. (Inherited from FlyoutBase)

Target

Read/write

Gets the element to use as the flyout's placement target. (Inherited from FlyoutBase)

 

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>


Requirements (Windows 10 device family)

Device family

Universal, introduced version 10.0.10240.0

API contract

Windows.Foundation.UniversalApiContract, introduced version 1.0

Namespace

Windows.UI.Xaml.Controls
Windows::UI::Xaml::Controls [C++]

Metadata

Windows.Foundation.UniversalApiContract.winmd

Requirements (Windows 8.x and Windows Phone 8.x)

Minimum supported client

Windows 8.1 [Windows Store apps only]

Minimum supported server

Windows Server 2012 R2 [Windows Store apps only]

Minimum supported phone

Windows Phone 8.1 [Windows Runtime apps only]

Namespace

Windows.UI.Xaml.Controls
Windows::UI::Xaml::Controls [C++]

Metadata

Windows.winmd

Attributes

[ContentProperty("")]
[MarshalingBehavior(Agile)]
[Threading(Both)]
[Version(0x06030000)]
[WebHostHidden()]

See also

Object
FlyoutBase
FlyoutPresenter
Attached properties overview
XAML Flyout and MenuFlyout sample
Related controls
Button.Flyout
FlyoutBase.AttachedFlyout
MenuFlyout
Controls list
Controls by function
Commanding sample (Windows 10)

 

 

Show:
© 2016 Microsoft