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