Flyout Flyout Flyout Flyout Class
Definition
public : class Flyout : FlyoutBase, IFlyout
struct winrt::Windows::UI::Xaml::Controls::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
Tip
For more info, design guidance, and code examples, see Flyouts.
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.
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:
- FlyoutBase.AttachedFlyout: an attached property that associates a Flyout with a particular UI element (this can be any FrameworkElement derived class).
- ShowAttachedFlyout: a static method that can determine whether a flyout is already associated with a UI element through a FlyoutBase.AttachedFlyout assignment. If so, the method calls ShowAt internally, using the FrameworkElement that you specified.
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.
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() Flyout() |
Initializes a new instance of the Flyout class. |
Properties
Methods
Events
Closed Closed Closed Closed |
Occurs when the flyout is hidden. (Inherited from FlyoutBase) |
Closing Closing Closing Closing |
Occurs when the flyout starts to be hidden. (Inherited from FlyoutBase) |
Opened Opened Opened Opened |
Occurs when the flyout is shown. (Inherited from FlyoutBase) |
Opening Opening Opening Opening |
Occurs before the flyout is shown. (Inherited from FlyoutBase) |
See also
Feedback
We'd love to hear your thoughts. Choose the type you'd like to provide:
Our feedback system is built on GitHub Issues. Read more on our blog.
Loading feedback...