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

Applies to: Windows Phone 8 and Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

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.

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

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;
    
  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)
    {
    }
    
    
    
  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);
    

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);
        }
    }
    
  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";
        }
    }
    
  2. Save, build, and run your application.

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

Show:
© 2014 Microsoft