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:

<phone:PhoneApplicationPage.Resources>
  <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>
  <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" />
  </shell:ApplicationBar>
</phone:PhoneApplicationPage.Resources>

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">
    <Grid/>
  </controls:PivotItem>

  <controls:PivotItem Header="pvt2">
    <Grid/>
  </controls:PivotItem>
</controls:Pivot>

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;
      break;
    case 1:
      this.ApplicationBar = this.Resources["appBar2"] as ApplicationBar;
      break;
    default:
      break;
  }
}
Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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