You can use the app bar to display various app commands as needed. The application Bar provides various commands related to the user's current page or selected content. By default, the application bar is hidden. The application bar is displayed when you move your finger from the top or bottom along the edge of the screen. You can also right-click the application bar to display it. After the user starts the command, clicks the application interface, or repeats the gesture, the application bar will automatically disappear. If you need to select multiple commands, you can always make the application bar visible.
Create application bar
The following bottomappbar is used as an example to compile an application bar with the text editing function using the AppBar control.
< Page. bottomappbar > < AppBar X : Name = "Bottomappbar"> < Grid > < Grid. columndefinitions > < Columndefinition Width = "50 *"/> < Columndefinition Width = "50 *"/> </ Grid. columndefinitions > < Stackpanel X : Name = "Leftpanel" Orientation = "Horizontal" Grid. Column = "0" Horizontalalignment = "Left"> < Button X : Name = "Edit" Style = "{ Staticresource Editappbarbuttonstyle }" Click = "Edit_button_click"/> < Button X : Name = "Save" Style = "{ Staticresource Saveappbarbuttonstyle } "/> < Button X : Name = "Delete" Style = "{ Staticresource Deleteappbarbuttonstyle } "/> </ Stackpanel > < Stackpanel X : Name = "Rightpanel" Orientation = "Horizontal" Grid. Column = "1" Horizontalalignment = "Right"> < Button X : Name = "Refresh" Style = "{ Staticresource Refreshappbarbuttonstyle } "/> </ Stackpanel > </ Grid > </ AppBar > </ Page. bottomappbar >
From aboveCodeIt can be seen that writing the application bar is not complicated, and the style of using buttons in the application bar is also provided in the Win8 application. Find standardstyles. XAML in the common folder of the Project, which contains a lot of commented-out buttonstyle. Find the desired buttonstyle in it.
Edit application bar
Next, we will add two checkpoints in the application interface: one to fix the application bar, and the other to add or delete the application bar buttons.
< Stackpanel Orientation = "Vertical" Grid. Row = "1" Margin = ", 50,"> < Checkbox X : Name = "Issticky" Content = "Issticky" Click = "Issticky_click"/> < Checkbox X : Name = "Addhelpbutton" Content = "Add HELP button" Click = "Addhelpbutton_click"/> </ Stackpanel >
The two checkbox Click Event codes are as follows. When the issticky attribute in the application column is activated, the display can only be canceled by hovering the lower screen or right-clicking the mouse.
Private void Issticky_click ( Object Sender, Routedeventargs E ){ Checkbox CB = sender As Checkbox ; AppBar AP = pageroot. findname ( "Bottomappbar" ) As AppBar ; If (AP! = Null ) {AP. issticky = ( Bool ) CB. ischecked ;}} Private void Addhelpbutton_click ( Object Sender, Routedeventargs E ){ Checkbox CB = sender As Checkbox ; If (( Bool ) CB. ischecked ){ Button Helpbutton = New Button (); Helpbutton. Name = "Help" ; Helpbutton. Style = App . Current. Resources [ "Helpappbarbuttonstyle" ] As Style ; Rightpanel. Children. Add (helpbutton );} Else {Rightpanel. Children. removeat (1 );}}
Source code download
Http://sdrv.ms/SSPQM2