Using Different Application Bars for Pivot Pages

Posted: January 31, 2012 in Windows Phone 7 & Mango

Even though it is not common practise to have an application bar with a pivot control, you might have a valid reason to do so. If you need a different application bar for each pivot page, you can try the following:
Declare Application Bar
The first thing tou need to do is create your application bars as a resource on the page as follows:

  <shell:ApplicationBar x:Key="appBar1">
    <shell:ApplicationBarIconButton x:Name="btn1a" IconUri="/Images/image1a.png" Text="button1a" Click="btn1a_Click" />
    <shell:ApplicationBarIconButton x:Name="btn1b" IconUri="/Images/image1b.png" Text="button1b" Click="btn1b_Click" />
  <shell:ApplicationBar x:Key="appBar2">
    <shell:ApplicationBarIconButton x:Name="btn2a" IconUri="/Images/image2a.png" Text="button2a" Click="btn2a_Click" />
    <shell:ApplicationBarIconButton x:Name="btn2b" IconUri="/Images/image2b.png" Text="button2b" Click="btn2b_Click" />

Declare Pivot Page
Now you need to declare your pivot page as follows:

<controls:Pivot x:Name="myPivot" SelectionChanged="myPivot_SelectionChanged">
  <controls:PivotItem Header="pvt1">

  <controls:PivotItem Header="pvt2">

Code Behind
Now in the code behind, you need to show the application bar based on the pivot index as follows:

private void myPivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
  switch ((sender as Pivot).SelectedIndex)
    case 0:
      this.ApplicationBar = this.Resources["appBar1"] as ApplicationBar;
    case 1:
      this.ApplicationBar = this.Resources["appBar2"] as ApplicationBar;

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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s