How to change app bar icon buttons and menu items dynamically for Windows Phone

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

This topic shows you how to change the icon buttons and menu items on your app bar dynamically at run time.

If you want to change app bar buttons and menu items at run time, you have to create your app bar by using code. The app bar doesn’t support some common features of controls, such as data-binding. As a result, you can’t change the icon button and menu item text by using Name properties that you set in XAML.

In this topic, you create an app bar with a single button. When the user clicks the button, it toggles between play and pause. Your code changes both the text and icon of the button. You also create a menu item and toggle its text.

For more info about the app bar, see App bar for Windows Phone.

This topic contains the following sections.

• Adding icon button images to your project
• Creating an app bar in code
• Dynamically changing the icon buttons

Adding icon button images to your project

In this procedure, you add play and pause icons for the button. For more info, see App bar icon buttons for Windows Phone.

To add icon button images

1. In Visual Studio, create a new Windows Phone application.

2. In Solution Explorer, right-click your project, point to Add, and then click New Folder. Name the new folder Images.

3. In Solution Explorer, right-click the Images folder, point to Add, and then click Existing Item.

4. Browse to the following location to find the standard icons:

   C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Icons\Dark

5. Select the following files, and then click Add. Rename them as shown.

Original name	New name
transport.play.png	play.png
transport.pause.png	pause.png

6. In Solution Explorer, select both new files.

7. In the Properties window, set the following properties for both new files.

Property	Value
Build Action	Content
Copy to Output Directory	Do not copy

Creating an app bar in code

In this procedure, you create the app bar. Then you add one button and one menu item. For more info, see How to create an app bar using code for Windows Phone.

To create an app bar in code

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

2. At the top of the code, import the following namespace.

   using Microsoft.Phone.Shell;
   

   Imports Microsoft.Phone.Shell
   

3. Add the following event handlers to the class. You add code to these methods in the next procedure.

   private void button1_Click(object sender, EventArgs e)
   {
   }
   
   private void menuItem1_Click(object sender, EventArgs e)
   {
   }
   

   Private Sub button1_Click(ByVal sender As Object, ByVal e As EventArgs)
   
   End Sub
   
   Private Sub menuItem1_Click(ByVal sender As Object, ByVal e As EventArgs)
   
   End Sub
   

4. In the constructor, after the call to InitializeComponent, add the following code. This code initializes a new ApplicationBar object, creates the button and the menu item, sets the initial text and icon, and adds the event handlers for the click event.

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

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

Dynamically changing the icon buttons

In this procedure, you add code to change the icon button image, icon button text, and menu item text. Buttons and MenuItems are both collections of the ApplicationBar object. Because you know the order in which you created the buttons and menu items, and because the collections are typically small, the easiest way to access the objects is by their position in the collection.

In this procedure, you add the code to the click events for testing purposes only. In your own apps, you can change the app bar from other locations.

To dynamically change the icon button

1. Add the following code to the click event handler for the button.

   private void button1_Click(object sender, EventArgs e)
   {
       ApplicationBarIconButton btn = (ApplicationBarIconButton)ApplicationBar.Buttons[0];
   
       if (btn.Text == "play")
       {
           btn.Text="pause";
           btn.IconUri = new Uri("/Images/pause.png", UriKind.Relative);
       }
       else if (btn.Text == "pause")
       {
           btn.Text="play";
           btn.IconUri = new Uri("/Images/play.png", UriKind.Relative);
       }
   }
   

   Private Sub button1_Click(ByVal sender As Object, ByVal e As EventArgs)
   
       Dim btn As ApplicationBarIconButton = ApplicationBar.Buttons(0)
   
       If btn.Text = "play" Then
   
           btn.Text="pause"
           btn.IconUri = New Uri("/Images/pause.png", UriKind.Relative)
   
       ElseIf btn.Text="pause" Then
   
           btn.Text="play"
           btn.IconUri = New Uri("/Images/play.png", UriKind.Relative)
       End If
   End Sub
   

2. Save, build, and run your application.

3. Click the button multiple times to verify that both the icon and the text change and then change back.

To dynamically change the menu item

1. Add the following code to the click event handler for the menu item.

   private void menuItem1_Click(object sender, EventArgs e)
   {
       ApplicationBarMenuItem mi = (ApplicationBarMenuItem)ApplicationBar.MenuItems[0];
   
       if (mi.Text == "menu item state 0")
       {
           mi.Text="menu item state 1";
       }
       else if (mi.Text == "menu item state 1")
       {
           mi.Text="menu item state 0";
       }
   }
   

   Private Sub menuItem1_Click(ByVal sender As Object, ByVal e As EventArgs)
   
       Dim mi As ApplicationBarMenuItem = ApplicationBar.MenuItems(0)
   
       If mi.Text = "menu item state 0" Then
   
           mi.Text="menu item state 1"
   
       ElseIf mi.Text="menu item state 1" Then
   
           mi.Text="menu item state 0"
       End If
   End Sub
   

2. Save, build, and run your application.

3. Click the menu item multiple times to verify that the text changes and then changes back.