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.
Login