In this tutorial we are going to see how to create a dynamic customizable Application bar in Windows Phone Application development. Application bar is one of the cool feature in Windows Phone and we can get the complete details of how to use the Application bar using the article “Working with Application Bar in WP7”. Here we are going to see how to dynamically create a application bar which can be customizable as per the needs, like we can create application bar buttons, menu items on the go without predefined creation of the application bar while designing the application.         [more]

Let us jump start to see the steps on how to achieve this task in Windows Phone Application development. 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.

Now drag and drop some controls that are required to trigger the dynamic Application bar which can be customized by adding some buttons and menu items one by one. Here we have added few button controls which triggers the event to dynamically create an Application bar as shown in the screen below.

XAML Code:

<phone:PhoneApplicationPage
    x:Class=”F5DebugHowto37.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=”Dynamic 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″>
            <Button Content=”Add Applicaion Bar Button” Height=”103″  HorizontalAlignment=”Left” Margin=”18,25,0,0″ Name=”button1″ VerticalAlignment=”Top” Width=”432″ Click=”button1_Click” />
            <Button Content=”Add Applicaion Bar Menu” Height=”103″ HorizontalAlignment=”Left” Margin=”18,120,0,0″ Name=”button2″ VerticalAlignment=”Top” Width=”432″ />
            <Button Content=”Disable Applicaion Bar Button” Height=”103″ HorizontalAlignment=”Left” Margin=”18,214,0,0″ Name=”button3″ VerticalAlignment=”Top” Width=”432″ />
            <Button Content=”Disable Applicaion Bar Menu” Height=”103″ HorizontalAlignment=”Left” Margin=”18,309,0,0″ Name=”button4″ VerticalAlignment=”Top” Width=”432″ />
            <Button Content=”Change Application Bar Icons” Height=”103″ HorizontalAlignment=”Left” Margin=”18,403,0,0″ Name=”button5″ VerticalAlignment=”Top” Width=”432″ />
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

Now on each of the button click event we need to write out custom code to play around with dynamically creating the Application Bar with the Menus and buttons as per the requirement. To start with first let us add the below code in the using statements,

using Microsoft.Phone.Shell;

Once we added the using statement first we need to add a Application Bar to the application, so in the  button write the below code. Below code first instantiate the Application Bar with an instance and we can customize it later as per the requirement as shown in the code below. In the code below we have few icons which are used in the application bar, we can get some inbuilt icons which are available in the SDK folder (You can get complete details using this article “Working with Application Bar in WP7”).

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 F5DebugHowto37
{
    public partial class MainPage : PhoneApplicationPage
    {
        ApplicationBar appBar;
        ApplicationBarIconButton appBarButton;
        ApplicationBarMenuItem appBarMenu;

        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            if (appBar == null)
            {
                appBar = new ApplicationBar();
            }

            if (appBarButton == null)
            {
                appBarButton = new ApplicationBarIconButton(new Uri(“/Images/appbar.back.rest.png”, UriKind.Relative));
                appBarButton.Text = “Back”;
                appBarButton.Click += buttonback_Click;
                ApplicationBar.Buttons.Add(appBarButton);
            }
        }

        private void buttonback_Click(object sender, EventArgs e)
        {
            MessageBox.Show(“Added Button Click Event!!!”);
        }
    }
}

Let us now write the code for adding Menu Item dynamically to the application using the below code.

private void button2_Click(object sender, RoutedEventArgs e)
{
    if (appBar == null)
    {
        appBar = new ApplicationBar();
    }

    if (appBarMenu == null)
    {
        appBarMenu = new ApplicationBarMenuItem();
        appBarMenu.Text = “Menu Item 1”;
        ApplicationBar.MenuItems.Add(appBarMenu);
        appBarMenu.Click += new EventHandler(MenuBack_Click);
    }
}

private void MenuBack_Click(object sender, EventArgs e)
{
    MessageBox.Show(“Added Menu Click Event!!!”);
}

Here basically we created an instance and assigned the appropriate properties like the text and which event should trigger based on the menu selection etc. Now our next task is to delete the App Bar button and Menu on user clicks as shown in the code below.

private void button3_Click(object sender, RoutedEventArgs e)
{
    if (appBarButton != null)
    {
        if (appBarButton.IsEnabled == true)
        {
            appBarButton.IsEnabled = false;
        }
        else
        {
            appBarButton.IsEnabled = true;
        }
    }
    else
    {
        MessageBox.Show(“No App Bar Button found!!!”);
    }
}

private void button4_Click(object sender, RoutedEventArgs e)
{
    if (appBarMenu != null)
    {
        if (appBarMenu.IsEnabled == true)
        {
            appBarMenu.IsEnabled = false;
        }
        else
        {
            appBarMenu.IsEnabled = true;
        }
    }
    else
    {
        MessageBox.Show(“No App Bar Menu found!!!”);
    }
}

Now finally we can take the task of changing the Icons based on the user selection in the Application bar button icons. To do that we have added few more icons to the image folder and we need to write the below code on the event when it needs to be required as shown in the code below.

private void button5_Click(object sender, RoutedEventArgs e)
        {
            if (appBarButton.IsEnabled == true)
            {
                appBarButton.IconUri = new Uri(“/Images/appbar.cancel.rest.png”, UriKind.Relative);
            }
        }

Now we are done with our code, the code behind will look like below.

Code Behind (Consolidated):

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 F5DebugHowto37
{
    public partial class MainPage : PhoneApplicationPage
    {
        ApplicationBar appBar;
        ApplicationBarIconButton appBarButton;
        ApplicationBarMenuItem appBarMenu;

        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            if (appBar == null)
            {
                appBar = new ApplicationBar();
            }

            if (appBarButton == null)
            {
                appBarButton = new ApplicationBarIconButton(new Uri(“/Images/appbar.back.rest.png”, UriKind.Relative));
                appBarButton.Text = “Back”;
                appBarButton.Click += buttonback_Click;
                ApplicationBar.Buttons.Add(appBarButton);
            }
        }

        private void buttonback_Click(object sender, EventArgs e)
        {
            MessageBox.Show(“Added Button Click Event!!!”);
        }

        private void button2_Click(object sender, RoutedEventArgs e)
        {
            if (appBar == null)
            {
                appBar = new ApplicationBar();
            }

            if (appBarMenu == null)
            {
                appBarMenu = new ApplicationBarMenuItem();
                appBarMenu.Text = “Menu Item 1”;
                ApplicationBar.MenuItems.Add(appBarMenu);
                appBarMenu.Click += new EventHandler(MenuBack_Click);
            }
        }

        private void MenuBack_Click(object sender, EventArgs e)
        {
            MessageBox.Show(“Added Menu Click Event!!!”);
        }

        private void button3_Click(object sender, RoutedEventArgs e)
        {
            if (appBarButton != null)
            {
                if (appBarButton.IsEnabled == true)
                {
                    appBarButton.IsEnabled = false;
                }
                else
                {
                    appBarButton.IsEnabled = true;
                }
            }
            else
            {
                MessageBox.Show(“No App Bar Button found!!!”);
            }
        }

        private void button4_Click(object sender, RoutedEventArgs e)
        {
            if (appBarMenu != null)
            {
                if (appBarMenu.IsEnabled == true)
                {
                    appBarMenu.IsEnabled = false;
                }
                else
                {
                    appBarMenu.IsEnabled = true;
                }
            }
            else
            {
                MessageBox.Show(“No App Bar Menu found!!!”);
            }
        }

        private void button5_Click(object sender, RoutedEventArgs e)
        {
            if (appBarButton.IsEnabled == true)
            {
                appBarButton.IconUri = new Uri(“/Images/appbar.cancel.rest.png”, UriKind.Relative);
            }
        }
    }
}

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 dynamically customize an application bar without affecting any process. We have seen how to add button, add menu item and then disable the buttons and menus dynamically. That’s it from this tutorial on Windows Phone see you all in the next tutorial soon. Mean while Happy Programming!!!