Windows Phone 7 - Creating that elusive reusable Application Bar

22 July 2010

Windows Phone 7 application pages can have an application bar placed on them. However you can’t bind to them and you have to use event handlers on them (rather than commanding via MVVM Light) which means messing up your code behind. I wrote a previous post on how to get a dynamic application bar that talked to the view model using MVVM Light messaging for example.

In fact, you can bind an application bar directly to the page via your View Model!

<phoneNavigation:PhoneApplicationPage
    x:Class="AlphaJax.Phone.HistoryPage"

    SupportedOrientations="Portrait"
    ApplicationBar="{Binding DefaultAppBar}"

In our case, we have a DefaultAppBar defined as a dependency property on our ViewModelBase for binding the Application Bar to the View. We then create the Application Bar programmatically  when the View Model is constructed, see the example below:

public ViewModelBase()
{
    SetUpDefaultAppBar();
}

private void SetUpDefaultAppBar()
{
    var appBar = new ApplicationBar();

    appBar.IsVisible = true;
    appBar.IsMenuEnabled = true;
    appBar.Opacity = 1;
    appBar.ForegroundColor = Color.FromArgb(255, 255, 255, 255);
    appBar.BackgroundColor = Color.FromArgb(255, 0, 0, 0);

    ApplicationBarIconButton turns = new ApplicationBarIconButton(new Uri("Resources/Images/AppBar/button-turns.png", UriKind.Relative))
    turns.Text = "Turns";
    turns.Click += new EventHandler(turns_Click); // handle event within view model

    ApplicationBarMenuItem accountSettings = new ApplicationBarMenuItem("account settings");
    accountSettings.Click += new EventHandler(accountSettings_Click);  // handle event within view model

    ApplicationBarMenuItem appSettings = new ApplicationBarMenuItem("app settings");
    appSettings.Click += new EventHandler(appSettings_Click);  // handle event within view model

    appBar.Buttons.Add(turns);
    appBar.Buttons.Add(create);
    appBar.Buttons.Add(history);
    appBar.MenuItems.Add(accountSettings);
    appBar.MenuItems.Add(appSettings);

    this.DefaultAppBar = appBar;
}

public ApplicationBar DefaultAppBar
{
    get
    {
        return _defaultAppBar;
    }
    set
    {
        _defaultAppBar = value;
        RaisePropertyChanged(() => DefaultAppBar);
    }
}

Disclaimer: It’s possible you may experience a bug (at least in the beta) with the rendering of the page as it redraws to include the application bar binding . This is unfortunate but can be remedied if you manually assign the Application bar in the constructor of the page’s code behind.

this.ApplicationBar = ((ViewModelBase)this.DataContext).DefaultAppBar;

If you need view model specific application bars you can simply add these to other view models, but i would imagine most applications with multiple xaml pages will benefit from the above approach which eliminates the need to copy and paste xaml and cs around your application.

Want to get started?

We would love to help with your next app or game, please do get in touch.