Modern UI custom AppBar buttons

Question

I'm developing my first Windows 8 modern app and I seem to have difficulty finding the correct documentation for making app bar buttons that aren't like the default ones.

What I'm trying to do is something like the app bar in Microsoft Solitaire Collection, like this: http://www.windows8core.com/wp-content/uploads/2012/08/2b1.png

There's three things to notice:

1. The custom icon (the bear, in the first one)
2. It isn't like the default buttons with the text underneath an icon
3. It is rectangular and the width is proportional to the width of the app in filled and fullscreen-landscape modes. (In pinned mode, the buttons simply disappear, but for my application I'd like "icons-only" in pinned mode if possible).

I've started off by using <button>, since semantically they are buttons, and it seems that only <button> and <hr> belong in the app bar.

Do I set the parameters in the data-win-options attributes or is it something done in the JavaScript?

I am using JavaScript/HTML5, not C++/C#/VB. Here are the MSDN articles I've read regarding the app bar.

Answer 1

If this is an upper AppBar, which is typically used for navigation, you can actually provide a custom UI by specifying the "layout" property in data-win-options, with the value "custom", as discussed here.

You may also want to read up on styling app bars.

Last, but not least, check out the HTML AppBar control sample, which illustrates the use of custom layout, among other things.

For more info on Windows Store app development, register for Generation App.