Windows 8 bottom app bar

Question

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.

Answer 1

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.

Answer 2

<Page.TopAppBar>
    <AppBar>
        <TextBlock x:Name="TextBlock1" Text="Sample Text" Margin="0,0,0,0" Height="Auto" VerticalAlignment="Center" HorizontalAlignment="Left"/>
    </AppBar>
</Page.TopAppBar>