Introduction
In this article we are going to see how to use
Application Bar effectively for a Windows Phone 7 Application
development. In this article also we will create a new application and
configure the application bar to make use of it effectively. Application Bar is
a set of Icons that can be configured at the bottom of the application for each
page or also we can configure it for multiple pages. These buttons can be used
to navigate to frequently used pages across the application which enables users
to navigate quickly and easily. Application bar has some set of options along
with the buttons we can configure the menu items especially for some navigation
which are not that much frequently used. Application bar automatically adjusts
its icons and button as the screen orientation changes as and when.
The text based menu items are displayed as a
list rather from the icons been shown in the screen. To access the menu items we
can directly click the ellipsis at the right corner of the application bar. The
menu items are by default be taken in lower case to have a consistent user
experience for the end users and developers to create the application. Now let
us jump start to see the step by step process on how to add a Application Bar to
a new project and configure the application bar with the icons and menu items
one by one.
Steps :
Open Visual Studio 2010 and create a new
Silverlight for Windows Phone 7 Application named F5debugWp7ApplicationBar as
shown in the screen below.
We can now see the project is been created and
ready to start with our development task. As we follow some standards, we can
change the page header and some small modification so that the page looks
unique. Once we are done with the changes to add the application bar go the XAML
Page and we can see a commented section as shown in the screen below.
Just we need to uncomment this section to have
the application bar ready with some default buttons and menu's which we can
configure it as per our requirements. Once we uncomment these section we can see
that we have 2 application bar icons added and 2 menu items added with the
default values. Now we will change it to 3 Application bar icons and 3 Menu
items. Before we start adding the code we need to have the Application bar icons
ready. By default when we install the Windows Phone 7 SDK we have the icons
installed to the local development machine and it will be available in the below
locations.
DrivenName\Programs Files\Microsoft
SDKs\Windows Phone\v7.1\Icons\dark
DrivenName\Programs Files (x86) \Microsoft
SDKs\Windows Phone\v7.1\Icons\dark
We can see the list of ICONS available as shown
in the screen below.
Now in the uncommitted application bar code,
add the code for 3 buttons and 3 menu items as shown in the screen below. Before
that add the icons that are required to use in the application bar to a new
Images folder.
Now first we need to make the application icons
which we added to the images folder as content, to do that go to the properties
of the each image and make the Build Action as Content from Resources. Do the
same for all the icons which are added to the images folder.
Once we are done with the above step, now go to
the XAML code and make the changes for each button by adding the appropriate
icon and the button text as shown in the below XAML code.
<shell:ApplicationBarIconButton
IconUri="/Images/appbar.next.rest.png"
Text="Back";
<shell:ApplicationBarIconButton
IconUri="/Images/appbar.add.rest.png"
Text="Add";
<shell:ApplicationBarIconButton
IconUri="/Images/appbar.back.rest.png"
Text="Front";
Now do the same for the menu items by adding the menu details as
shown in the screen below.
<code>
<shell:ApplicationBarMenuItem
Text="Home"/>
<shell:ApplicationBarMenuItem
Text="Submit"/>
<shell:ApplicationBarMenuItem
Text="Help"/>
</code>
Once we are done with the above 2 code process our final
application bar code will look like below.
<code>
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar
IsVisible="True"
IsMenuEnabled="True">
<shell:ApplicationBarIconButton
IconUri="/appbar.next.rest.png"
Text="Back"/>
<shell:ApplicationBarIconButton
IconUri="/Images/appbar.add.rest.png"
Text="Add"/>
<shell:ApplicationBarIconButton
IconUri="/appbar.back.rest.png"
Text="Front"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem
Text="Home"/>
<shell:ApplicationBarMenuItem
Text="Submit"/>
<shell:ApplicationBarMenuItem
Text="Help"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
</code>
Now we can run the application to see if the application bar is
configured correctly and the icons are visible correctly. To build and execute
the application just press F5 or select the build solution option from the tool
box and we can see the application is loaded into the Windows Phone 7 Emulator
as shown in the screen below.
Now we need to have an event handler to trigger each button
event. To do that add the event handler code in the XAML and add the event
triggering code to the code behind as shown in the code below.
XAML Code :
<code>
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar
IsVisible="True"
IsMenuEnabled="True">
<shell:ApplicationBarIconButton
IconUri="/Images/appbar.next.rest.png"
Text="Back"
Click="NextButton_Click"/>
<shell:ApplicationBarIconButton
IconUri="/Images/appbar.add.rest.png"
Text="Add"
Click="AddButton_Click"/>
<shell:ApplicationBarIconButton
IconUri="/Images/appbar.back.rest.png"
Text="Front"
Click="BackButton_Click"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem
Text="Home"
Click="HomeMenuutton_Click"/>
<shell:ApplicationBarMenuItem
Text="Submit"
Click="SubmitMenuButton_Click"/>
<shell:ApplicationBarMenuItem
Text="Help"
Click="HelpMenuButton_Click"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
</code>
C#
Code :
<code>private
void NextButton_Click(object
sender, EventArgs e)
{
MessageBox.Show("Next
Application Bar Is Clicked!!!");
}</code>
private
void AddButton_Click(object
sender, EventArgs e)
{
MessageBox.Show("Add
Application Bar Is Clicked!!!");
}
private
void BackButton_Click(object
sender, EventArgs e)
{
MessageBox.Show("Back
Application Bar Is Clicked!!!");
}
private
void HomeMenuutton_Click(object
sender, EventArgs e)
{
MessageBox.Show("Home
Menu Is Clicked!!!");
}
private
void SubmitMenuButton_Click(object
sender, EventArgs e)
{
MessageBox.Show("Submit
Menu Is Clicked!!!");
}
private
void HelpMenuButton_Click(object
sender, EventArgs e)
{
MessageBox.Show("Help
Menu Is Clicked!!!");
}
Now we have just added a code to trigger a Message Box stating
which button is clicked. Once we are done with the above code now press F5 to
build and execute the application and click on the Application Bar button to see
the expected output as shown in the screen below.
Conclusion :
So in this article we have seen how to use the Application bar
and the steps to configure the application bar with the menu items.