MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

Our good friend the HTML AppBar control sample again delivers an example of custom layout, in
Scenario 5. In html/custom-layout.html we see the markup for a custom top app bar containing
arbitrary elements:
Page Title
Admittedly, the result of this example is a little odd—it creates a navigation bar with a typical page
header with a back button where each control might have a focus rectangle. I don’t recommend
following this design!
As mentioned in the “Tips and Tricks” section in Chapter 4 (under “Control Styling”), you can
suppress the focus rectangle with a :focus { outline: none; } rule in CSS. To remove it from
the back button, for example, you can add the style to the following rule in css/custom-layout.css:
.win-appbar header .win-backbutton {
margin-left: 39px;
margin-top: 59px;
outline: none;
}
Notice again how this rule and the others in css/custom-layout.css all use the win-appbar class as a
base selector but only because it’s styling other generic classes like header and win-backbutton. If you
use specific classes in your app bar or navigation bar, you really don’t need the win-appbar selector at
all.
To implement a navigation bar like that of Internet Explorer or the Weather app, you can certainly
use a ListView control along with item templates or custom item rendering functions, where you’d wire
up itemInvoked events to WinJS.Navigation.navigate and so forth. Again, there’s nothing particularly
special or complicated here: with a custom layout, the app bar is really just a flyout container for other
HTML elements.
292