Flyouts in Windows Phone 8.1

Introduction

This article shows the Flyouts in Windows Phone 8.1. Flyouts are the Menu type list that will pop-up by pressing a certain control.

 

Step 1

To build a Windows Phone 8.1 application, ensure that you have Visual Studio 2013 and the Windows Phone 8.1 SDK installed in your system.

Go to "New Project". Under "Installed" > "Templates" > "Visual C#" > "Store Apps" select "Windows Phone Apps" then select "Blank App (Windows Pone)" and provide it a name as you choose (here I am using "FlyoutsWP8.1").

Step 2

Navigate to the "MainPage.xaml" section of the project and add a "Button" Control.

<Grid>
    <Button x:Name="NormalFlyoutBtn" Content="Normal Flayout" Margin="113,195,0,388" Grid.ColumnSpan="2" >
</Button>
</Grid>

Now for the Simple Flyout Control add the following code inside the Button control in your XAML, that will pop-up whenever you press the Button.

<Grid>
    <Button x:Name="NormalFlyoutBtn" Content="Normal Flayout" Margin="113,195,0,388" Grid.ColumnSpan="2" >
    <Button.Flyout>
        <Flyout >
            <StackPanel Width="350" Background="White" >
                <TextBlock Text="Windows Phone" FontSize="28" FontFamily="Segoe UI" Foreground="Blue"/>
                <TextBlock Text="Working in Windows Phone 8.1 using C#" FontSize="20" Foreground="Gray" TextWrapping="Wrap" />
                <Button x:Name="flyoutMsg" Content="Do Something" HorizontalAlignment="Right" Background="Gray" Margin="15" />
            </StackPanel>
        </Flyout>
    </Button.Flyout>
    </Button>
</Grid>

Your MainPage will be like this:

Your Flyout that you have added will be shown at runtime when you press the button.

Now compile and run your project.

When you press the button, a Flyout will then be shown as in the following:

Step 3

This is one of the Simple Flyouts, now if you want to pop-up a Menu type flyout with some Menu Item and have a Toggle Button then for that first add a Button so that when we press the button the Menu flyout will pop-up.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="263*"/>
        <ColumnDefinition Width="137*"/>
    </Grid.ColumnDefinitions>

    <Button x:Name="NormalFlyoutBtn" Content="Normal Flayout" Margin="113,195,0,388" Grid.ColumnSpan="2" >
        <Button.Flyout>
            <Flyout >
                <StackPanel Width="350" Background="White" >
                <TextBlock Text="Windows Phone" FontSize="28" FontFamily="Segoe UI" Foreground="Blue"/>
                <TextBlock Text="Working in Windows Phone 8.1 using C#" FontSize="20" Foreground="Gray" TextWrapping="Wrap" />
                <Button x:Name="flyoutMsg" Content="Do Something" HorizontalAlignment="Right" Background="Gray" Margin="15" />
                </StackPanel>
            </Flyout>
        </Button.Flyout>
    </Button>
        <Button x:Name="MenuFlyoutBtn" Content="Menu Flayout" Margin="113,558,0,25" Width="153" Grid.ColumnSpan="2">
    </Button>
</Grid>

Now inside the Button, as we have done in the previous step, add the Menu Flyout.

<Button x:Name="MenuFlyoutBtn" Content="Menu Flayout" Margin="113,558,0,25" Width="153" Grid.ColumnSpan="2">
    <Button.Flyout >
        <MenuFlyout >
            <MenuFlyoutItem Text="Item 1" Background="White" Foreground="Black"/>
            <MenuFlyoutItem Text="Item 2" Background="White" Foreground="Black"/>
            <MenuFlyoutItem Text="Item 3" Background="White" Foreground="Black"/>
            <MenuFlyoutSeparator Background="White" Foreground="Black"/>
            <ToggleMenuFlyoutItem Text="Toggle Item 1" Background="White" Foreground="Black"/>
            <ToggleMenuFlyoutItem Text="Toggle Item 2" IsChecked="True" Background="White" Foreground="Black"/>
        </MenuFlyout>
    </Button.Flyout>
</Button>

Your MainPage will be like this:

Now compile and run the project. When you press the “Menu Flayout” Button a Menu List will then be popped up as in the following:

That's all for the article. If you have any query or any suggestions then please comment below.

I am including the source code also. In the future articles you will see more on Windows Phone 8.1.

Thanks.