Windows Phone 7 provides two types of Application Bar
for use with phones apps: a global bar and a local bar. The global
Application Bar must be defined in App.xaml,
and it can be added to any page within the Windows Phone 7 application
with a single line of XAML code. There are two ways to define a local
Application Bar and add it to a particular application page:
Using Managed Code (i.e., C#)
You'll get to try both
methods in this article, where you'll learn to build an Application Bar
that provides simple functionality and asks for a person's name, then
acts like that name has been saved to the database or the cloud storage.
Regardless of the approach you choose and regardless of whether you are
building a local or a global Application Bar, there is a preparatory
step you should take before you can properly display and use it. That
step involves adding images for your Application Bar buttons to project
resources.
1. Adding Images for Use with Application Bar Buttons
Because the maximum size of
each Application Bar icon is 48x48 pixels, the size of each icon you add
is limited to 26x26 pixels so that a circle can be properly drawn
around it. Since Windows Phone 7 supports the concept of themes, the
background of an icon has to match the rest of the theme, and therefore
should be made transparent. On this transparent background, the actual
graphic should have white foreground color using an alpha channel.
Fortunately, in many cases, you won't have to create icons yourself,
since Microsoft has released a set of commonly used images for Windows
Phone 7, all properly sized and formatted in Microsoft's approved style.
You can grab a copy of those icons here: www.microsoft.com/downloads/details.aspx?FamilyID=369b20f7-9d30-4cff-8a1b-f80901b2da93&displaylang=en.
|
Like everything else on the
Internet, the aforementioned URL is subject to change. If, for some
reason, you are not able to download icons by using that link, simply go
to bing.com and search for "Application Bar Icons for Windows Phone 7 Series."
|
|
Once
you've downloaded the small 260KB ZIP file containing the images, unzip
them to an easy-to-access location on your computer. Follow the next
steps to properly include those images into the project. Start off by
creating a new Visual Studio Project and naming it ApplicationBarSample.
Next,
let's organize the project for easier readability by creating a folder
for the icon images you'll use in the ApplicationBarSample project.
Right-click the project name in the Solution Explorer, select Add=>New Folder. Name the folder "Images."
Next,
copy the downloaded icon images to the newly created folder within your
project. Using Windows Explorer, go to the folder to which you
downloaded the zipped icons file and copy the image files you need from
there to the Images folder of your project. In the example that follows, you will be using the images located in the WP7AppBarIcons\_basic_shellcommon\dark subfolder of the downloaded archive. Make sure to copy the *.png files only, without any folder structure.
Now
the images are copied, but the Visual Studio still needs to make them a
part of the project. Right-click Solution Explorer, then select Add=>Existing
Item. Select all images by clicking each one while holding the Ctrl key
down, or (quicker) by clicking the first image, holding down the Shift
key, and then clicking the last image in the set.
Finally,
you need to instruct Visual Studio to include new images in every
build. For each image, right-click the image in the Solution Explorer
and choose Properties (you can also press F4 to bring up the Properties
dialog). In the Properties dialog box, set the Build action to "Content"
and set the Copy to Output property to "Copy Always," as shown in Figure 2.
Now that the project
knows where to find the icon images for an Application Bar, it's time to
create a project to showcase the Application Bar's features.
2. Adding a Global Application Bar Using XAML
A global Application Bar is created as an application resource in the app.xaml section. Follow these steps to create and add a global Application Bar.
In Solution Explorer, right-click the App.xaml file for the ApplicationBarSample
project and select Open. This action causes Visual Studio to display
the XAML code for the application's resource and configuration page.
Next,
you need to paste the complete XAML definition of the Application Bar
with three icons and two menu items in the Application Resources
section. Locate the <Application.Resources> section of the App.xaml and paste the following code within that section. Note that setting the Text property for each control is required:
<shell:ApplicationBar x:Key="GlobalAppMenuBar" Opacity="1" IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBar.Buttons>
<shell:ApplicationBarIconButton IconUri="/Images/appbar.add.rest.png"
Text="add">
</shell:ApplicationBarIconButton>
<shell:ApplicationBarIconButton IconUri="/Images/appbar.save.rest.png"
Text="save">
</shell:ApplicationBarIconButton>
<shell:ApplicationBarIconButton IconUri="/Images/appbar.delete.rest.png"
Text="delete">
</shell:ApplicationBarIconButton>
</shell:ApplicationBar.Buttons>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="Menu Item 1" IsEnabled="True">
</shell:ApplicationBarMenuItem>
<shell:ApplicationBarMenuItem Text="Menu Item 2" IsEnabled="True">
</shell:ApplicationBarMenuItem>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
With the global Application Bar defined, you are ready to add it to the pages within our application. Open MainPage.xaml and add the following attribute within the <phone:PhoneApplicationPage> node:
ApplicationBar="{StaticResource GlobalAppMenuBar}"
Press F5 to run the application. You should see an Application Bar identical to the one shown in Figure 7-2.
Before moving onto the
next section and taking a look at a local Application Bar, let's clean
up the MainPage.xaml code by removing the ApplicationBar="{StaticResource GlobalAppMenuBar}" XAML. If we don't do that, we will get an application exception after we add a local Application Bar.
