Global Application Bar for Windows 8 Applications

Question

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

To include this in my project, I set the global page as the start page in 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 change the OnLaunched method to go to the real main page:

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

I am adding event subscription for buttons, for example

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

After launching the application, the application bar is displayed, and I can navigate using the application button inside, but after the first navigation the AppBar does not appear on the landing page.

Any idea of ​​my mistake?
Thank you for your help.

Answer 1

What you want to do is set the AppBar to LayoutAwarePage, since all pages come from this page. For AppBar content, you can use UserControl to simplify coding and styling.

First create a 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 LayoutAwarePage constructor you want to create an AppBar, set the content in UserControl and add it to your Buttom or TopAppBar on the page - in this example, I use BottomAppBar and set everything that is contained in the constant, 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 in your Windows Store app on all pages that come from LayoutAwarePage.