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

    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <!--TitleGrid is the name of the application and page title-->

        <Grid x:Name="TitleGrid" Grid.Row="0">

            <TextBlock Text="My Simple menu" x:Name="textBlockPageTitle" Style="{StaticResource PhoneTextTitle1Style}" FontFamily="Comic Sans MS" FontSize="56">

                 <TextBlock.Foreground>

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

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

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

                    </LinearGradientBrush>

                 </TextBlock.Foreground>

            </TextBlock>

        </Grid>

        <!--ContentGrid is empty. Place new content here-->

        <Grid x:Name="ContentGrid" Grid.Row="1">

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

            <Button Content="Click to see menu" Height="108" HorizontalAlignment="Left" Margin="82,45,0,0" Name="button1"

                    VerticalAlignment="Top" Width="308" Click="button1_Click" FontFamily="Comic Sans MS" FontSize="32">

                <Button.Background>

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

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

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

                    </LinearGradientBrush>

                </Button.Background>

            </Button>

            <TextBlock Height="72" HorizontalAlignment="Left" Margin="0,160,0,0" Name="textBlock1" Text="Show Menu Item" VerticalAlignment="Top" Width="474" FontFamily="Comic Sans MS" FontSize="36" />

            <Grid.Background>

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

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

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

                </LinearGradientBrush>

            </Grid.Background>

        </Grid>

    </Grid>
</phone:PhoneApplicationPage>

 

Step 7: In this step we will see the design of the MainPage.xaml file which is given below.

 

 

Step 8: In this step we are going to run the application by pressing F5 and the output regarding that is given below.

 

Output1: In this output you see it's default whenever we run the application which is shown in the figure given below.

 

Output2: In this output we will see that whenever we will click on the button then it will shown a popup of menu item which is given below.

 

Output3: In this output whenever we select any menu item then it will display on the TextBlock above which is shown in the figure given below.

 

Output4: Further the same execution will display in the figure but the selection item is changed; it shows that you have selected Menu III.

 

Here are some other useful resources which may help you.

Digital Clock in Windows Phone 7

Implementing MenuList Through Pivot Control in Windows Phone 7

Working with Menus in C#

Calculator in Windows Phone

Display Video in Windows Phone 7