Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Windows Phone 7: Global Application Bar

DZone's Guide to

Windows Phone 7: Global Application Bar

· Mobile Zone ·
Free Resource

My first article on application bar Part 10 - Windows Phone 7- ApplicationBar talk about how to create application bat in Windows Phone 7. My second article on application bar talks about how to create dynamic application bar Part 53 - Windows Phone 7 - Dynamic ApplicationBar

In this article I will talk about global application bar which can be used in muliple pages of application.  Let's see what is global applicatio bar.

Step 1: Create an application bar in MainPage.xaml which contains two buttons and menu bar.

<phone:PhoneApplicationPage.ApplicationBar>
   <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
      <shell:ApplicationBarIconButton IconUri="/Images/add.png" Text="add" />
      <shell:ApplicationBarIconButton IconUri="/Images/minus.png" Text="minus" />
      <shell:ApplicationBar.MenuItems>
         <shell:ApplicationBarMenuItem Text="MenuItem 1" />
         <shell:ApplicationBarMenuItem Text="MenuItem 2" />
      </shell:ApplicationBar.MenuItems>
   </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Step 2: Now add another page in the project and name it SecondPage.xaml

Step 3: Add a button in the MainPage.xaml to navigate to SeconPage.xaml.

<Button Content="Show next Page" Height="70" HorizontalAlignment="Center" Margin="6,0,0,0" Name="btnNextPage" VerticalAlignment="Top" Width="420" Click="btnNextPage_Click" />

Step 4: In the code behind of MainPage.xaml, put below code to navigate to SecondPage.xaml.

private void btnNextPage_Click(object sender, RoutedEventArgs e)
{
   this.NavigationService.Navigate(new Uri("/SecondPage.xaml", UriKind.Relative));
}

Step 5: Now run the application, you will see application bar in MainPage.xaml like shown below.

Windows Phone 7 - Global Application Bar

Step 6: Now click on Show next page to show SecondPage.xaml, now you will notice that Application Bar is not present.

Windows Phone 7 - Reuse Application Bar

Step 7: Now we will modify the code so that same application bar appears in all the pages. Remove application bar code from MainPage.xaml and put it inside Application.Resources in App.xaml. I have added click events for the ApplicationBarIconButton and ApplicationBarMenuItem. The only difference in the ApplicationBar of MainPage.xaml and App.xaml is the x:Key which is present in App.xaml


 

<Application.Resources>
   <shell:ApplicationBar x:Key="GlobalAppBar" IsVisible="True" IsMenuEnabled="True">
      <shell:ApplicationBarIconButton IconUri="/Images/add.png" Text="add" Click="add_Click" />
      <shell:ApplicationBarIconButton IconUri="/Images/minus.png" Text="minus" Click="minus_Click" />
      <shell:ApplicationBar.MenuItems>
         <shell:ApplicationBarMenuItem Text="MenuItem 1" Click="MenuItem1_Click" />
         <shell:ApplicationBarMenuItem Text="MenuItem 2" Click="MenuItem2_Click" />
      </shell:ApplicationBar.MenuItems>
   </shell:ApplicationBar>
</Application.Resources>

Step 8: Put the events of ApplicationBarIconButton and ApplicationBarMenuItem in the code behind of App.xaml.cs.

private void add_Click(object sender, EventArgs e)
{
   MessageBox.Show("Add works!");
}

private void minus_Click(object sender, EventArgs e)
{
   MessageBox.Show("Minus works!");
}

private void MenuItem1_Click(object sender, EventArgs e)
{
   MessageBox.Show("Menu item 1 works!");
}

private void MenuItem2_Click(object sender, EventArgs e)
{
   MessageBox.Show("Menu item 2 works!");
}

Step 9: Add ApplicationBar = "{StaticResource GlobalAppBar}" inside phone:PhoneApplicationPage of MainPage.xaml and SecondPage.xaml.

Step 10: Now run the application and you will notice application bar is present in MainPage.xaml as well as SecondPage.xaml.

Windows Phone 7 - Global Application Bar        Windows Phone 7 - Reuse of Applicaiton Bar

This ends the article of reusing application bar across all pages of app

 

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}