3 out of 6 rated this helpful - Rate this topic

How to share an app bar across pages (Windows Store apps using C#/VB/C++ and XAML)

In this article

What you need to know
Add a shared app bar to a page
Related topics

Important APIs

Each Page in a Windows Store app built for Windows 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. For example, you might provide a navigation bar at the top of your app that lets a user navigate between pages. you want to show the same navigation bar for every page instead of re-creating it in each page. Let's look at how you can share an AppBar across pages.

Roadmap: How does this topic relate to others? See:

What you need to know

Technologies

AppBar

Prerequisites

Instructions

Step 1: Add a shared app bar to a page

Use a root page to host the shared AppBar and a Frame. The Frame hosts the Page controls that show the app content.

Here, we assign an AppBar control with navigation commands to the TopAppBar property of the root page. We add a Frame to host the app pages that the user navigates to.

JJ150604.wedge(en-us,WIN.10).gif To add the app bar and frame to the root page

Add a page to host the AppBar and the Frame for navigation.
See GlobalPage.xaml in the complete code at the end of this tutorial.

Note This example assumes that you have either navigated to GlobalPage from another page, or set GlobalPage as the start page of your app.

Add an AppBar to the TopAppBar property.

XAML


<Page.TopAppBar>
    <AppBar x:Name="globalAppBar" Padding="10,0,10,0">
        <Grid>
            <StackPanel x:Name="leftCommandPanel" 
                        Orientation="Horizontal" HorizontalAlignment="Left">
                <Button x:Name="Back" Style="{StaticResource BackAppBarButtonStyle}"
                        AutomationProperties.Name="Back"  
                        Click="Back_Click"/>
            </StackPanel>
            <StackPanel x:Name="rightCommandPanel" 
                        Orientation="Horizontal" HorizontalAlignment="Right">
                <Button x:Name="page1Button" Content="1" 
                        Style="{StaticResource AppBarButtonStyle}"
                        AutomationProperties.Name="Page 1"  
                        Click="Page1Button_Click"/>
                <Button x:Name="page2Button" Content="2" 
                        Style="{StaticResource AppBarButtonStyle}"
                        AutomationProperties.Name="Page 2"  
                        Click="Page2Button_Click"/>
            </StackPanel>
        </Grid>
    </AppBar>
</Page.TopAppBar>

Add commands to navigate between pages.

C++


Page rootPage = null;
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    rootPage = e.Parameter as Page;
    frame1.Navigate(typeof(Page1), this);
}

private void Back_Click(object sender, RoutedEventArgs e)
{
    if (frame1.CanGoBack)
    {
        frame1.GoBack();
    }
    else if (rootPage != null && rootPage.Frame.CanGoBack)
    {
        rootPage.Frame.GoBack();
    }
}

private void Page1Button_Click(object sender, RoutedEventArgs e)
{
    frame1.Navigate(typeof(Page1), this);
}

private void Page2Button_Click(object sender, RoutedEventArgs e)
{
    frame1.Navigate(typeof(Page2), this);
}

Add a Frame in the root page to host the app pages.

XAML


<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Frame x:Name="frame1"/>
</Grid>

Add app pages between which the user can navigate.
See Page1.xaml and Page2.xaml in the complete code at the end of this tutorial. Notice that Page2.xaml has a bottom app bar that contains commands specific to that page.

Remarks

For more info, see scenario 3 in the XAML AppBar control sample.

Complete example

XAML


<Page
    x:Class="AppBarSample.GlobalPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppBarSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <Style x:Key="BackAppBarButtonStyle" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}">
            <Setter Property="Content" Value="&#xE0C4;"/>
            <Setter Property="AutomationProperties.AutomationId" Value="SuperstarButton"/>
            <Setter Property="AutomationProperties.Name" Value="Superstar"/>
        </Style>
    </Page.Resources>
    
    <Page.TopAppBar>
        <AppBar x:Name="globalAppBar" Padding="10,0,10,0">
            <Grid>
                <StackPanel x:Name="leftCommandPanel" 
                            Orientation="Horizontal" HorizontalAlignment="Left">
                    <Button x:Name="Back" Style="{StaticResource BackAppBarButtonStyle}"
                            AutomationProperties.Name="Back"  
                            Click="Back_Click"/>
                </StackPanel>
                <StackPanel x:Name="rightCommandPanel" 
                            Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button x:Name="page1Button" Content="1" 
                            Style="{StaticResource AppBarButtonStyle}"
                            AutomationProperties.Name="Page 1"  
                            Click="Page1Button_Click"/>
                    <Button x:Name="page2Button" Content="2" 
                            Style="{StaticResource AppBarButtonStyle}"
                            AutomationProperties.Name="Page 2"  
                            Click="Page2Button_Click"/>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.TopAppBar>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Frame x:Name="frame1"/>
    </Grid>
</Page>

C++


using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace AppBarSample
{
    public sealed partial class GlobalPage : Page
    {
        public GlobalPage()
        {
            this.InitializeComponent();
        }
 
        Page rootPage = null;
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            rootPage = e.Parameter as Page;
            frame1.Navigate(typeof(Page1), this);
        }

        private void Back_Click(object sender, RoutedEventArgs e)
        {
            if (frame1.CanGoBack)
            {
                frame1.GoBack();
            }
            else if (rootPage != null && rootPage.Frame.CanGoBack)
            {
                rootPage.Frame.GoBack();
            }
        }

        private void Page1Button_Click(object sender, RoutedEventArgs e)
        {
            frame1.Navigate(typeof(Page1), this);
        }

        private void Page2Button_Click(object sender, RoutedEventArgs e)
        {
            frame1.Navigate(typeof(Page2), this);
        }
    }
}

XAML


<Page
    x:Class="AppBarSample.Page1"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppBarSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
            <TextBlock x:Name="PageOne" 
                       Text="This is Page One" 
                       FontSize="30" HorizontalAlignment="Center"/>
            <TextBlock x:Name="UseAppBar" 
                       Text="(use AppBar to navigate between pages)" 
                       FontSize="20" HorizontalAlignment="Center"/>
        </StackPanel>
    </Grid>
</Page>

C++


using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace AppBarSample
{
    public sealed partial class Page1 : Page
    {
        Page rootPage = null;

        public Page1()
        {
            this.InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            rootPage = (Page)e.Parameter;
        }
    }
}

XAML


<Page
    x:Class="AppBarSample.Page2"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppBarSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
 
    <Page.Resources>
        <Style x:Key="StarAppBarButtonStyle" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}">
            <Setter Property="Content" Value="&#xE0B4;"/>
            <Setter Property="AutomationProperties.AutomationId" Value="SuperstarButton"/>
            <Setter Property="AutomationProperties.Name" Value="Superstar"/>
        </Style>
    </Page.Resources>
    
    <Page.BottomAppBar>
        <AppBar IsOpen="True">
            <Grid>
                <StackPanel x:Name="rightCommandPanel" 
                            Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button x:Name="starButton"
                            Style="{StaticResource StarAppBarButtonStyle}"
                            Click="StarButton_Click"/>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
            <TextBlock x:Name="PageTwo" 
                       Text="This is Page Two" 
                       FontSize="30" HorizontalAlignment="Center"/>
            <TextBlock x:Name="UseAppBar" 
                       Text="(use AppBar to navigate between pages)" 
                       FontSize="20" HorizontalAlignment="Center"/>
        </StackPanel>
    </Grid>
</Page>

C++


using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace AppBarSample
{
    public sealed partial class Page2 : Page
    {
        Page rootPage = null;

        public Page2()
        {
            this.InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            rootPage = (Page)e.Parameter;
        }

        // This is the handler for the AppBar button that is only available on this page.
        async void StarButton_Click(object sender, RoutedEventArgs e)
        {
            Windows.UI.Popups.MessageDialog dialog = 
                new Windows.UI.Popups.MessageDialog("You're a Superstar!");
            await dialog.ShowAsync();
        }
    }
}

How to share an app bar across pages (Windows Store apps using C#/VB/C++ and XAML)

What you need to know

Technologies

Prerequisites

Instructions

Step 1: Add a shared app bar to a page

Remarks

Complete example

Related topics