Windows Store App Development Tutorial - Part 5 : Using Application Bar in Windows Store application

In this tutorial we are going to see a very interesting topic of a feature that is available with Windows Store which is called Application Bar. In Windows Store app, Application Bars are hidden by default and is transient by nature, which means it shows up and disappears on request. We have option to put the Application bar at the top of the page or at the bottom of the page or even in both the places. We can get the application bar on right click of the user input, pressing Control+Z or swiping at the top or bottom respectively. 

Application Bar is used to provide users with quick access to an applications most commonly used tasks and to provide a short cut to navigate to pages which are accessed regularly. We can simply say Application Bar is a row of buttons in a ellipsis style that can be places in Top or bottom of the page in a transient way to slide and disappear when the user request for the same. Let us start the steps on using this Application Bar in our project.

How to use the Application Bar?

Open Visual Studio 2012 IDE and provide a valid project name for the Windows Store Blank Template and provide a location to save the project as shown in the screen below. 

To start adding the Application Bar capability to the application MainPage.XAML page, navigate to the XAML code of the page.

We have option to add the Application Bar in two places as we have already mentioned at the beginning. We can add the Application Bar to the top of the page or at the bottom of the page using TopAppBar or BottomAppBar property of the page. First lets add the bottom App Bar to the page as shown in the below code which basically uses the BottomAppBar property.

<Page.BottomAppBar>
        <AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
            <Grid>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                    <Button Style="{StaticResource AddAppBarButtonStyle}" Click="AddButton_Click"/>
                    <Button Style="{StaticResource EditAppBarButtonStyle}" Click="EditButton_Click"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                   <Button Style="{StaticResource HelpAppBarButtonStyle}" Click="HelpButton_Click"/>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>

Now build and execute the application and we can see the application bar shows on right clicking the application page or by pressing Control + Z buttons as shown in the screen below.

We can see the highlighted (Red box) Application bar that is popped out on the button clicks in the above screen. Now lets us play further to programmatically tell the application that it should pop out once the application is loaded. We have a property called IsOpen in the AppBar class which makes it easy to tell the application to pop out the Application Bar as soon as the application is loaded. So make the code changes as highlighted in the screen below.

Now run the application and we can see the application once loaded will have the Application Bar opened and visible to the end users which makes it easier for the users to analyze the shortcuts and the most used items in place. But we need to nice on clicking the application page or the Application bar will slide in the to the bottom.

Our immediate next task is to handle the events that are available with the buttons that are listed on the Application Bar and also we have few more events that can be handled for specifically on Application Opening and Application Closing to track on some user activities. We can handle that using Opened and Closed event props that are available with the AppBar class using the code as shown in the screen below.

So we handle these events in the code behind by simply right clicking on the event name and select the option Navigate to Event Handler and write the logic on how to handle the event as shown in the screen below.

Now let us run the application and see how exactly the events the triggered on each of the click event as shows below : 

While designing the application Microsoft have suggested some of the Dos and Don’t specific to Application Bar are as follows.  

• Do place commands consistently, and organize them into command sets.
• Do set the app bar's dismissal mode to sticky when displaying contextual commands.
• Do use menus when you have too many commands.
• Do design your app bar for snap and portrait view.
• Do design for horizontal scrolling.
• Do use the default styles for commands, menus, and flyouts.
• Do use the bottom app bar for commands and the top app bar for navigation.
• 
  
• Don't put critical commands on the app bar.
• Don't put clipboard commands for text on the app bar.
• Don’t put login, logout, or other account management commands in the app bar.

Hope this tutorial will be useful . Thank You.