Home > C#, WinRT > Flyouts and Menus in Windows 8.1 XAML Store apps

Flyouts and Menus in Windows 8.1 XAML Store apps

23/07/2013

In Windows 8, the Flyout control is available only for apps that use Javascript and HTML. For XAML apps, we need to implement it manually starting from the base Popup control, or using a third-party library like Callisto.

In Windows 8.1, this is no longer necessary: the Flyout control is now integrated in the base control library. Suppose that we want to show a Flyout when the user taps a button (or an AppBar button as well). We simply need to set its Flyout property:

<Button Content="Show" x:Name="ShowButton">
    <Button.Flyout>
        <Flyout>
            <StackPanel Width="406">
                <TextBlock Text="Insert the value and tap the Send button:" FontSize="16" 
                           FontWeight="SemiLight" FontFamily="Segoe UI"
                           Margin="0,0,0,10"  />
                <TextBox x:Name="ValueTextBox" />
                <Button Content="Send" HorizontalAlignment="Right"
                        FontSize="16" Margin="0,10,0,0" Click="SendButton_Click" />
            </StackPanel>
        </Flyout>
    </Button.Flyout>
</Button>

Using this code, when we press the Show button, the Flyout will be automatically shown, without writing any code:

Flyout

We can change the position of the Flyout using its Placement property.

The Flyout control implements the light-dismiss behavior, i.e. it disappears when the user touches anywhere on the screen outside of the flyout. If we want to hide the control programmatically, for example when the user taps a button inside it (as in our code), we need to call the Hide method:

private void SendButton_Click(object sender, RoutedEventArgs e)
{
    // ...
    ShowButton.Flyout.Hide();
}

Of course, we can also create a Flyout outside of the Button and then show it via code, using the ShowAt method. In this case, we need to pass to the method the object to use as flyout’s placement target.

The Flyout control raises three events, with which we can determine its state: Opening, Opened and Closed (the names are self-explanatory).

Menus are a special kind of flyout that contains a list of options that the user can select. Their usage is similar to the one we have just seen. We need to use the MenuFlyout control:

<Button Content="Show" x:Name="ShowButton">
    <Button.Flyout>
        <MenuFlyout>
            <MenuFlyoutItem Text="Menu option 1" />
            <MenuFlyoutItem Text="Second command" />
            <MenuFlyoutSeparator />
            <ToggleMenuFlyoutItem Text="Last option" />
        </MenuFlyout>
    </Button.Flyout>
</Button>

With this code, we obtain the following result:

MenuFlyout

To handle the selection of a menu item, we use the Click event of MenuFlyoutItem and ToggleMenuFlyoutItem.

Note that, as MenuFlyout inherits from FlyoutBase, the same base class of Flyout, all that we have said before about properties, methods and events of Flyout applies to this control too.

Categories: C#, WinRT
%d bloggers like this: