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

Launching an app doesn’t need to be daunting. Whether you’re just getting started or need a refresher on mobile app testing best practices, this guide is your resource! Brought to you in partnership with Perfecto

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

 

Keep up with the latest DevTest Jargon with the latest Mobile DevTest Dictionary. Brought to you in partnership with Perfecto.

Topics:

Published at DZone with permission of Sumit Dutta, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}