Quick Construction of Windows 8 style application 23-App Bar overview and usage specifications

This blog post mainly introduces App Bar overview, App Bar command organization steps, and App Bar best practices.

  App BarOverviewThe toolbar of the App Bar application in the Windows 8 Store application serves the same purpose as the AppBar in Windows Phone. We can provide users with various operation interfaces to implement navigation or trigger commands. AppBar is hidden by default and can be set to always visible. We can show the AppBar when cleaning the upper or lower edges of the screen. The AppBar is hidden after it is clicked or the focus is lost. Of course, we can also control the AppBar display or hiding by programming. Windows 8 Store applications usually contain two types of AppBar: 1) The AppBar at the bottom of the AppBar is usually used to trigger commands, and the global commands are on the right and the context commands are on the left. You can call the context command program in the selected project. If you have a single common command, you can place it on the canvas. The menu can be used to display related command groups. 2) The top AppBar of the top AppBar is used for the Navigation in the immersive view, for example, adding a return button or title. It can also be used for switching between pages or views. 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1A940EA-0.png "/> App BarCommand organization steps650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1A9404526-1.png "/> Step 1: organize commands to identify all application commands and then organize them by solution or location. We need to consider the following issues: 1) what commands should be displayed in the entire application; 2) what commands should only be displayed on some pages; 3) which command should use the superbutton or go to Settings? Below is the list of commands we may use when browsing a restaurant application: 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1A94040K-2.png "/> Step 2: Create a command set we need to group similar commands to the command set. AppBar displays the command set as a unit with a separator between each command set. We need to consider the following issues: 1) which commands are related to functions; 2) which commands are related to functions; 3) which commands should be displayed during the selection; group the commands in the preceding restaurant application to the command set: 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1A9401638-3.png "/> Step 3: Create a menu we need to consider whether the command set is more appropriate in a command menu. We need to consider the following issues: 1) whether the AppBar is too crowded or there are too many commands to adapt. 2) whether a set exists can benefit from a longer tag or interactive control. The benefit of the command menu is: allow less space to provide more options and include interactive controls.

650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1A9401351-4.png "/>

In the "sort" menu, a simple list is displayed to facilitate selection of options. A set of controls are displayed in the "filter" menu, allowing you to filter items according to more complex conditions. Step 4: Add commands to AppBar. You can add commands to AppBar in multiple ways. But some command placement rules should be followed as much as possible: 1) Predictability: use consistent interaction and command placement on all views of the application as much as possible; 2) ergonomics: consider how the placement of specific commands can improve the speed of operating commands or improve ease of use; 3) Aesthetics: Limit the number of commands to avoid the complexity of AppBar. Select an easy to understand or predict icon. Keep the text label short. There is also a common technique for placing commands: 1) place permanent commands on the right and first place default commands on the Right of AppBar. If there are only a few commands, the AppBar may only have commands on the right. 2) if there are a large number of commands on the edge, you can separate different command sets on the left or right to balance the AppBar and make the commands more accessible. 3) display/hide commands that have been disabled and commands that are not related to some environments should be hidden. When they are displayed, they should not be sorted by the persistent loop command. 4) Insert SELECT command the command that appears after the user executes the selection will appear on the leftmost side, any command here will slide to the right side. 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1A94022P-5.png "/> Step 5: For Common commands, some commands are commonly used to use standard positions and will appear in many applications. Therefore, we need to establish consistency. We should follow the following principles when deciding where to place frequently-used commands on the AppBar: 1) the commands related to the command selection and our selection are always displayed at the leftmost, whether the context commands are displayed during selection or the selected commands are affected. 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1A940A06-6.png "/> 2) create a command. If the application calls the" new "command to create an object of any new type, place the command on the right of the AppBar. This will provide a consistent location for each "new" command, regardless of the specific application or context), and use thumbnails for convenient access. 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1A9401H0-7.png "/> 3) delete command if the entities to be managed by our application may be located outside a specific application, such as a mail or camera application), you can use" delete/create ". "Delete/New" should always be displayed in this order. 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1A94061V-8.png "/> 4) Remove the command. If your application manages a list, such as a list of Agent items, a list of cities in a weather application, or a list of restaurants added to bookmarks, you can use "Remove/Add ". "Remove" should always be displayed on the left side of "add. 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1A9405E8-9.png "/> 5) Clear command if you are performing destructive operations on all possible items, you can use" clear ". Use the command label to clearly indicate the operation object of the command, such as "clear selection ". 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1A94010A-10.png "/> App BarBest practices1) Place commands in the same way and organize them according to the command set; 2) Place the context commands on the AppBar, when selecting a project without changing the view, the AppBar is displayed programmatically. 3) when there are too many commands, you must use the menu. 4) be sure to consider the rendering of the AppBar under the Tab View and the portrait screen view; 5) Be sure to design the AppBar as horizontal scrolling; 6) be sure to use the default style of commands, menus, and pop-up windows; 7) do not place the commands that are essential for key command users to complete tasks) on the AppBar; 8) do not place logon, logout, or other account management commands in the AppBar; 9) do not place the clipboard command for text on the AppBar. For more information about the App Bar, see the MSDN: add application bar.

This article is from the "Wang Zukang" blog, please be sure to keep this source http://wzk89.blog.51cto.com/1660752/1040299