In this article we are going to see how we can dynamically change the icons and buttons in the app bar programmatically for a Windows Phone application. Basically in windows phone application development we can see the app bar has the default icons and buttons that comes with the set of files and folders while the project is been initialized and created with Visual Studio. The app bar will not support the data binding as a result we can change the Icon and the Button by using the Name Property using the XAML code. Open Visual Studio 2012 IDE and create a new Windows Phone project with a valid project name as shown in the screen below.    [more]

Once the project is created, browse through the local folder (C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Icons\Dark) which has some of the default icons that can be used in the project for change of icons on some events or on some button clicks as per the requirement. These icons will be copied to the local environment while installing the Software Development Kit for Windows Phone.

Now lets add some button control which we can use to change the icons on the button click event which dynamically changes based on some of the event rules. One the button is added first go to the property window and change the Build Action property of the Icons which we added to Content. Now add the below code which basically initialized the Application bar dynamically from the code base which should be placed in the constructor so that the app bar will be initialized when the app is loaded as shown in the code below.

Code:

public MainPage()
        {
            InitializeComponent();

            ApplicationBar = new ApplicationBar();

            ApplicationBarIconButton btncamera = new ApplicationBarIconButton();
            btncamera.IconUri = new Uri("camera.png", UriKind.Relative);
            btncamera.Text = "Camera";
            ApplicationBar.Buttons.Add(btncamera);
            btncamera.Click += new EventHandler(button1_Click);

            // Sample code to localize the ApplicationBar
            //BuildLocalizedApplicationBar();
        }

Here in the above code basically we load the Application bar with some base default image for the icon, now let us add some code on button click to change the icon dynamically from the list of available icons in the application project as shown in the code below.

Code:

private void button1_Click(object sender, EventArgs e)
        {
            ApplicationBarIconButton btnCam = (ApplicationBarIconButton)ApplicationBar.Buttons[0];

            if (btnCam.Text == "Camera")
            {
                btnCam.Text = "pause";
                btnCam.IconUri = new Uri("download.png", UriKind.Relative);
            }
            else if (btnCam.Text == "pause")
            {
                btnCam.Text = "close";
                btnCam.IconUri = new Uri("close.png", UriKind.Relative);
            }
        }

Now 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.