Menus in Windows Phone 7

Introduction

In this article we are going to explore how to create menus in Windows Phone 7. Then we will talk in more details about how to easily do whatever menu item we want to display. Here in this article I want something even simpler. When a user performs a "touch and hold", I want to popup a simple context menu (4 or 5 items). Here we will be talking about, whenever we click on the button to show the menus, then we will see that a popup of a menu item will display and whenever we select any menu item such as Menu I then on the selection of the menu item it will tell us that you have selected the item named Menu I. Now to do that type of application you have to follow the steps given below.

Step 1: In this step first of all we are going to open a Windows Phone application; let's see how you will open it.

• Go to Visual Studio 2010
• File->New->Project
• Select the template named Silverlight for Windows Phone
• Select the Windows Phone application
• Give it a name as you want.

Step 2: In this step we will see the code for the popup control which is given below.

Code:

<Popup x:Name="MyContextMenuPopup" Height="250" Width="300" Margin="90,0,90,80" VerticalAlignment="Bottom" HorizontalAlignment="Center">

<ListBox SelectionChanged="ListBox_SelectionChanged" FontFamily="Comic Sans MS" FontSize="28">

<ListBox.Background>

<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

<GradientStop Color="Black" Offset="0" />

<GradientStop Color="#FFF8D0C6" Offset="1" />

</LinearGradientBrush>

</ListBox.Background>

<ListBoxItem Content="Menu I"/>

<ListBoxItem Content="Menu II"/>

<ListBoxItem Content="Menu III"/>

<ListBoxItem Content="Menu IV"/>

<ListBoxItem Content="Menu V"/>

</ListBox>

</Popup>

Step 3: In this step we will see that how we will show that popup on click of the button via code which is given below.

Code:

private void button1_Click(object sender, RoutedEventArgs e)

{

MyContextMenuPopup.IsOpen = true;

}

Step 4: In this step we will see the code on selection of ListItem which is used to select the item of the menu and display it on the TextBlock given below.

Code:

private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

MyContextMenuPopup.IsOpen = false;

var selected = ((ListBox)MyContextMenuPopup.Child).SelectedItem;

//textBlock1.Text = ((ListBoxItem)selected).Content.ToString();

textBlock1.Text = "You have selected " + ((ListBoxItem)selected).Content.ToString();

}

Step 5: In this step we will see the complete code for the MainPage.xaml.cs file which is given below.

Code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

namespace Mymenus

{

public partial class MainPage : PhoneApplicationPage

{

// Constructor

public MainPage()

{

InitializeComponent();

SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;

}

private void button1_Click(object sender, RoutedEventArgs e)

{

MyContextMenuPopup.IsOpen = true;

}

private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

MyContextMenuPopup.IsOpen = false;

var selected = ((ListBox)MyContextMenuPopup.Child).SelectedItem;

//textBlock1.Text = ((ListBoxItem)selected).Content.ToString();

textBlock1.Text = "You have selected " + ((ListBoxItem)selected).Content.ToString();

}

}

}

Step 6: In this step we will see the code for the MainPage.xaml page which is given below.

Code:

<phone:PhoneApplicationPage

x:Class="Mymenus.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

FontFamily="{StaticResource PhoneFontFamilyNormal}"

FontSize="{StaticResource PhoneFontSizeNormal}"

Foreground="{StaticResource PhoneForegroundBrush}"

SupportedOrientations="Portrait" Orientation="Portrait"

shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->