Web and Windows Phone 7 by Ben Cull

Using Multiple Application Bars in Windows Phone Development

Posted on December 12th, 2011 by Benjii

You know when you select multiple emails and the application bar swaps out for a different one? No? We’ll get ready to learn. This trick looks much better than enabling and disabling menu items on your application bar and is dead simple to achieve.

Step 1: Create your Application Bars

Make sure you have the shell namespace reference at the top of your PhoneApplicationPage:

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

Create your application bars and add them to your page resources using the following XAML. I’ve created three, naming them “DefaultAppBar”, “SiungleSelectionAppBar” and “MultiSelectionAppBar”.

<phone:PhoneApplicationPage.Resources>
    <shell:ApplicationBar x:Key="DefaultAppBar" IsVisible="True">
        <shell:ApplicationBarIconButton x:Name="mnuAdd" IconUri="/icons/appbar.add.rest.png" IsEnabled="True" Text="Add" Click="mnuAdd_Click"/>
    </shell:ApplicationBar>
    <shell:ApplicationBar x:Key="SingleSelectionAppBar" IsVisible="True">
        <shell:ApplicationBarIconButton x:Name="mnuPin" IconUri="/icons/appbar.pushpin.png" IsEnabled="True" Text="Pin" Click="mnuPin_Click" />
        <shell:ApplicationBarIconButton x:Name="mnuDelete" IconUri="/icons/appbar.delete.rest.png" IsEnabled="True" Text="Delete" Click="mnuDelete_Click"/>
        <shell:ApplicationBarIconButton x:Name="mnuEdit" IconUri="/icons/appbar.edit.rest.png" IsEnabled="True" Text="Edit" Click="mnuEdit_Click"/>
    </shell:ApplicationBar>
    <shell:ApplicationBar x:Key="MultiSelectionAppBar" IsVisible="True">
        <shell:ApplicationBarIconButton x:Name="mnuDeleteMulti" IconUri="/icons/appbar.delete.rest.png" IsEnabled="True" Text="Delete" Click="mnuDelete_Click"/>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.Resources>

 

Step 2: Use Code to Swap Between Them

Firstly, we need to set a default application bar to load with the page. We can do this by adding the following code to the constructor:

ApplicationBar = (Microsoft.Phone.Shell.ApplicationBar)Resources["DefaultAppBar"];

It’s actually the exact same code to change the application bar to one of our other ones. Check out the following code I use to swap between them when my list fires a selection changed event:

if (list.SelectedItems.Count == 1)
{
    ApplicationBar = (Microsoft.Phone.Shell.ApplicationBar)Resources["SingleSelectionAppBar"];
}
else if (list.SelectedItems.Count > 1)
{
    ApplicationBar = (Microsoft.Phone.Shell.ApplicationBar)Resources["MultiSelectionAppBar"];
}
else
{
    ApplicationBar = (Microsoft.Phone.Shell.ApplicationBar)Resources["DefaultAppBar"];
}

That’s it. You’ll also notice that when you change application bars, it uses a cool swoosh down and then back up animation. All for free.

4 Responses to “Using Multiple Application Bars in Windows Phone Development”

mikeJanuary 23rd, 2012 at 3:36 am

hi there,

when i fill in this:

// Constructor
public MainPage()
{
InitializeComponent();
ApplicationBar = (Microsoft.Phone.Shell.ApplicationBar)Resources["DefaultAppBar"];

if (SelectedItems.Count == 1)
{
ApplicationBar = (Microsoft.Phone.Shell.ApplicationBar)Resources["SingleSelectionAppBar"];
}

else
{
ApplicationBar = (Microsoft.Phone.Shell.ApplicationBar)Resources["DefaultAppBar"];
}

}
}
}

i got error:

Error 1 The name ‘SelectedItems’ does not exist in the current context C:\Users\mike\documents\visual studio 2010\Projects\PhoneApp2\PhoneApp2\MainPage.xaml.cs 24 17 PhoneApp2

do i miss some code?

rgds,mike

BenjiiJanuary 23rd, 2012 at 9:06 am

Hi Mike – Nothing missed, you just grabbed too much. Your constructor should look like:
// Constructor
public MainPage()
{
InitializeComponent();
ApplicationBar = (Microsoft.Phone.Shell.ApplicationBar)Resources["DefaultAppBar"];
}

SelectedItems is just an example of how you could change the bar inside of a list’s onSelectionChanged event.

mikeJanuary 24th, 2012 at 2:26 am

hi thx for your answer

i tried this, but how do i switch between the bars?
i touched the dots which i normally use for showing menu items but nothing appears/ switches

rgds,mike

Leave a Response