Floating FB popout byF5debug

Learn Windows Phone 7 Development in 31 Days – Day 4 – Working with Application Bar in WP7

 

Introduction:

In this article we are going to see how to use Application Bar effectively for a Windows Phone 7 Application development. In our earlier article we have seen how to create an application using Visual Studio 2010 IDE and do some rich user interface design changes with Microsoft Expression Blend. 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.    [more]

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.

clip_image002

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.

clip_image004

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

DriveName\Program Files\Microsoft SDKs\Windows Phone\v7.1\Icons\dark
DriveName\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Icons\dark

We can see the list of ICONS available as shown in the screen below.

clip_image006

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.

clip_image008

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.

clip_image010

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.

1

<shell:ApplicationBarIconButton IconUri="/Images/appbar.next.rest.png" Text="Back";

2

<shell:ApplicationBarIconButton IconUri="/Images/appbar.add.rest.png" Text="Add";

3

<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.

1

<code><shell:ApplicationBarMenuItem Text="Home"/>

2

<shell:ApplicationBarMenuItem Text="Submit"/>

3

<shell:ApplicationBarMenuItem Text="Help"/></code>

Once we are done with the above 2 code process our final application bar code will look like below.

01

<code><phone:PhoneApplicationPage.ApplicationBar>

02

<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">

03

<shell:ApplicationBarIconButton IconUri="/appbar.next.rest.png" Text="Back"/>

04

<shell:ApplicationBarIconButton IconUri="/Images/appbar.add.rest.png" Text="Add"/>

05

<shell:ApplicationBarIconButton IconUri="/appbar.back.rest.png" Text="Front"/>

06

<shell:ApplicationBar.MenuItems>

07

<shell:ApplicationBarMenuItem Text="Home"/>

08

<shell:ApplicationBarMenuItem Text="Submit"/>

09

<shell:ApplicationBarMenuItem Text="Help"/>

10

</shell:ApplicationBar.MenuItems>

11

</shell:ApplicationBar>

12

</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.

clip_image012

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:

01

<code><phone:PhoneApplicationPage.ApplicationBar>

02

<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">

03

<shell:ApplicationBarIconButton IconUri="/Images/appbar.next.rest.png" Text="Back" Click="NextButton_Click"/>

04

<shell:ApplicationBarIconButton IconUri="/Images/appbar.add.rest.png" Text="Add" Click="AddButton_Click"/>

05

<shell:ApplicationBarIconButton IconUri="/Images/appbar.back.rest.png" Text="Front" Click="BackButton_Click"/>

06

<shell:ApplicationBar.MenuItems>

07

<shell:ApplicationBarMenuItem Text="Home" Click="HomeMenuutton_Click"/>

08

<shell:ApplicationBarMenuItem Text="Submit" Click="SubmitMenuButton_Click"/>

09

<shell:ApplicationBarMenuItem Text="Help" Click="HelpMenuButton_Click"/>

10

</shell:ApplicationBar.MenuItems>

11

</shell:ApplicationBar>

12

</phone:PhoneApplicationPage.ApplicationBar></code>


C# Code:

01

<code>private void NextButton_Click(object sender, EventArgs e)

02

{

03

MessageBox.Show("Next Application Bar Is Clicked!!!");

04

}</code>

05

 

06

private void AddButton_Click(object sender, EventArgs e)

07

{

08

MessageBox.Show("Add Application Bar Is Clicked!!!");

09

}

10

 

11

private void BackButton_Click(object sender, EventArgs e)

12

{

13

MessageBox.Show("Back Application Bar Is Clicked!!!");

14

}

15

 

16

private void HomeMenuutton_Click(object sender, EventArgs e)

17

{

18

MessageBox.Show("Home Menu Is Clicked!!!");

19

}

20

 

21

private void SubmitMenuButton_Click(object sender, EventArgs e)

22

{

23

MessageBox.Show("Submit Menu Is Clicked!!!");

24

}

25

 

26

private void HelpMenuButton_Click(object sender, EventArgs e)

27

{

28

MessageBox.Show("Help Menu Is Clicked!!!");

29

}

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.

clip_image014

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.

About Author: Karthikeyan Anbarasan, Microsoft MVP (Most Valuable Professional) in ASP.NET/IIS Architecture. He is the Founder and Chief Editor of the www.f5debug.net website and has authored books on Windows Phone and Business Intelligence(SSIS). He is also a Passionate Speaker and a Blogger on Microsoft Technologies.

You can Join Me On: Facebook, Twitter, Google Plus, LinkedIn

Comments (2) -

Wade Schuenemann
Wade Schuenemann
8/31/2013 5:51:21 AM #

Pretty! This has been a really wonderful article. Thank you for providing this info.

Myra Ramm
Myra Ramm
8/31/2013 5:51:22 AM #

I live here preteen lolita kid lolicon haha shes just waiting for it to come and coat her face, then she realizes hes pretty much done..weak shot. but besides that, shes smokin, decent scene.

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Recent Posts

Random Posts

Most Viewed

URL Shortner

Create your own short urls!!!

Site Counter

free counters

Disclaimer

This is a personal weblog. The opinions expressed here represent my own and not those of my employer. For accuracy and official reference refer to MSDN/ TechNet. I have documented my personal experience on this blog.

Protected by Copyscape Web Plagiarism Finder

Site Meter