Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to: Create Application Bar at Runtime in Windows Phone

DZone's Guide to

How to: Create Application Bar at Runtime in Windows Phone

Free Resource

Get gorgeous, multi-touch charts for your iOS application with just a few lines of code.

In this tutorial we are going to learn 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. Let us see the steps on how to test our application which is based on the screen orientation 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 show the details of the network operations as shown in the screen below.

SNAGHTML1554af7c

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.

image

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>
    </phone: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);
        }
    }
}

image

Now that 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:

image

So in this tutorial we have learned how to create an Application Bar at runtime and also we have seen the creating of buttons and menu items that are incorporated with the application bar. In our next tutorial we will see a more enhanced option to reuse 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!!!

.Net developers: use Highcharts, the industry's leading interactive charting library, without writing a single line of JavaScript.

Topics:

Published at DZone with permission of Karthikeyan Anbarasan, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}