Windows Phone development series menu bar)

Use code to create a menu bar example

1. Create a new Windows Phone application project named appbarsample.

2. Add an image as an icon button. In Solution Explorer, right-click the appbarsample project, add-> new folder, add a new folder images, right-click the images folder, add-> existed items, and enter C: \ Program Files \ microsoft sdks \ Windows Phone \ v7.0 \ icons \ packages, appbar.delete.rest.png, appbar.edit.rest.png, appbar.refresh.rest.png, and select Add to add four images to the project.

3. Change the image attributes. In Solution Explorer, select the four images added in the previous step. Set build action to content in properties and copy to output directory to copy always.

4. Locate mainpage. XAML in Solution Explorer, right-click View code (or press F7), and add the following code to the mainpage method:

Public mainpage ()
{
Initializecomponent ();

// Redefine the menu bar
ApplicationBar = new ApplicationBar ();

// Display the menu bar and sub-menu
ApplicationBar. isvisible = true;
ApplicationBar. ismenuenabled = true;

 

// Set the icon button
Applicationbariconbutton btnadd = new applicationbariconbutton (New uri ("/images/appbar.add.rest.png", urikind. Relative ));
Btnadd. Text = "add ";
Btnadd. Click + = new eventhandler (btnadd_click );
Applicationbariconbutton btndelete = new applicationbariconbutton (New uri ("/images/appbar.delete.rest.png", urikind. Relative ));
Btndelete. Text = "delete ";
Applicationbariconbutton btnedit = new applicationbariconbutton (New uri ("/images/appbar.edit.rest.png", urikind. Relative ));
Btnedit. Text = "edit ";
Applicationbariconbutton btnrefresh = new applicationbariconbutton (New uri ("images/appbar.refresh.rest.png", urikind. Relative ));
Btnrefresh. Text = "refresh ";

// Add icon
ApplicationBar. Buttons. Add (btnadd );
ApplicationBar. Buttons. Add (btndelete );
ApplicationBar. Buttons. Add (btnedit );
ApplicationBar. Buttons. Add (btnrefresh );

// Set sub-menu items
Applicationbarmenuitem menuitem1 = new applicationbarmenuitem ("menuitem1 ");
Menuitem1.click + = new eventhandler (menuitem1_click );
Applicationbarmenuitem menuitem2 = new applicationbarmenuitem ("menuitem2 ");

// Add a sub-menu item
ApplicationBar. menuitems. Add (menuitem1 );
ApplicationBar. menuitems. Add (menuitem2 );
}

5. Press F5 to compile the deployment and you will see the interface shown in.

 

Menu Bar design best practices

When designing the menu bar, consider the following:

* Use the menu bar provided by the system rather than the menu system created by yourself. In this way, all applications on the device can maintain a unified user experience. The menu bar provided by the system supports animation and screen conversion.

* Use the default subject instead of custom color. The use of custom colors will affect the icon buttons and menu animation effects, and will consume more power in some display settings.

* The transparency of the menu bar can be adjusted as needed. However, we recommend that you use only 0, 0.5, and 1.

* If the transparency of the menu bar is less than 1, the size of the currently displayed page will be the same as that of the screen, and the menu bar will be covered on it. If the transparency is 1, the page will automatically change the size to adapt to areas not covered by the menu bar.

 

Best practices for icon button Design

* An image used as an icon should be an image using Channel A. Its background color is transparent and its foreground color is white. The menu bar will change the icon color based on the system theme style. An image with a background color may cause unpredictable problems.

* The circle on the icon button is added to the menu bar during running. You do not need to add a circle to the source image.

* The image size used as the icon should be 48x48 pixels. The size of the image content should not exceed the range of 26x26 pixels, so that it will not be covered by the circle on the menu bar.

* Do not set the back button. Because the back button on the device is specifically designated for page back.

* Set the most common functions on the icon button. If icons are not easy to understand for some functions, use menu items.

* Do not be ambiguous when the image on the icon button is displayed.

* Icons that can be directly used in your program can be downloaded from here.

 

Menu item design best practices

* Avoid using more than five menu items. Otherwise, you must scroll the screen to see them.

* Avoid using too long text in a single menu item. Otherwise, it will be truncated. The recommended menu item contains 14 to 20 English characters.

* To ensure a good user experience, the text of all menu items and Icon buttons is changed to lowercase characters.

 

Download Sample Code

Reference: http://msdn.microsoft.com/en-us/library/ff431806 (V = vs.92). aspx