locked
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.

    Thursday, June 21, 2012 2:05 PM

Answers

All replies

  • 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

    Thursday, June 21, 2012 2:31 PM
  • 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.

    Thursday, June 21, 2012 2:50 PM
  • thanks Dave.
    Thursday, June 21, 2012 2:52 PM
  • 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

    • Proposed as answer by phil_ke Monday, June 25, 2012 8:57 AM
    Sunday, June 24, 2012 9:56 PM