Saturday, August 25, 2012

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.
The size of icon will be 48 by 48 pixels, but all that you have drawn, you need to fit into a rectangle 26 by 26 pixels and place the image in the center. The problem is that any image is enclosed in a circle with the radius 14. If your image is larger, intersections will appear.
Read more...

No comments:

Post a Comment