How do i show appbar that appears on the top ( i don't know what it's called, i assume it's error bar ?)

Question

How do i show appbar that appears on the top ( i don't know what it's called, i assume it's error bar ?)

I know appbar are for commands etc etc. But how about the "appbar" that appears on top (for errors). The one that slideDown from the top, with buttons + text showing the error. Or is that custom made ?

Just to be clear.

Answer 1

I think it is called the Navigation Bar and it is used for flat style navigation: (http://msdn.microsoft.com/en-us/library/windows/apps/hh761500.aspx#flat_system)

I have having trouble finding any information on it in the HTML5/Javascript side.  In XAML, it is done by setting the TopAppBar for a Page control:

<Page.TopAppBar>
<AppBar>
<!--App Bar Contents here -->
</AppBar>
</Page.TopAppBar>

---

Dave Paquette @Dave_Paquette www.davepaquette.com

Answer 2

It seems what i have seen so far, is

Appbar with options [ layout = 'custom' and placement = 'top' ] , or custom UI. But custom UI is bad for error message according to the documentation. So it must be appbar that is placed on top.

And i tried the flat style navigation like Internet Explorer Metro did, and it seems the way it slidesDown match perfectly with what i have been seeing.

Answer 3

thanks Dave.

Answer 4

If I understand your question correctly. All you need to do is set the placement property on the data-win-options. Here is an example.

<div id="createAppBar"
     data-win-control="WinJS.UI.AppBar"
     data-win-options="{placement: 'top'}">
     <button data-win-control="WinJS.UI.AppBarCommand"
             data-win-options="{id:'cmdBack',label:'Refresh',icon:'refresh',section:'global',tooltip:'Refresh'}">
     </button>
</div>

Thanks,

Todd

---

STBraley