Setting up an ApplicationBar using XAML

As the sample code from Microsoft uses code to create an application bar, I thought it might be interesting to show how this is done using XAML only as I find it a bit cleaner.

First thing to remember is that in order for a PhoneApplicationPage to make use of a ApplicationBar created in XAML, it needs to first have been declared before the page is instantiated. This means adding the definition to the parent’s resources, in this case App.xaml. If you don’t do this, you’ll end up dancing with null reference exceptions.

So, to reach the ApplicationBar class at all, we need a reference to Microsoft.Phone.Shell.


Next, we need to add this namespace to App.xaml.


We then create a resource that we will use to bind later in our page.

        <shell:ApplicationBar x:Key="appBar">

Now we have an empty application bar ready for use. To make it a bit more interesting, we’ll add a button on it.

        <shell:ApplicationBar x:Key="appBar">
                <shell:ApplicationBarIconButton IconUri="/Images/"/>

(Remember: Build Action on icons need to be set to Content)

For fun, we’ll add some menu items as well.

        <shell:ApplicationBar x:Key="appBar" IsMenuEnabled="True">
                <shell:ApplicationBarIconButton IconUri="/Images/"/>
                <shell:ApplicationBarMenuItem Text="Test 1"/>
                <shell:ApplicationBarMenuItem Text="Test 2"/>
                <shell:ApplicationBarMenuItem Text="Test 3"/>

All values can be databound, so you can do a lot of fun quite easily using XAML only.

To enable the application bar to show menu items (ie. show the little toggle button “…”) you have to set IsMenuEnabled to true as in the example above.

That should be sufficient for now, so let’s bind it up to our application page.

The PhoneApplicationPage class exposes a property called ApplicationBar, and you can bind resources to it like most other properties in Silverlight.

Here’s how we do it:

<phoneNavigation:PhoneApplicationPage x:Class="ApplicationBarExample1.MainPage" xmlns="" xmlns:x="" xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation" xmlns:d="" xmlns:mc="" mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}"

ApplicationBar="{StaticResource appBar}">

And here’s the result:



How about binding the visibility of the application bar to a toggle button?

Just add this in your page (notice the IsChecked databinding):

<wp:ToggleControlSwitch Content="Toggle bar" Height="60" HorizontalAlignment="Left" Margin="20,23,0,0" Name="toggleControlSwitch1" VerticalAlignment="Top" Width="200" IsChecked="{Binding Path=ApplicationBar.Visible,ElementName=appPage,Mode=TwoWay}" />

toggleoff toggleon

No code involved whatsoever 🙂


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: