[SOLVED] Windows 8 bottom app bar

Windows 8 bottom app bar

I've been trying to get an App bar implemented in a WinRT metro app (C# / XAML), but don't know where to begin. I've tried using the <ApplicationBar/> tag and I get a Type not found error.

There's no help online, could someone update this post with the answer so that it'll serve as a reference to other programmers as well?

There's only a JavaScript sample which isn't of much help.

Solution

This should work:

<AppBar
    VerticalAlignment="Bottom">
    <Button
        AutomationProperties.Name="Play"
        Style="{StaticResource PlayAppBarButtonStyle}"
        Command="{Binding PlayCommand}" />
</AppBar>

– you would put that in the layout root grid of your page.

*EDIT

Note: According to documentation - you should put it in Page.BottomAppBar property, although at least in Windows 8 Consumer Preview - it works fine when used in any Grid, which is convenient if your UI isn't tightly coupled to a Page control.

*EDIT 2, response from MSFT:

The recommended approach is to use the Page.BottomAppBar/TopAppBar properties.

There are known hit-testing issues in the Consumer Preview if AppBars are added without using these properties
The AppBars do not use the proper animations if they are added without using these properties
If AppBars are added as children of arbitrary elements then it's easier for multiple controls to attempt to create/modify AppBars, resulting in an inconsistent user experience

*EDIT 3

The CustomAppBar in WinRT XAML Toolkit can be used anywhere, animates based on Vertical/Horizontal-Alignment, can have other content overlaid on top of it and also has a CanOpen property that allows to block it from opening.