WP8 popup menu in the application bar

The Windows Phone mail application has a nice method to bypass the limitation of 4 items in the app bar. When you press the “response” button a pop-up appears, which let you choose “Reply”, “Reply all” or “Forward”. When I needed something in an app, I found that this was not built in the framework. This blog post explains how to create something equal. I’ll explain this in a simple and straight forward example, not using MVVM to keep it simple. If you want to use this, you might consider building a control that has this behaviour, especially if you want to reuse is several times.
What we are going to do is use a content control (grid, stackpanel,…) with a partial transparent background which we are going to show and hide.
The contentcontrol:

<StackPanel Orientation="Vertical" VerticalAlignment="Bottom" x:Name="PopupMenu" Canvas.Top="0" Canvas.Left="0" Background="#C0FFFFFF" Width="480" Height="700" Visibility="Collapsed">
    <Button Content="Button1" Style="{StaticResource ButtonStyle}" Click="Button1_Click">
    <Button Content="Button2" Style="{StaticResource ButtonStyle}" Click="Button2_Click">
</StackPanel>

If the app has a background that isn’t black or white, you could adjust the background color of the contentcontrol.
Next we need to create the app bar item:

 
<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBarIconButton x:Name="Item" IconUri="/Images/Item.png" Text="Item" Click="Item_Click"/>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

When clicked the contentcontrol is set to Visible and the app-bar is collapsed:

private void Item_Click(object sender, EventArgs e)
{
    this.ShowPopupMenu();
}
private void ShowPopupMenu()
{
    this.PopupMenu.Visibility = Visibility.Visible;
    this.ApplicationBar.IsVisible = false;
}

The visibility should be set to hidden when the user presses a button OR when the users presses the backbutton (for certification this is important). The following method hides the pop-up menu. It should be called from every click-event:

private void HidePopupMenu()
{
    this.PopupMenu.Visibility = Visibility.Collapsed;
    this.ApplicationBar.IsVisible = true;
}

And from the “back button pressed event”:

private void PhoneApplicationPage_BackKeyPress(object sender, CancelEventArgs e)
{
if (this.PopupMenu.Visibility == Visibility.Visible)
    {
        this.HidePopup();
        e.Cancel = true;
    }
}

After I build this I found a control in the WindowsPhoneGeek marketplace which has somewhat similar functionality, the PhoneFlipMenu, click here to download. That is a good control, but it is limited to 3 items which are always displayed as a text.
Hope it helps you developing some nice apps.

Comments are closed.