Creating Application Bar programmatically on Mango

Folks,
This blog will cover how you can create an Application Bar dynamically (programmatically) on Mango platform!

Basic properties of Application Bar -
1. Foreground Color - Color of font and icons used
2. Background Color - Background color of the application bar
3. Opacity - It can be either 0,0.5 or 1.0
4. IsVisible - Either make the application bar visible or invisible
5. IsMenuEnabled - If it is enabled, then then end user will see the application bar menu items or not.
6. Mode - This is either default (in which the icons are shown to the end user along with ellipsis which mazimize the application bar) or Minimized (in which the icons will be hidden and only ellipsis will be shown to the end user)

In addition to above, application bar menu items and application bar icon buttons can be added to the Application Bar by using Menu Items and Buttons properties respectively.

How to programmatically add Application Bar on your Mango Application Page?

You need to get the ApplicationBar instance of the page and set its properties in the following manner -

this.ApplicationBar = new ApplicationBar();

this.ApplicationBar.IsVisible = true;

this.ApplicationBar.Opacity = 1;

this.ApplicationBar.Mode = ApplicationBarMode.Minimized;

The above piece of code creates an application bar which is visible, has opacity of 1 and is in minimized mode.

How to create an Application Bar which is Theme Aware?
I have been asked questions on how to create an application bar which has application bar icon buttons which change their color when the background changes from Light to Dark.

Here is how you can do this- Create a ResourceThemeLocator class which identifies whether the theme selected is Light or Dark and chooses the appropriate Icon Button Image. Then use the class's properties to get the URI of the icon image and use it while constructing the application bar dynamically.

namespace  LaunchersAndChoosers {
public class ThemedResourceLocator {

private readonly Wp7Theme theme;

public ThemedResourceLocator() {
var resource = Application.Current.Resources["PhoneForegroundColor"];
if (resource != null) {
this.theme = (Color)resource == Color.FromArgb(222, 0, 0, 0) ? Wp7Theme.Light : Wp7Theme.Dark;
}
else {
this.theme = Wp7Theme.Dark;
}
}
       public enum Wp7Theme {
Dark,
Light
}  public string SearchIcon {
get {
return GetImagePath("appbar.feature.search.rest.png");
}
}       private string GetImagePath(string fileName) {
var folder = this.theme == Wp7Theme.Dark ? "Images/dark/" : "Images/light/";
return Path.Combine(folder, fileName);
}
}
}
The code is pretty simple - In the constructor of the class, we are retrieving what is Foreground Color - either light (White) or Dark (black) and on the basis of that we are setting theme property which can either be Light or Dark.
SearchIcon is the image we plan to use on the Application bar. If the theme is light (white), the image URI picked will be in location - Images\light and if the theme is dark (black), the image URI picked will be from location - \Image\dark folder.

Note - The name of the imge in both light abd dark folder should be the same. Also remember to set the Build action of images to be used on the Application Bar as Content.

The following code describes how we dynamically create an application bar, add an application bar icon button to it, set the image of the icon button on the basis of the theme and also hook up the click event of the application bar icon button to a callback method.
public partial class MainPage : PhoneApplicationPage {

// Constructor
public MainPage() {
InitializeComponent();
}private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e) {
}
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e) {
ThemedResourceLocator themeIdentifier = new ThemedResourceLocator();
this.ApplicationBar = new ApplicationBar();
this.ApplicationBar.IsVisible = true;
this.ApplicationBar.Opacity = 1;
this.ApplicationBar.Mode = ApplicationBarMode.Minimized;
ApplicationBarIconButton chooseAddressIconButton = new ApplicationBarIconButton(new Uri( themeIdentifier.SearchIcon , UriKind.RelativeOrAbsolute));
chooseAddressIconButton.Click +=
new EventHandler(chooseAddressIconButton_Click);
chooseAddressIconButton.Text ="Choose";
if (this.ApplicationBar != null) {
this.ApplicationBar.Buttons.Add(chooseAddressIconButton);
}
base.OnNavigatedTo(e);
}

void chooseAddressIconButton_Click(object sender, EventArgs e) {
AddressChooserTask addressChooserTask = new AddressChooserTask();
addressChooserTask.Completed +=
new EventHandler<AddressResult>(addressChooserTask_Completed);
addressChooserTask.Show();
}
void addressChooserTask_Completed(object sender, AddressResult e) {
AddressResult res = e as AddressResult;
if (res.TaskResult == TaskResult.OK) {
MessageBox.Show("Display Name : " + res.DisplayName + ", Address Name : " + res.Address);

}} }

In the above code, we have done the following -
1. In the OnNaviagtedTo event, we have initialized an Application Bar , set its properties, added Application Bar Icon Button to the Application Bar and also set the Click event of the Icon Button.
2. On click of button, the "ChooseAddressTask" launcher is shown to the end user where the end user can select any of the saved contacts present in the device.
3. If the user successfully chooses the address,the display name of the contact and address will be displayed in a message Box to end user.