Create Global AppBar in Windows Store Apps Using XAML/C#

In this article we are discussing AppBars in Windows Store Apps. In most applications, you want your AppBar to be "global". In other words, you want a single AppBar that is displayed on every page that you may navigate to and you don't want each page to have it's own AppBar.

This article demonstrates this concept of a global AppBar and shows how you to use the same AppBar as you navigate through various pages of an application.

Procedure

Step 1

Create a Blank Application of Windows Store Apps.

Step 2

Add a new page in the application that is used to create an AppBar that is visible in all pages.

Adding-new-page-in-windows-store-apps.jpg

Here is the code of GolbalPage.XAML.

<Page

    x:Class="GloballyAppBar.GlobalPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:GloballyAppBar"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Page.BottomAppBar>

        <AppBar x:Name="GlobalAppBar" Padding="10,0,10,0" AutomationProperties.Name="Global App Bar">                         

                <StackPanel x:Name="LeftCommands" HorizontalAlignment="Left"  VerticalAlignment="Center" Height="53">

                    <Button x:Name="Back" AutomationProperties.Name="Back" HorizontalAlignment="Left"  VerticalAlignment="Center" Style="{StaticResource BackButtonStyle}"/>

                </StackPanel>                          

        </AppBar>

    </Page.BottomAppBar>

    <Grid Background="White">

        <Frame x:Name="Frame1"/>

    </Grid>

</Page>

Code of .cs file.

namespace GloballyAppBar

{

    public sealed partial class GlobalPage : Page

    {

        MainPage rootPage = null;

        public GlobalPage()

        {

            this.InitializeComponent();

            Back.Click += Back_Click;

        }

        protected override void OnNavigatedTo(NavigationEventArgs e)

        {

            rootPage = e.Parameter as MainPage;

 

            Frame1.Navigate(typeof(Page1), this);

        }

        private void Back_Click(object sender, RoutedEventArgs e)

        {

            if (Frame1.CanGoBack)

            {

                Frame1.GoBack();

            }

            else

            {

                rootPage.Frame.GoBack();

            }

        }

    }

}

Step 3

Now, add another page to which we navigate from the MainPage.

Code of Page1.XAML file.

<Page

    x:Class="GloballyAppBar.Page1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:GloballyAppBar"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

 

    <Grid Background="#FF07AAF9">

        <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 go back)" FontSize="20" HorizontalAlignment="Center"/>

            <Button x:Name="PageTwo" Content="Go To Page Two" Grid.Row="1" HorizontalAlignment="Center" Click="PageTwo_Click"/>

        </StackPanel>

    </Grid>

</Page>

Code of Page1.XAML.cs file.

namespace GloballyAppBar

    public sealed partial class Page1 : Page

    {

        GlobalPage rootPage = null;

        public Page1()

        {

            this.InitializeComponent();

        }

        protected override void OnNavigatedTo(NavigationEventArgs e)

        {

            rootPage = e.Parameter as GlobalPage;

        }

        private void PageTwo_Click(object sender, RoutedEventArgs e)

        {

            this.Frame.Navigate(typeof(Page2), rootPage);

       }

    }

}

Step 4

Repeat Step 3 to add another page.

code of Page2.XAML file.

<Page

    x:Class="GloballyAppBar.Page2"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:GloballyAppBar"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="#AACC0AA0">

        <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 go back)" FontSize="20" HorizontalAlignment="Center"/>

        </StackPanel>

    </Grid>

</Page >

Code of Page.XAML.cs file.

namespace GloballyAppBar

{

    public sealed partial class Page2 : Page

    {

        GlobalPage rootPage = null;

        public Page2()

        {

            this.InitializeComponent();

        }

        protected override void OnNavigatedTo(NavigationEventArgs e)

        {

            rootPage = e.Parameter as GlobalPage;

        }

    }

}

Step 5

In the MainPage.cs file navigate to Page1, as in:

private void ShowMe_Click(object sender, RoutedEventArgs e)

{

   Frame.Navigate(typeof(GlobalPage),this);

}

Step 6

Now run the app and click on the button to navigate to the first page that contains a single, global AppBar and a Frame that allows you to navigate to multiple pages while leveraging the single AppBar across pages.

AppBar-in-windows-store-apps.jpg

frame-in-windows-store-apps.jpg

Click on the button to go to Page Two.

Now go to the first page; here we use an Appbar. Right-click on the screen to show the AppBar.

Appbar-with-back-button-in-windows-store-apps.jpg

The same AppBar is shown in Page 1 that is defined globally.

Globally-Appbar-in-windows-store-apps.jpg

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now