Practice Windows Phone development (5): ApplicationBar Best Practices

This article focuses on the usage of ApplicationBar in Windows Phone development. ApplicationBar is the so-called menu bar, which includes two types: iconbutton and menu. Iconbutton is equivalent to the toolbar in the menu bar, which can contain icons; menu is the menu, but there is no Level-2 menu.

Application bar usage in Windows Phone development

For windowsphone7ProgramFor example, the UI is developed using sliverlight, but it is not completely the complete set of sliverlight. It is related to the subset, because some APIs or functions on phone7 are not available on the PC (such as the ApplicationBar), sliverlight on the PC should not be mentioned.

ApplicationBar is the so-called menu bar, which includes two types: iconbutton and menu. Iconbutton is equivalent to the toolbar in the menu bar, which can contain icons; menu is the menu, but there is no Level-2 menu. Before creation, you must add Microsoft. phone. and add xmlns: shell = "CLR-namespace: Microsoft. phone. shell; Assembly = Microsoft. phone. shell ".

Windows Phone ApplicationBar contains applicationbariconbutton and applicationbarmenuitem. Up to four buttons can be added. The menu is expanded by the ellipsis on the Right of ApplicationBar, all of which are inherited from Microsoft. phone. shell namespace, so there is a shell sign before the reference, such:

The application bar is not a sl control, so data binding is not supported.

 

1. Create an application bar in the XAML Console

     <  Phone: phoneapplicationpage. ApplicationBar  >          <  Shell: ApplicationBar  Isvisible  = "True"  Ismenuenabled  = "True"  >              <  Shell: applicationbariconbutton  X: Name  = "Appbarbutton1" Iconuri  = "/Icons/appbar.save.rest.png"  Text  = "Save"  Click  = "Appbarbutton#click"  />              <  Shell: applicationbariconbutton  X: Name  = "Appbarbutton2"  Iconuri  = "/Icons/appbar.delete.rest.png"  Text  = "Delete" />              <  Shell: ApplicationBar. menuitems  >                  <  Shell: applicationbarmenuitem  X: Name  = "Appbarmenuitem1"  Text  = "Open"  />                  <  Shell: applicationbarmenuitem  X: Name  = "Appbarmenuitem2"  Text = "Exit"  />              </  Shell: ApplicationBar. menuitems  >          </  Shell: ApplicationBar  >      </  Phone: phoneapplicationpage. ApplicationBar  > 

The application bar is not an SL control, so data binding is not supported. This means that if you use XAML, the key tag text string value must be hard-coded in XAML and cannot be localized.

 

You can use a self-designed icon (size: 48x48) or a system icon for the icon of applicationbariconbutton. The System icon is added by blend 4.0, as shown in figure

In Windows Phone development, to create an iconbar, you must have an icon. phone7 has strict requirements on the icon: The size must be a PNG Image of 48x48, the image type is centered, and the foreground color is generally white, the size is 26x26. with the picture can be created, if there is no relationship, Microsoft provides a set of icon http://www.microsoft.com/downloads/details.aspx? Familyid = 492b20f7-9d30-4cff-8a1b-f80901b2da93 & displaylang = en.

 

Ii. PassCodeAccess ApplicationBar

From the XAML page, we can see that applicationbariconbutton and applicationbarmenuitem are inherited from ApplicationBar, ApplicationBar is inherited from the phoneapplicationpage namespace, and other Silverlight page controls are directly inherited from the phoneapplicationpage namespace.

Therefore, the control accessing ApplicationBar cannot be like accessing the page content. First, add the namespace Microsoft. Phone. Shell, as shown in figure

 Using  System;  Using Microsoft. Phone. controls;  Using  Microsoft. Phone. shell;  Namespace  Phoneapp1 {  Public   Partial   Class  Mainpage: phoneapplicationpage {  //  Constructor          Public  Mainpage () {initializecomponent (); appbarbutton1 = ApplicationBar. Buttons [ 0 ] As  Applicationbariconbutton; appbarmenuitem1 = ApplicationBar. menuitems [ 0 ] As  Applicationbarmenuitem ;}  Private   Void Appbarbutton#click ( Object  Sender, eventargs e) {appbarbutton1.iconuri = New Uri ( "  /Icons/appbar.stop.rest.png "  , Urikind. relativeorabsolute); appbarmenuitem1.text = "  Close  "  ;}}} 

 

3. Create an application bar in the code

Use code to implement the menu bar

1. Create a new project named applicatonbarbycode, add imagesto the file, and import the relevant resource file. Set the value of build action to content for appbar.add.rest.png, or click the F4 shortcut. To open the mainpage. XAML. CS file, first introduce some shell, so Add the following code:

 
UsingMicrosoft. Phone. shell;
 

2. Enter the following code in the constructor:

PublicMainpage ()
{
Initializecomponent ();

//Declare a menu bar and set it to visible and can be used by the menu
ApplicationBar =NewApplicationBar ();
ApplicationBar. isvisible =True;
ApplicationBar. ismenuenabled =True;
}
 

3. Add three menu buttons and two menuitems as follows:

 Public Mainpage ()
{
Initializecomponent ();

 //  Initialize a menu bar and set it to visible and can be used by the menu  
 ApplicationBar = New ApplicationBar ();
ApplicationBar. isvisible =True ;
ApplicationBar. ismenuenabled = True ;

 //  Set three menu buttons  
 Applicationbariconbutton btnadd = New Applicationbariconbutton ( New Uri ( "  /Images/appbar.add.rest.png  " , Urikind. Relative ));
Btnadd. Text = "  Add  " ;
Applicationbariconbutton btnsave = New Applicationbariconbutton ( New Uri ("  /Images/appbar.save.rest.png  " , Urikind. Relative ));
Btnsave. Text = "  Save  " ;
Applicationbariconbutton btndelete = New Applicationbariconbutton ( New Uri ( "  /Images/appbar.delete.rest.png  " , Urikind. Relative ));
Btndelete. Text = "  Delete  " ;

 //  Add these three menu buttons to the menu bar  
 ApplicationBar. Buttons. Add (btnadd );
ApplicationBar. Buttons. Add (btnsave );
ApplicationBar. Buttons. Add (btndelete );

 //  Set two menuitems  
 Applicationbarmenuitem menuitem1 = New Applicationbarmenuitem ( "  Menu Item1  " );
Applicationbarmenuitem menuitem2 = New Applicationbarmenuitem ( "  Menu item2  " );

ApplicationBar. menuitems. Add (menuitem1 );
ApplicationBar. menuitems. Add (menuitem2 );
}