In this article, we are going to see how to use the Application Bar to design a Windows Phone 7 application user experience in much more enhanced and rich design. Application Bar is a set of buttons available to provide users with quick access to the application tasks. Application Bar is provided at the bottom of the Windows Phone screen with a row of button and eclipse along with the buttons.
Application bar automatically changes the space as the orientation changes on the phone. Additionally, we can have menu items added to the Application bar to enjoy with additional tasks added to the quick access. Initially, when application bar is added, we will have 3 dots where we can add on top of it the required number of buttons and menus as per the requirement. Let us now to see how to use the Application Bar in Windows Phone 7 application.
Open Visual Studio 2010 Express for Windows Phone or Visual studio 2010 Ultimate and create a New Silverlight for Windows Phone project as shown in the screen below.
By default, we have some set of icons that can be used in the Application Bar is provided with the Microsoft SDK’s for Visual Studio 2010 and we can located in our local development environment in one of the below locations
~\Program Files\Microsoft SDKs\Windows Phone\v7.1\Icons\dark
~\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Icons\dark
Now open the
Mainpage.Xaml page and locate the application bar commented section as shown in the screen below.
Now, to use the application bar into the applications just uncomment the code and add the code as per the requirement with the different icons form at the location provided above. We can add a number of buttons and menu items as per the requirement as shown in the screen below.
Now, we are done with our design of the application bar, to execute the button we need to handle the click event of the button. In order to handle the events add the click event to the code as shown in the screen below.
Now, we need to handle the code on the
Mainpage.xaml.cs page to do the respective process when the button is clicked. Now go to the
mainpage.xaml.cs and add the below code as per the click event as shown in the screen below.
Now we are done with our code behind as well. To check if the application is working fine, do the build and execution of the application by simply clicking F5 button and we can see the application loads to the Windows Phone 7 emulator as shown in the screen below.
In the above screen, we can see 2 application bar buttons are added and at the end, we have three dots … Clicking on it will expand the menu items which we added as shown in the screen below.
Now clicking on any button from the application bar will show their respective message in the top message viewer as shown in the screens below.
Therefore, in this article we have seen how to use the Application bar with the buttons and menus added as per the requirement in the Windows Phone 7 application development.