Post
Ask Question

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.

Popup in Windows Phone  Flyout in Windows Phone

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.

  1. <Grid>  
  2.     <Button x:Name="NormalFlyoutBtn" Content="Normal Flayout" Margin="113,195,0,388" Grid.ColumnSpan="2" >  
  3. </Button>  
  4. </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.

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

Your MainPage will be like this:

Main Page in Windows Phone

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:

Normal Flyout in Windows Phone

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.

  1. <Grid>  
  2.     <Grid.ColumnDefinitions>  
  3.         <ColumnDefinition Width="263*"/>  
  4.         <ColumnDefinition Width="137*"/>  
  5.     </Grid.ColumnDefinitions>  
  6.   
  7.     <Button x:Name="NormalFlyoutBtn" Content="Normal Flayout" Margin="113,195,0,388" Grid.ColumnSpan="2" >  
  8.         <Button.Flyout>  
  9.             <Flyout >  
  10.                 <StackPanel Width="350" Background="White" >  
  11.                 <TextBlock Text="Windows Phone" FontSize="28" FontFamily="Segoe UI" Foreground="Blue"/>  
  12.                 <TextBlock Text="Working in Windows Phone 8.1 using C#" FontSize="20" Foreground="Gray" TextWrapping="Wrap" />  
  13.                 <Button x:Name="flyoutMsg" Content="Do Something" HorizontalAlignment="Right" Background="Gray" Margin="15" />  
  14.                 </StackPanel>  
  15.             </Flyout>  
  16.         </Button.Flyout>  
  17.     </Button>  
  18.         <Button x:Name="MenuFlyoutBtn" Content="Menu Flayout" Margin="113,558,0,25" Width="153" Grid.ColumnSpan="2">  
  19.     </Button>  
  20. </Grid> 

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

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

Your MainPage will be like this:

Desiging Windows Phone Page

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:

Flyout options in Windows Phone

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.


Similar Articles