How to create an app bar using code for Windows Phone

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

You can create an Application Bar by using C# or Visual Basic code that provides users with quick access to an application’s most common tasks. To decide whether you should create your Application Bar in XAML or in code, see App bar for Windows Phone.

The following illustration shows an example of an Application Bar, after the user has expanded it.

This topic contains the following sections.

• Creating an Application Bar in Code
• Handling the Click Events
• Related Topics

Creating an Application Bar in Code

You can add an Application Bar to your application entirely in code, without editing the XAML file. This procedure assumes that you have a Windows Phone application that has a page. Before you can use images for icon buttons on the Application Bar, you must first add them to your application. For more information, see App bar icon buttons for Windows Phone.

To create an Application Bar in code

1. Open the code-behind file for your page in the editor.

2. At the top of the code, add the following statement.

   using Microsoft.Phone.Shell;
   

   Imports Microsoft.Phone.Shell
   

3. In the constructor for the page, after the call to InitializeComponent, add the following code. This code initializes a new ApplicationBar object and assigns it to the ApplicationBar property of the page.

   ApplicationBar = new ApplicationBar();
   

   ApplicationBar = new ApplicationBar()
   

4. Set the Application Bar properties as needed. For more information about the properties, see App bar for Windows Phone.

   ApplicationBar.Mode = ApplicationBarMode.Default;
   ApplicationBar.Opacity = 1.0; 
   ApplicationBar.IsVisible = true;
   ApplicationBar.IsMenuEnabled = true;
   

   ApplicationBar.Mode = ApplicationBarMode.Default
   ApplicationBar.Opacity = 1.0
   ApplicationBar.IsVisible = true
   ApplicationBar.IsMenuEnabled = true
   

5. Create one or more ApplicationBarIconButton objects as needed. Set the icon images and button text, and then add them to the Application Bar. If you do not set the button text, a run-time exception occurs.

   ApplicationBarIconButton button1 = new ApplicationBarIconButton();
   button1.IconUri = new Uri("/Images/YourImage.png", UriKind.Relative);
   button1.Text = "button 1";
   ApplicationBar.Buttons.Add(button1);
   

   Dim button1 as ApplicationBarIconButton = new ApplicationBarIconButton()
   button1.IconUri = new Uri("/Images/YourImage.png", UriKind.Relative)
   button1.Text = "button 1"
   ApplicationBar.Buttons.Add(button1)
   

6. The menu items are optional. Create one or more ApplicationBarMenuItem objects as needed. Set the text, and then add them to the Application Bar.

   ApplicationBarMenuItem menuItem1 = new ApplicationBarMenuItem();
   menuItem1.Text = "menu item 1";
   ApplicationBar.MenuItems.Add(menuItem1);
   

   Dim menuItem1 as ApplicationBarMenuItem = new ApplicationBarMenuItem()
   menuItem1.Text = "menu item 1"
   ApplicationBar.MenuItems.Add(menuItem1)
   

7. The following is an example of a completed Application Bar. You add click events and handlers in the next procedure.

   public MainPage()
   {
       InitializeComponent();
   
       ApplicationBar = new ApplicationBar();
   
       ApplicationBar.Mode = ApplicationBarMode.Default;
       ApplicationBar.Opacity = 1.0; 
       ApplicationBar.IsVisible = true;
       ApplicationBar.IsMenuEnabled = true;
   
       ApplicationBarIconButton button1 = new ApplicationBarIconButton();
       button1.IconUri = new Uri("/Images/YourImage.png", UriKind.Relative);
       button1.Text = "button 1";
       ApplicationBar.Buttons.Add(button1);
   
       ApplicationBarMenuItem menuItem1 = new ApplicationBarMenuItem();
       menuItem1.Text = "menu item 1";
       ApplicationBar.MenuItems.Add(menuItem1);
   }
   

   Public Sub New()
       InitializeComponent()
   
       ApplicationBar = new ApplicationBar()
   
       ApplicationBar.Mode = ApplicationBarMode.Default
       ApplicationBar.Opacity = 1.0
       ApplicationBar.IsVisible = true
       ApplicationBar.IsMenuEnabled = true
   
       Dim button1 as ApplicationBarIconButton = new ApplicationBarIconButton()
       button1.IconUri = new Uri("/Images/YourImage.png", UriKind.Relative)
       button1.Text = "button 1"
       ApplicationBar.Buttons.Add(button1)
   
       Dim menuItem1 as ApplicationBarMenuItem = new ApplicationBarMenuItem()
       menuItem1.Text = "menu item 1"
       ApplicationBar.MenuItems.Add(menuItem1)
   End Sub
   

Handling the Click Events

The icon buttons and menu items expose click events that you can handle in your code.

To handle the click events

1. Open the code-behind file for your page in the editor.

2. For each icon button and menu item, identify the event to call when the user clicks. The following is an example of the Application Bar from the previous procedure with the click events identified.

   ApplicationBarIconButton button1 = new ApplicationBarIconButton();
   button1.IconUri = new Uri("/Images/YourImage.png", UriKind.Relative);
   button1.Text = "button 1";
   ApplicationBar.Buttons.Add(button1);
   button1.Click += new EventHandler(button1_Click);
   
   ApplicationBarMenuItem menuItem1 = new ApplicationBarMenuItem();
   menuItem1.Text = "menu item 1";
   ApplicationBar.MenuItems.Add(menuItem1);
   menuItem1.Click += new EventHandler(menuItem1_Click);
   

   Dim button1 as ApplicationBarIconButton = new ApplicationBarIconButton()
   button1.IconUri = new Uri("/Images/YourImage.png", UriKind.Relative)
   button1.Text = "button 1"
   ApplicationBar.Buttons.Add(button1)
   AddHandler button1.Click, AddressOf button1_Click
   
   Dim menuItem1 as ApplicationBarMenuItem = new ApplicationBarMenuItem()
   menuItem1.Text = "menu item 1"
   ApplicationBar.MenuItems.Add(menuItem1)
   AddHandler menuItem1.Click, AddressOf menuItem1_Click
   

3. For each icon button and menu item, add the event to call when the user clicks. Add the code inside the page class. The following is an example of the click events for the Application Bar from the previous procedure.

   private void button1_Click(object sender, EventArgs e)
   {
       MessageBox.Show("Button 1 works!");
       //Do work for your application here.
   }
   
   private void menuItem1_Click(object sender, EventArgs e)
   {
       MessageBox.Show("Menu item 1 works!");
       //Do work for your application here.
   }
   

    Private Sub button1_Click(ByVal sender As Object, ByVal e As EventArgs)
   
       MessageBox.Show("Button 1 works!")
       'Do work for your application here.
   End Sub
   
   
   Private Sub menuItem1_Click(ByVal sender As Object, ByVal e As EventArgs)
   
       MessageBox.Show("Menu item 1 works!")
       'Do work for you application here.  
   End Sub
   

See Also

Reference

ApplicationBar

Other Resources

How to create an app bar using XAML for Windows Phone

Walkthrough: Creating an app bar test app for Windows Phone

Code Samples for Windows Phone