Programming the WinJS App Bar–Part 3–Advanced Topics



Hello – welcome back to the third and final installment of the (3) part series on programming the WinJS App Bar. In this post, I’ll cover some more of the exciting advanced topics in programming the WinJS App bar like:

  • Creating “Sticky” App Bars – that are not lightly dismissed
  • Implementing a “Navigation” App Bar
  • Incorporating CSS styling – for maximum flexibility for customizing the look and feel
  • Localization - for global appeal of your application
  • Integrating custom Fly-Outs – for easy pop-up dialogs for user interactions

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)?

Creating “Sticky” App Bars

Ok, you you have the basics down and you have some cool App Bar icons to use for your application – how do you make the most of an App Bar that is mostly hidden?  In some cases, it is highly desirable to have your App bar remain visible – like when invoking the Camera to take a picture for example.

The good news is that it is extremely easy to do – by setting the AppBar data-win-options to “sticky:true” – like below:


By invoking this setting, the App Bar will remain visible until the user swipes down or up again to “dismiss” the AppBar,


Implementing a “Navigation” App Bar

Besides using an AppBar as a “commanding surface” from the bottom of your screen, they can also be used as a means of implementing “Quick Navigation” into your App,  For example, in the Microsoft Bing Sports App, if you swipe down form the top of your screen, you will notice an AppBar at the top of your screen that will allow you to quickly navigate to the sport of your choice:


This effect is very easy to do – and again all it takes it setting the AppBar data-win-options to “placement:'top'” – like below:



Incorporating CSS Styling

For ultimate control over how your AppBar looks – you can implement the use of Cascading Style Sheets (CSS) to fully define the colors, fonts, and size of your AppBar items.  All it takes to make this happen is (2) simple steps:

(1) Assign a class to the AppBar control like below:


(2) Define a CSS Style sheet that overrides the default App Bar styles with your own styling:


See this link for a full set of the available AppBar Styles.


Localization of your App Bar Resources

When you are ready to take your application global – you will want to implement App Bar localization – so that folks in different countries can understand the App Bar commands in their native language.  Fortunately, it is very easy to do this in Windows 8.

The first step is to define your AppBar Button with the additional “data-win-res” attribute – which defines the use of a resource file to be used for language translations:


The next step is to add a new folder to your solution named “Strings”.  Then add a new folder underneath the Strings folder for each language code you wish to support:



Then “Add” a new “Resource File (.resjson)” item to the folder: 



At this point, you can provide language translations by editing the corresponding resource file for each language you wish to support.  Note that the format is simply a text file – in JSON notation.


The last thing required to implement localization for AppBar commands is to insert the following (2) lines of code into your application to handle processing for resource file translations and in the event the user changes the default language at the OS level:


Integrating Custom Fly-Outs from the App Bar

One of the coolest capabilities in Windows 8 applications written using HTML/JS/CSS is the capability to implement custom Fly-Outs in your application to handle user input or notifications.

There are several steps to implement a custom App Bar Fly-Out, the first is to define your Fly Out in HTML and assigning the data-win-control attribute to "WinJS.UI.Flyout":


The next step is to define an App Bar command button with the following (2) data-win-options set to type “flyout” and the ID of the Fly Out HTML:


Once these are in place – you have a really nifty Fly Out control that can be invoked by a command in the App Bar:


The Fly Out can then be easily dismissed by pressing on the command button in the Fly Out – or by clicking anywhere else on the screen outside of the Fly Out control.

And there you have it!  Some great ways to add advanced functionality for your Windows 8 App Bar commands!

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

Here’s a link to all of the full code samples.

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