Global App bar on windows 8 application

Question

I'm working on a Windows 8 application project. I'm using Visual Studio 2012 and it's predefined Templates (GroupedPage, SplitPage, ItemsPage).
At this time I need to add an App bar. the way I choose is to create one and display it on all of the pages. I'm readind this article : http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj150604.aspx

To include this on my project, I set the Global page as start page on the App.xaml

protected async override void OnLaunched(LaunchActivatedEventArgs args)
...
  if (!rootFrame.Navigate(typeof(GlobalPage), args.Arguments))
                    throw new Exception("Failed to create initial page");
...

On the Global page, I'm changing the method OnLaunched, in order to get to the real main page:

 rootPage = e.Parameter as Page;            
            frame1.Navigate(typeof(MainPage), this);

I add event subscription for buttons, like

 private void ButtonBlogList_Click(object sender, RoutedEventArgs e)
        {
            this.Frame.Navigate(typeof(BlogListManagement), this);
        }

After launching application, the App bar is displayed, and I can navigate with the app button inside, but after the first navigation, AppBar is not displayed on the target page.

Any idea of my mistake ?
Thanks for your help.

Answer 1

What you want to do is to set the AppBar on the LayoutAwarePage since all pages derives from that page. For the AppBar's content you might want to use a UserControl, for ease of coding and styling.

First create the UserControl:

<UserControl
x:Class="AppBarGlobal.AppbarContent"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppBarGlobal"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">

<StackPanel Orientation="Horizontal">
    <Button
        Content="1"
        Style="{StaticResource AppBarButtonStyle}" />
    <Button
        Content="2"
        Style="{StaticResource AppBarButtonStyle}" />
</StackPanel> </UserControl>

And then in the constructor of the LayoutAwarePage you want to create the AppBar, set the content to the UserControl, and add it to your Buttom or TopAppBar on the page - in this sample I use the BottomAppBar and set everthing in the consturctor, like this:

    public LayoutAwarePage()
    {
        bar = new AppBar();
        bar.Content = new AppbarContent();
        this.BottomAppBar = bar;
        //and the remaining code for the constructor hereafter.

This should allow you to have a Global App bar inside your Windows Store app on all the pages that derive from LayoutAwarePage.