Global AppBar For Windows Store Applications

Before reading this article, please go through the following articles:

1. Developing Windows Store Apps : Introduction And Requirement Specification
2. Plans For Designing Metro Style Apps (Windows Store Apps)
3. Windows Store Application Life-Cycle
4. Guidelines to Pass Windows Store App Certification
5. Navigation Patterns to Develop Windows Store Application
6. Templates to Develop Windows Store Apps
7. Develop Your First Windows Store App (Hello World)
8. Controls to Design Windows Store Apps
9. Lay-out Design Guidelines For Windows Store Apps
10. Guidelines to Create Splash Screen For Windows Store Application

11. Configure Your Windows Store Application Using Manifest Designer

12. Working With Progress Controls in Windows Store Application

Introduction

In my last article we saw use of a progress bar control in a Windows Store app. In this article we will see how to use a global AppBar for Windows Store applications. As all of you know, in a Windows Store application we have a new control, called AppBar. In a Windows Store app, for each page we can have two app bars, one is the TopAppBar and the second is the BottomAppBar.

If you are planning to provide navigation using app bars then we need to add app bars on each page or provide a common command for all pages using an app bar but in this case you need to repeat the same code for all pages. In this article we will see how to create a global app bar. We can share the app bar content across pages in the Windows Store application. Let's start by using the following procedure.

Step 1

First you need one root page that holds our global application bar, so first decide which single page you want as your root page. Next add sub pages i.e. Page1.xaml and Page2.xaml respectively.

Step 2

On the root page add the app bar as in the following:

<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>

In the above markup we have added TopAppBar for our Windows Store app root page. This top app bar contains two stackpanels, one for holding the back button and the second for holding link or navigation buttons for the remaining two pages.

Step 3

Next add the frame element in your root page that loads the remaining two pages when a specific button is clicked in the app bar.

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

Step 4

Next in the code file of your root page, add the click handler for the app bar command buttons.

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);
}

Step 5

We are now done with the complete code of the root page. Next on your subpages override the OnNavigatedTo method as in the following:

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

 Step 6

Next run your application and see the global AppBar for your Windows Store application.

Conclusion

Using this technique we can create the global application bar for Windows Store applications.