There are many analogies between Windows Phone and Windows 8 applications, and the Application Bars are for sure one of these. Windows Phone introduced the application bar in his first release and, no matter if it's rough and limited, it's an important surface that adds space to the the main phone canvas. Windows 8 reprises and extends the application bar's concept making it so much flexible and extensible that requires a specific guidelines to rule the ways it may be used.

Giving a name to the bars

In Windows 8 the application bars are two, one on the top of the screen and the other on the bottom, and they can host complex layouts, not limited to a small set of components, but completely integrated into the Visual Tree. From the development point of view, you can think at the application bars like an extension of the screen that is usually hidden but they appear when the user swipe on the top or bottom. This area can host any content, from a simple StackPanel with a number of buttons to a complex grid or a scrollable list of items.

Usually the space of these bars is ruled to host elements that are uniform across different apps. So the top application bar is usually named "navigation bar" and is used to contain elements, categories, document thumbnails and everything else that can support the user when he has to navigate between different contents. A perfect example of "navigation bar" is the browser's bar that is used to display the current opened pages and allow the user to switch between one and the other. This application bar also hosts the commands that are related to the navigation, like the button used to open a new tab.

The bar on the bottom side instead is named "command bar" and is usually targeted to host global or contextual commands. When I talk about "global commands" I mean all the actions that are valid in the whole application. These are usually hosted in the leftmost part of the command bar. On the rightmost side they are hosted the commands that are specific to the page, action or items that are currently focused by the user interaction. You can make these command appear or disappear based on the elements that the user are interacting with. For example, when an item in a list is selected you can make it appear a "delete" button that disappears when the list hasn't a selection.

Bars basics

In Windows 8 the Page exposes two properties, one for each app-bar. These properties allow you to use an element of type AppBar that is the layout root for each of the application bars.

For Top App Bar

<Page.TopAppBar>

<AppBar>

<!-- Place here layout for top appbar -->

</AppBar>

</Page.TopAppBar>

For Bottom App Bar

<Page.BottomAppBar>

<AppBar>

<!-- Place here layout for bottom appbar -->

</AppBar>

</Page.BottomAppBar>

Just before to discuss about the layout of each bar it is better to be in touch with some properties that apply to the container. There are two important properties you have to deal with. These are additional to the normal properties that usually apply to a ContentControl. They are the IsOpen and IsSticky.

Since it is easy to understand that IsOpen handles the status of the application bars, allowing to programmatically open or close the bar itself, without a direct request by the user, the IsSticky is not intuitive to understand. It rules the way the application bar is dismissed after the user clicks outside of it. Normally the action of clicking-away automatically imply that the application bar hides itself behind the border where it is attached. When you set to true the IsSticky property, the application bar does not honour the click away action, but it requires that the closing action is determined by the developer by setting to false the IsOpen property. This is useful, as I will show in a few, when you attach a context menu or a flyout to a command and you handle the closing of the bar when an item of the menu is clicked.

Inside an application bar you can put whatever you need for your application and, there is no limitation for the size of the bar. As an example you may want to use a set of buttons in the command bar so, you can use a horizontal StackPanel to organize the buttons:

<AppBar Background="Orange">

<StackPanel Orientation="Horizontal">

<Button Style="{StaticResource SkipBackAppBarButtonStyle}" />

<Button Style="{StaticResource PlayAppBarButtonStyle}" />

<Button Style="{StaticResource PauseAppBarButtonStyle}" IsEnabled="False" />

<Button Style="{StaticResource SkipAheadAppBarButtonStyle}" />

</StackPanel>

</AppBar>

Using Flyouts

Context menus are not the sole thing you can pop up from the application bar. You can also use a flyout. Flyout is an alias of "Popup" and they allows to host special contents that go beyond the simple list of clickable items. As an example you can ask for filtering options or for the confirmation of an action. Unfortunately flyouts are not directly available in XAML (it is the sole limitation of XAML over HTML5 that instead has a specific control) and you should be forced to manipulate a Popup control. Thanks to "callisto", a library published by Tim Heuer, you can pop up a flyout easily as you would do with a context menu:

private void Button_Click(object sender, RoutedEventArgs e)

{

Button button = sender as Button;

if (button != null)

{

Flyout flyout = new Flyout();

flyout.Content = new MyUserControl();

flyout.Placement = PlacementMode.Top;

flyout.PlacementTarget = button;

flyout.IsOpen = true;

}

}

For more details:

http://www.silverlightshow.net/items/Windows-8-Metro-Discovering-the-Application-Bars.aspx

http://blogs.msdn.com/b/windowsappdev/archive/2012/09/06/embracing-ui-on-demand-with-the-app-bar.aspx

http://weblogs.asp.net/broux/archive/2012/07/03/windows-8-application-bar-buttons-symbols.aspx

https://github.com/timheuer/callisto

http://timheuer.com/blog/ and for more details you can follow him on twitter @timheuer

Keep yourself updated with the latest news at Microsoft. Follow us on twitter @msgulfcommunity

Looking a group for developers and designers W8 and WP8?

- Join Windows 8 Warriors on Facebook !