Application Bar in Windows Phone 8 Application

This Article shows how to create Application Bar or AppBar in Windows Phone 8 Application. In the previous articls, we saw:

• How to install Windows Phone 8 SDK
• Create your first Windows Phone 8 Application
• Page Navigation in Windows Phone 8 Application

Application bar is a row of Icon buttons, menuitems and ellipsis (Three dots at the edge of application bar) placed at the bottom of the page. It is recommended to use Application bar instead of creating your own Menu. We can add up to 4 Icon Buttons with optional MenuItems.

Let's Begin:

1. Create Application Bar using XAML Code:
Create a New Windows Phone Application and select Windows Phone 8.0 as a target Windows Phone OS for this application and click on OK. Go to
C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Icons\Dark and copy the icons you want to use. You can also use your own icons with 48*48 size with a transparent background. Paste the icons in Assets folder of your project.

Open MainPage.xaml and go to the end PhoneApplicationPage

And add following lines of code:

<!--Create Application Bar--> <phone:PhoneApplicationPage.ApplicationBar>        <shell:ApplicationBar IsMenuEnabled="True" Mode="Default">        <!--Add icon buttons to Application Bar-->        <shell:ApplicationBarIconButton IconUri="/Assets/phone.png" Text="Call" Click="ApplicationBarIconButton_Click_1"></shell:ApplicationBarIconButton>        <shell:ApplicationBarIconButton IconUri="/Assets/email.png" Text="Email" Click="ApplicationBarIconButton_Click_2"></shell:ApplicationBarIconButton>        <shell:ApplicationBarIconButton IconUri="/Assets/search.png" Text="Search" Click="ApplicationBarIconButton_Click_3"></shell:ApplicationBarIconButton>        <!--Add menu items to Application Bar-->        <shell:ApplicationBar.MenuItems>               <shell:ApplicationBarMenuItem Text="About this App" Click="ApplicationBarMenuItem_Click_1">               </shell:ApplicationBarMenuItem>        </shell:ApplicationBar.MenuItems>        </shell:ApplicationBar> </phone:PhoneApplicationPage.ApplicationBar>

In the preceding Code, we create an Application Bar and then add an icon button and MenuItem to it. IconUri property is used to set the URI of the icon to use for the ApplicationBarIconButton. We have also created click events for ApplicationBarIconButton as well as for ApplicationBarMenuItem.
MainPage.xaml.cs code:

private void ApplicationBarIconButton_Click_1(object sender, EventArgs e) {         MessageBox.Show("Call Button Clicked!"); } private void ApplicationBarIconButton_Click_2(object sender, EventArgs e) {         MessageBox.Show("Email Button Clicked!"); } private void ApplicationBarIconButton_Click_3(object sender, EventArgs e) {         MessageBox.Show("Search Button Clicked!"); } private void ApplicationBarMenuItem_Click_1(object sender, EventArgs e) {         //Navigate to About Page         NavigationService.Navigate(new Uri("/About.xaml",UriKind.Relative)); }

Preview:

We can also create an Application bar from the Property window of PhoneApplicationPage. Click on a new button for creating ApplicationBar in PhoneApplicationPage's Property.

Click on Button property for creating a collection of Icon Button or Click on MenuItems for creating ApplicationBarMenuItem.

Now add ApplicationBarIcon Button and set IconUri as well as Text properties and then click on OK.

Now Build and Run the application.
Preview:

2. Creating an Application Bar in C# Code:
Go to .cs code of Windows Phone Page and add using Microsoft.Phone.Shell namespace. Now add following lines of code (I have added comments to the code so that you can easily understand the code.)

public partial class MainPage : PhoneApplicationPage {        // Constructor        public MainPage()        {             InitializeComponent();             //Creating instance of Application bar and Set variour property like opacity , Mode etc             ApplicationBar = new ApplicationBar();             ApplicationBar.Mode = ApplicationBarMode.Default;             ApplicationBar.Opacity = 1.0;             ApplicationBar.IsVisible = true;             ApplicationBar.IsMenuEnabled = true;             //Creating instance of ApplicationBarIconButton             ApplicationBarIconButton applicationbariconbutton = new ApplicationBarIconButton();             //Set the icon for applicationbariconbutton             applicationbariconbutton.IconUri = new Uri("/Assets/Email.png",UriKind.Relative);             //Set the label for applicationbariconbutton             applicationbariconbutton.Text = "Email";             //Add button on Application Bar             ApplicationBar.Buttons.Add(applicationbariconbutton);             //applicationbariconbutton Click Event             applicationbariconbutton.Click += applicationbariconbutton_Click;        }        //Event generated for .cs generated application bar        void applicationbariconbutton_Click(object sender, EventArgs e)        {             MessageBox.Show("Email Button Clicked!");        } }

Preview:

Properties of ApplicationBar:

1. Mode: Mode property defines the size of Application Bar when it first appears on a page.

2. Opacity: Opacity can range from 0.0(Complete transparent) to 1.0(Opaque).

I hope you like this. Thanks.

[Download Source Code via Google Drive]