CODEWITHSUNDEEP
xamlwinrt-xamlwindows-phone-8.1
zhrnz
zhrnz

Reputation: 33

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:

<Page.BottomAppBar>
    <CommandBar ClosedDisplayMode="Minimal" Background="#FF004557">
        <CommandBar.SecondaryCommands>
            <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" />
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Page.BottomAppBar>

How do I do it?

Upvotes: 2

Views: 1939

Answers (3)

iRiziya
iRiziya

Reputation: 3245

You can put your AppBar code into App.xaml and correspondence code behind into App.xaml.cs and then include that AppBar by its name in the number of pages where you want it like..

<phone:PhoneApplicationPage
x:Class="PhoneApp1.myPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
.
.
.
.
ApplicationBar="{StaticResource myGlobalAppBar}" >

where "myGlobalAppBar" is the name of AppBar given in the App.xaml file.

Upvotes: 0

Jerry Nixon
Jerry Nixon

Reputation: 31803

Okay.

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);
    }
    Window.Current.Activate();
}

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!

Upvotes: 4

Amit Bhatiya
Amit Bhatiya

Reputation: 2621

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

Upvotes: 2

Related Questions