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

Articolo
05/20/2016

[ 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

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

In Visual Studio, create a new Windows Phone application.
In Solution Explorer, right-click your project, point to Add, and then click New Folder. Name the new folder Images.
In Solution Explorer, right-click the Images folder, point to Add, and then click Existing Item.
Browse to the following location to find the standard icons:

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Icons\Dark
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

In Solution Explorer, select both new files.
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

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

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

using Microsoft.Phone.Shell;

Imports Microsoft.Phone.Shell

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

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

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

Save, build, and run your application.
Click the button multiple times to verify that both the icon and the text change and then change back.

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

Save, build, and run your application.
Click the menu item multiple times to verify that the text changes and then changes back.

Condividi tramite