WP7 Development (14) ApplicationBar

WP7Menu Bar in

One applicationProgramThe content of the menu bar is limited.,Up4The order is centered in the middle of the menu bar, and then arranged from left to right.

WP7Two types of menu bar are provided. One is the global menu bar, that is, it appears on all pages, and the other is the local menu bar, it only appears on a page. The global menu bar must be inApp. XAMLFile, it will be a simple lineXAMLCodeAdd to any page. You can use either of the following two methods to define a local menu bar:XmalThe second type is defined directly in the code.

On the menu barIconMaximum limit48x48Pixel, so we cannot exceed this value, otherwise it will be distorted, because it will automatically apply,WP7A lotIconSo we 'd better use the system default, because we use otherIcon, There may be some unexpected problems, maybe, haha. UseXAML.

 

Set the global menu bar:

CreateSilverlightProject, right-click the project, and selectAddAnd then selectNew Folder, NamedImages, We want to displayIconToImagesFolderIconIs placed inC: \ Program Files \ microsoft sdks \ Windows Phone \ v7.1 \ icons \ DarkYou can also download it on your own.

OpenApp. XAMLFile, enter the following code:

 <! --  Application Resources  --> 
 <  Application. Resources  > 
 <  Shell: ApplicationBar  X: Key  = "Globalappmenubar"  Opacity  = "1"  Isvisible  = "True" 
Ismenuenabled  = "True"  > 
 <  Shell: ApplicationBar. Buttons  > 
 <  Shell: applicationbariconbutton  Iconuri  = "/Images/appbar.add.rest.png"  
Text  = "Add"  > </ Shell: applicationbariconbutton  > 
 <  Shell: applicationbariconbutton  Iconuri  = "/Images/appbar.save.rest.png"  
Text  = "Save"  > </  Shell: applicationbariconbutton  > 
 <  Shell: applicationbariconbutton Iconuri  = "/Images/appbar.delete.rest.png"  
Text  = "Delete"  > </  Shell: applicationbariconbutton  > 
 </  Shell: ApplicationBar. Buttons  > 
 <  Shell: ApplicationBar. menuitems  > 
 < Shell: applicationbarmenuitem  Text  = "Menu Item1"  Isenabled  = "True"  > </  Shell: applicationbarmenuitem  > 
 <  Shell: applicationbarmenuitem  Text  = "Menu item2"  Isenabled  = "True"  > </ Shell: applicationbarmenuitem  > 
 </  Shell: ApplicationBar. menuitems  > 
 </  Shell: ApplicationBar  > 
 </  Application. Resources  > 

Open the mainpage. XAML file and enter the following line of code in <Phone: phoneapplicationpage>,

 
ApplicationBar = "{staticresource globalappmenubar }"
 

At this time, I ran the project and found that the three icons were all the three icons that crossed. Why? This is because Visual Studio is not very intelligent, so you need to set it, place the mouse on appbar.add.rest.png, right-click and select properties, and select content in build action, make the same settings for the other two files, and run the command again to display the desired effect.

By the way, opacity sets transparency. The value ranges from 0 to 1. Microsoft recommends that developers use only three values: 0, 0.5, and 1. You can try to use these three values.

 

Partial menu bar:

Create a Silverlight project, right click on the right of the project, select Add from the project name, and select new folder and name it images. We need to put the icon we need to display into the images folder, the icons in the system are stored in c: \ Program Files \ microsoft sdks \ Windows Phone \ v7.1 \ icons \ Dark. You can also download them on the Internet.

Open the mainpage. XAML file, between <Phone: phoneapplicationpage> </Phone: phoneapplicationpage>

Enter the following line of code:

 <  Phone: phoneapplicationpage. ApplicationBar > 
 <  Shell: ApplicationBar  Opacity  = "1"  Isvisible  = "True"  Ismenuenabled  = "True"  > 
 <  Shell: ApplicationBar. Buttons  > 
 <  Shell: applicationbariconbutton Iconuri  = "/Images/appbar.add.rest.png"  Text  = "Add"  > </  Shell: applicationbariconbutton  > 
 <  Shell: applicationbariconbutton  Iconuri  = "/Images/appbar.save.rest.png"  Text  = "Save"  > </  Shell: applicationbariconbutton > 
 <  Shell: applicationbariconbutton  Iconuri  = "/Images/appbar.delete.rest.png"  Text  = "Delete"  > </  Shell: applicationbariconbutton  > 
 </  Shell: ApplicationBar. Buttons  > 

 < Shell: ApplicationBar. menuitems  > 
 <  Shell: applicationbarmenuitem  Text  = "Menu Item1"  Isenabled  = "True"  > </  Shell: applicationbarmenuitem  > 
 <  Shell: applicationbarmenuitem  Text  = "Menu item2" Isenabled  = "True"  > </  Shell: applicationbarmenuitem  > 
 </  Shell: ApplicationBar. menuitems  > 
 </  Shell: ApplicationBar  >        
 </  Phone: phoneapplicationpage. ApplicationBar  > 

Note:

Phone: phoneapplicationpage. applicationBar is a bar, and buttons and menuitem are set layer by layer. Although the menu system only supports four buttons, if you want to put multiple buttons, we can use menuitem for implementation, which is also a good method. In short, WP7 uses a new design concept, which is different from Android and IOS, therefore, some products are ideally designed to put Android and iOS on WP7, which makes development and post-maintenance very painful.

The preceding implementation is as follows:

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 );
}

4. Click F5 to run it. The following figure shows the effect:

5.Then add some event responses to the menu button and open mainpage first. in XAML, move the mouse to the leftmost toolbox to list a series of controls, drag a textbox and a textblock, and set the visibility attribute of textbox and textblock to collapsed, the text attribute of textbox is blank, and the text attribute of textblock is please enter your name;

6. Open the mainpage. XAML. CS file and enter it in the constructor.

Btnadd. Click + =NewEventhandler (btnadd_click );

Btnsave. Click + =NewEventhandler (btnsave_click );
 

Note: When "=" is entered, click the tab key to automatically complete new eventhandler (btnadd_click );

Click the tab key again to generate

 
VoidBtnsave_click (ObjectSender, eventargs E)

{

}
 

Very intelligent and easy to use. Haha.

7. The two generated functions will be improved:

VoidBtnsave_click (ObjectSender, eventargs E)
{
Textblock1.text ="Thank you,"+ Textbox1.text;
Textbox1.visibility = visibility. collapsed;
}

VoidBtnadd_click (ObjectSender, eventargs E)
{
Textbox1.visibility = visibility. visible;
Textblock1.visibility = visibility. visible;
}
 

8. Click F5 to run the task. When I drag the control, the result is not good. Click btnadd and enter Xiaoxing

10. Click Save as follows: