How to share a BottomAppBar with multiple pages in WP 8.1

My app have multiple pages and I want all of them to have the same bottom app bar

Here's the code for my bottom app bar:

    <CommandBar ClosedDisplayMode="Minimal" Background="#FF004557">
            <AppBarButton x:Name="AppBar_1" Label="AppBar_1" Click="AppBar_1_Click"/>
            <AppBarButton x:Name="AppBar_2" Label="AppBar_2" Click="AppBar_2_Click" />
            <AppBarButton x:Name="AppBar_3" Label="Appbar_3" Click="AppBar_3_Click" />
            <AppBarButton Label="About" />

How do I do it?



When your app runs the first time the first thing that executes is the OnLaunched method in your App.xaml.cs file. It probably looks like this:

protected override void OnLaunched(LaunchActivatedEventArgs e)
    Frame rootFrame = Window.Current.Content as Frame;
    if (rootFrame == null)
        rootFrame = new Frame();
        Window.Current.Content = rootFrame;
    if (rootFrame.Content == null)
        rootFrame.Navigate(typeof(MainPage), e.Arguments);

Navigation in Windows 8 is handled by the navigation framework which is a lot like a browser. If you call the browser a frame than you get it. There is one frame and pages load inside it. You can load another page, then go back in the frame like you would go back in a browser to get to the previous page. And, like your browser has history, your Windows 8 XAML frame has a backstack to accomplish this. You can also go forward.

That OnLaunched code creates the first frame in your app (since there is not one there by default) and sets it to the Windows.Current.Content which is the native UI container for all apps. Specifically, it's the line Window.Current.Content = rootFrame;.

From this point forward, pages in your app, including your MainPage are loaded inside this new root frame. This is the typical implementation for a Windows 8 app. This changes with a shared app bar. A shared app bar does not set Window.Current.Content to a frame but instead sets it to a root page that has a frame inside it.

The goal here is that the root page never changes. When you navigate, you are actually navigating inside the frame that itself is inside the root page. As a result, you can put things in the root page, like an appbar. This appbar would be shared across all pages that are loaded in the root page's frame.

It's a clever implementation. But there is a caveat. If any of your pages need to have a custom appbar themselves, you would need to write quite a bit of special code to inject the page's appbar into the shared appbar. If you don't have this "custom" requirement, then this is a simple and effective solution.

Option 2

There no reason you can't create a UserControl that implements an AppBar or CommandBar and simply include that in the pages you what to have shared logic. That's probably the way I would do it if there were any chance of a custom appbar in my pages.

Best of luck!

Each Page in a Windows Store app using C++, C#, or Visual Basic can have an AppBar assigned to its TopAppBar and BottomAppBar properties. But you might want to use the same AppBar across related pages in your app to provide common navigation or commands.

Here is a Tutorial How to share an app bar across pages

Need Your Help

Spy++ alternative that can send messages

winapi messages

Any good alternative for Spy++ that allows sending messages to windows?

Having trouble adding a for loop to program

java loops if-statement for-loop jgrasp

I'm having trouble adding a for loop into my older program. I have to make it so at the end the user has an option to ask the question again. This is what I have so far

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.