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.

Answer 2

And I would suggest you take care in customizing the app bar icons. Significant departures from the design principles may make your app less popular. UI testing shows that users like the consistency of standard UI. I've seen it done very tastefully and effectively (like in the Nook app), but I've seen it done poorly as well (not mentioning names :) Have fun.

Answer 3

Just edit the template of the control, remove the borders n the ellipse or replace it with rectangle in this case. For the colored background change the background color of grid containing the control in the template and modify the size of grid.

For that bear icon you can do like this

<AppBarButton.Icon>
        <BitmapIcon UriSource="ms-appx:///Images/Bear.png" />
</AppBarButton.Icon>

If u want the layout aware appbar use CommandBar or with an AppBar you have to programmatically handle app size changes.

see here- http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj662742.aspx

I did the same in my app.