Windows Phone Application Bar

We can see how to use Application Bar effectively for Windows Phone Application development.


The Application Bar is a set of Icons that can be configured at the bottom of an application for each
page or for multiple pages. These buttons can be used to navigate to frequently used pages across
the application, which makes navigation for users quick and easy. It automatically adjusts its icons
and buttons as the screen orientation changes.

create a project with the name ApplicationBar and MainPage.xaml with following given layout


<phone:PhoneApplicationPage
    x:Class="ApplicationBar.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="696"
    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="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>
    </Grid>

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar.next.rest.png" Text="Back"
Click="NextButton_Click"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar.add.rest.png" Text="Add"
Click="AddButton_Click"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar.back.rest.png" Text="Front"
Click="BackButton_Click"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="Home" Click="HomeMenuutton_Click"/>
                <shell:ApplicationBarMenuItem Text="Submit" Click="SubmitMenuButton_Click"/>
                <shell:ApplicationBarMenuItem Text="Help" Click="HelpMenuButton_Click"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>


</phone:PhoneApplicationPage>

now MainPage.xaml.cs code can be written as follows for the testing of work behaviour of the program.


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 ApplicationBar
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }
        private void NextButton_Click(object sender, EventArgs e)
        {
            MessageBox.Show("Next Application Bar Is Clicked!!!");
        }
        private void AddButton_Click(object sender, EventArgs e)
        {
            MessageBox.Show("Add Application Bar Is Clicked!!!");
        }
        private void BackButton_Click(object sender, EventArgs e)
        {
            MessageBox.Show("Back Application Bar Is Clicked!!!");
        }
        private void HomeMenuutton_Click(object sender, EventArgs e)
        {
            MessageBox.Show("Home Menu Is Clicked!!!");
        }
        private void SubmitMenuButton_Click(object sender, EventArgs e)
        {
            MessageBox.Show("Submit Menu Is Clicked!!!");
        }
        private void HelpMenuButton_Click(object sender, EventArgs e)
        {
            MessageBox.Show("Help Menu Is Clicked!!!");
        }
    }
}

after running the code we can see the following output as follows