In this tutorial we are going to see how to programmatically create an Application Bar at runtime in Windows Phone application development. Application Bar is a set of Icons that can be configured at the bottom of the application for each page or also we can configure it for multiple pages. These buttons can be used to navigate to frequently used pages across the application which enables users to navigate quickly and easily. To get a clear idea on using the application bar you can refer to the article “Working with Application Bar in WP7”. We can create Application Bar directly using the XAML code or using with C# code behind at run time programmatically.    [more]

Let us see the steps on how to create the application bar at runtime in windows phone. To start with Open Visual Studio 2010 IDE and create a new Silverlight for Windows Phone project with a valid project name as shown in the screen below. Once the project is created add some controls which are used to create the application bar as shown in the screen below.

Basically our next step is to design our page with some controls, but since we are going to add the application bar at runtime we are going to just change the page name and application title as shown in the screen below.

We can see a commented code in the XAML code which is the default code for the Application bar creation using XAML Code, since we are going to create the application bar at runtime we can delete that code as shown below.

XAML Code:

<phone:PhoneApplicationPage
x:Class=”F5debugHowto36.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=”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=”F5debug How to Series” Style=”{StaticResource PhoneTextNormalStyle}”/>
<TextBlock x:Name=”PageTitle” Text=”App Bar” 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>

    <!–Sample code showing usage of ApplicationBar–>
<!–<phone:PhoneApplicationPage.ApplicationBar>–>
<shell:ApplicationBar IsVisible=”True” IsMenuEnabled=”True”>
<shell:ApplicationBarIconButton IconUri=”/Images/appbar_button1.png” Text=”Button 1″/>
<shell:ApplicationBarIconButton IconUri=”/Images/appbar_button2.png” Text=”Button 2″/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text=”MenuItem 1″/>
<shell:ApplicationBarMenuItem Text=”MenuItem 2″/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
PhoneApplicationPage.ApplicationBar>–>

</phone:PhoneApplicationPage>

Once we deleted the default application bar XAML code, now go to the code behind and add the below code to the page constructor which basically creates the application bar on page load as shown in the code below. Note we need to add using Microsoft.Phone.Shell; handler at the top to create an instance of the Application Bar.

Code Behind:

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;
using Microsoft.Phone.Shell;

namespace F5debugHowto36
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();

this.ApplicationBar = new ApplicationBar();
this.ApplicationBar.IsVisible = true;
this.ApplicationBar.Opacity = 1;
this.ApplicationBar.IsMenuEnabled = true;
this.ApplicationBar.Mode = ApplicationBarMode.Minimized;
}
}
}

The above code is the basic structure to create the application bar at runtime, now we need to add the buttons and menus which are going to play a major role for the application bar for navigation. To add buttons and menu items add the below code to the same event.

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;
using Microsoft.Phone.Shell;

namespace F5debugHowto36
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();

this.ApplicationBar = new ApplicationBar();
this.ApplicationBar.IsVisible = true;
this.ApplicationBar.Opacity = 1;
this.ApplicationBar.IsMenuEnabled = true;
this.ApplicationBar.Mode = ApplicationBarMode.Minimized;

ApplicationBarIconButton apButon = new ApplicationBarIconButton();
apButon.IconUri = new Uri(“/Images/home.png”, UriKind.Relative);
apButon.Text = “Home”;
this.ApplicationBar.Buttons.Add(apButon);

ApplicationBarIconButton apButon1 = new ApplicationBarIconButton();
apButon1.IconUri = new Uri(“/Images/info.png”, UriKind.Relative);
apButon1.Text = “Info”;
this.ApplicationBar.Buttons.Add(apButon1);

ApplicationBarMenuItem mItem = new ApplicationBarMenuItem();
mItem.Text = “About”;
this.ApplicationBar.MenuItems.Add(mItem);
}
}
}

Now we are done with our code, just run the application by pressing F5 directly from the keyboard or we can use the Build and execute the project option from the tool bar to run the application. Once the Build is successful we can see the Windows Phone emulator with the application and the expected outputs as shown in the screens below.

Output Screen:

So in this tutorial we have seen how to create an Application bar at runtime and also we have seen on creating the buttons and menuitems that are incorporated with the application bar. In our next tutorial we will see much more enhanced option of reusing the application bar with multiple pages instead of copying the same code to all the page inside the application project. That’s it from this tutorial on Windows Phone see you all in the next tutorial soon. Mean while Happy Programming!!!