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.

you can follow this tutorial: [Quickstart: adding app bars](http://msdn.microsoft.com/library/windows/apps/hh781232.aspx) — Beno, May 17 '13 at 23:15

score 13 · Accepted Answer · edited Jun 08 '14 at 16:48

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.

In WinRT you have to put it inside the Page.BottomAppBar or Page.TopAppBar properties. I suggest you correct your answer to avoid down votes =). — Carlo, Apr 25 '12 at 21:52
@carlo is right. they changed it between dev and consumer previews — Robert Levy, Apr 25 '12 at 22:01
They did? I never noticed. I just put it in a grid in all my applications and it just works. What if I don't have a page? I was actually planning to stop using Microsoft's Frame/Page controls and replace them with mine because theirs suck (limited features). Do you mean I will need to build my own AppBar too? For now just putting it in a Grid works. I'll look for documentation that might indicate that this would stop working in future builds... — Filip Skakun, Apr 25 '12 at 22:30

score 1 · Answer 2 · answered Mar 31 '14 at 18:05

1

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

answered Mar 31 '14 at 18:05

Pierre

417
3
9

Windows 8 bottom app bar

2 Answers2