AppBarJB2 

Hello – we’re back with the second installment of the (3) part series on programming the WinJS App Bar.  In this post, I’ll cover some more of the finer points around customizing the look & feel of your App Bar – specifically around how to find (or create your own) cool App Bar icons and how to position your App Bar and App Bar Commands according to the Windows 8 UX guidelines.

Just for a quick re-cap, here is the link to part 1 for a basic introduction and below are the links to the 3-part “How Do I” short video series on programming the WinJS App Bar for Channel 9 – here’s the line-up:

#1 - How Do I: Implement App Bars in a Windows 8 Metro Style Application (Part1)?
#2 - How Do I: Implement App Bars in a Windows 8 Metro Style Application (Part2)?
#3 - How Do I: Implement App Bars in a Windows 8 Metro Style Application (Part3)?

App Bar Icons – (3) options

Ok, you you have the basics down and now you are looking for some cool icons to use in your app Bar.  The first resource I will point you towards is the “stock” icons that are available in Windows 8. 

Option #1 – Windows 8 Default Icons:

To see the list of default icons:

  • Create a new (or open an existing) JavaScript Windows 8 App using Visual Studio 2012.
  • Expand the References\Windows Library for JavaScript \ JS \ UI.JS file.
  • Search for the word ”Glyphs” and you should see a screen similar to the one below:

AppBar_Icons_1

  • Here, you will see @ 193 definitions for default icon values that you can use in your Windows 8 application.
  • To use these icons in your App – simply reference them by name when specifying the icon value like below:

AppBar_Icons_2a 

Option #2 – Segoe UI Fonts:

The next resource for finding some cool App Bar icons is to make use of the Segue UI Fonts.  The easiest way to do this in Windows 8 is to invoke the search charm from the Windows 8 Start Screen by swiping from the left and selecting the “Search” charm (or just hit any alpha-numeric key on a physical keyboard) and then typing the words”CHAR” – this will display the “Character Map” in the search results:

AppBar_Icons_4

After selecting the Character Map – you will see the Character Map utility – be sure that the Segoe UI font is selected in the drop-down:

AppBar_Icons_3b

From here, you can browse through the many interesting icon values in this font.  When you find the one you want, be sure to note the specific character value – this will be used to denote your icon value by adding the prefix of “\u” + character value like so:

AppBar_Icons_2b

Option #3 – Custom Icon Images:

If you haven’t found the right icon yet from either the default Windows 8 icons or the Segue UI fonts, you can always create your own.  There is a great example of how to do this in the Windows 8 App Bar control Sample

The base size of the custom PNG image is 40 pixels x 40 pixels, with 2 rows of 4 images. The 1st row represents the normal button state, and the 2nd row is for the “toggled state” if your App Bar command has toggled states (like Pin or Un-Pin).  Below is an example PNG for a custom icon for an “Accept” command from the SDK App Bar Control Sample above:   

AppBar_Icons_2c

Check-out this recent blog post for more information on how to create your own custom PNG images for use as App Bar icons. 

As you can see, there are a wide variety of options available to you for finding the right icon for your App Bar.

 

App Bar – Positioning

So now that you have some great looking icons for your App bar commands – the next topic to cover is positioning these app Bar commands on the bottom or top of the screen.  Knowing when and how is the key to success here – as far as the question of App Bar on the top or bottom – the answer is that App bars on the top of the screen are reserved for “Navigational” commands.  The bottom App bar is reserved for Application commands.

 

Left-side / Right-side

The bottom left-side of the App Bar is reserved for contextual commands for your application – the right-side is reserved for global, App-wide commands.

The way to denote these is through the use of the “Section” attribute; note that setting the value to “Selection” will display the App Bar command on the left-side; using the value of “Global” will cause the App Bar command to display on the right-side of the screen: 

AppBar_Icons_7

 

Top / Bottom

By default, the App Bar will display on the bottom of the screen.  To denote that the App Bar should be placed on the top of the screen (again for App Navigation) – all we have to do is modify the data-win-option for the “placement” attribute and set it to “top”:

AppBar_Icons_8  

And there you have it!  There are multiple ways to get some great icons for your Windows 8 App Bar commands (including creating your own) along with how to position the App Bar and App Bar commands on the Top/Bottom or Left/Right.

Take a look at the screencast – @ 10 minutes: How Do I: Implement App Bars in a Windows 8 Metro Style Application (Part2)?

Here’s a link to the full code samples.

And be sure to check-out the entire series of “How-Do-I” Windows 8 videos on Channel 9

Technorati Tags: