Application bar for Windows Phone 7

There is a silly habit, which came with the experience in creating Windows and Web applications, the creation of interface elements in the application. You might be caught with this, creating an application for Windows Phone 7. For example, in one game application there are two buttons in the main window: Refresh and About. They look strange (especially About) and apparently superfluous. And everything goes well, until your application does not edit the fields, which initiate the call of keypad. And keypad is obscure part of the required buttons. Imagine an application that has the edit box on the whole screen, and in the bottom of the screen there are Send button, which allows to send a message. When entering text, the Send button will be hidden by a keyboard, and a novice user will be confused about what to do and how to get to the button. That's why, Windows Phone 7 applications have the ability to use a special control panel - Application Bar.

Application Bar is a pop-up panel at the bottom of the application window, which can contain from one to four buttons, which allow you to perform some action. In addition, non hierarchical text menu can be presented here. The menu can be linked to one of the buttons and the panel is mainly used to select one of the application options.

Application Bar can not be hidden by the keyboard or other elements, and when you call for it, it "shifts" the entire interface. However it happens, if the transparency is set 1. If transparency is set to less than 1, then the Application Bar begins to cover the screen, using the transparency effect.

So, let's create a simple Application Bar. The first thing to do is decide about the icons. Some icons are available in the folder C: \ Program Files (x86) \ Microsoft SDKs \ Windows Phone \ v7.0 \ Icons \ dark, and the rest you need to draw on your own. There are few recommendations about creating icons:

Icon is being painted in white on a transparent background. If you change the topic, this practice allows you to make the icon visible for the user.

Thus, to add the Refresh and About button in the Application Bar, it is sufficient to add the following code in MainPage.xaml:

1: < phone:PhoneApplicationPage.ApplicationBar>
2: < shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
3: < shell: ApplicationBarIconButton
         IconUri = "/ Images / appbar.refresh.rest.png"
        Text = "Refresh" Click = "ClickRefresh" />
4: < shell: ApplicationBarIconButton
         IconUri = "/ Images / appbar.questionmark.rest.png"
         Text = "About" Click = "ClickAbout" />
5: < / shell: ApplicationBar>
6: < / phone: PhoneApplicationPage.ApplicationBar>

The icons are chosen from the SDK, after setting the Build Action to Content and Copy to Output Directory in Copy Always.

Of course, to make the panel become available, you need to implement event handlers ClickAbout and ClickRefresh.

Let's add to this panel a choice of the interface language. To do this, expand the Application Bar with two menu items:

1: < phone:PhoneApplicationPage.ApplicationBar>
2: < shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
3: < shell: ApplicationBarIconButton
       IconUri = "/ Images / appbar.refresh.rest.png" Text = "Refresh" Click = "ClickRefresh" />
4: < shell: ApplicationBarIconButton
IconUri = "/ Images / appbar.questionmark.rest.png" Text = "About" Click = "ClickAbout" />
5: < shell:ApplicationBar.MenuItems>
6: < shell: ApplicationBarMenuItem Text = "Russian"
      Click = "SetLanguageClick"> 
7: < shell: ApplicationBarMenuItem Text = "English"
      Click = "SetLanguageClick"> 
8: < / shell: ApplicationBar.MenuItems>
9: < / shell: ApplicationBar>
10: < / phone: PhoneApplicationPage.ApplicationBar>

We must say that the menu in the Application Bar is very often not so useful. With the same success you might place the button Language and send user on a separate page, with the choice of language.

The problem in the Application Bar is that it is the control element of Windows Phone 7, and it does not support Silverlight-controls, such as data binding. Despite this, the control element supports the ability to dynamically fill in the programming language C #.

By the way, the class ApplicationBar is situated in a namespace Microsoft.Phone.Shell. Access to ApplicationBar is provided via the corresponding property class PhoneApplicationPage.