Q&A - Flyouts

Have you used flyouts in your Windows 8 apps before? Did you know that you can also leverage that code for your universal Windows apps across both platforms? Here’s how.
The flyout control is a great tool for giving extended context to something that the user of your app is doing, for example, a way of collecting information or confirming an action. Finding the best place to use them is hard but can be very effective for the user experience of an app.

Full screen flyout

Example of Windows Phone full screen flyout

Flyouts have placement modes to make it easier to get the most use of the space on screen. These are Top, Bottom, Left, Right and Full. Windows Phone can only support Top, on by default, and Full. Top will provide a flyout similar to a message dialog and Full will provide a fullscreen flyout experience similar to when you’re using the date picker.

Use in XAML

Windows 8 Flyout Example

How flyout controls are displayed in Windows 8

The easiest, most straightforward way to utilize the Flyout in your universal app is in your XAML. You can do this as follows using a button:


<Button Content=”Click Me”>
    <Button.Flyout>
        <Flyout>
            <Grid>
                <TextBlock FontSize=”18” Text=”Your content here” />
            </Grid>
         </Flyout>
    </Button.Flyout>
</Button>

You can place any controls you wish within the Flyout element which will be displayed when the button is pressed.

Windows Phone 8.1 Flyout

Same code in the Windows Phone project

Use in Code

Like with any application you build for Windows 8 or Windows Phone, you can also generate your UI programmatically.

In this example, we are going to create a Flyout when a button is clicked, however the button click event will be used to create your Flyout.

In your XAML, add a button as follows:


<Button Content="Click Me" Click="OnFlyoutButtonClicked" />

Then in your code behind, you will write your click event method which will generate your flyout. I am going to use a Grid with a simple TextBlock inside like before.


private void OnFlyoutButtonClicked(object sender, RoutedEventArgs e)
{
    var flyout = new Flyout();
    var grid = new Grid();
    grid.Children.Add(new TextBlock { Text = "Your content here", FontSize = 18 });

    flyout.Content = grid;
    flyout.ShowAt(sender as FrameworkElement);
}

This will give you the same results as show above with the XAML example. That’s all there is too it. Another quick and easy guide for leveraging your Windows 8 code into your universal applications.

If you have any questions, feel free to leave them in the comments section below for others to see or contact me directly via my email!

Author James Croft

James is a senior software developer for Black Marble and Microsoft MVP in Windows Development with over 6 years of experience developing applications for the Windows platform. James’s passion for learning new technologies gives him the opportunities to expose them to the wider community through tutorials, lessons learned and best practices through his online blog site, personal YouTube channel, and local communities through talks at events, schools and universities.

More posts by James Croft

Leave a comment