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. Layout 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 the use of 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, the page adds 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 stack panels, one for holding the back button and the second for holding links 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.