In our earlier tutorial we have seen the design perspectives that should be considered while developing your first Windows Store application. Now 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.          [more]

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 and we can see the default code base as below.

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.

Code:

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

We can see some errors that are highlighted that the base styles for these buttons are not available. Basically we have these styles commented as a static resource and available in the StandardStyles.XAML file in Common folder as shown in the screen below.

Uncomment these styles that we are going to use with the buttons and we can see the error indicators are now removed as the styles that the button is looking out is available in the resources locally as shown in the screen below.

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.

Now we have a scenario of making the app sticky even when the end user clicks on the application page or on the Application Bar, yes we have a property available for that as well which is called IsSticky. Just enable the IsSticky property to true and we can see the Application Bar will be available even when the user clicks on the Application Bar or on the application page as shown in the code below.

Now run the application and we can see the Application Bar will be loaded and made available at the bottom of the Application Page and is sticky even when the user clicks across the page and the bar as shown in the screen below.

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. To analyze this I have removed IsSticky property from the code so that the Application Bar can be made closed and opened and respective event can be triggered as shown in the screens 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.

That’s it from todays tutorial, see you all in the next tutorial on this series on Learning Windows Store Application Development in 31 days.

Hope this tutorial will be useful to you, If interested please don’t forget to connect with me on Twitter, Facebook and GooglePlus for updates. Also subscribe to F5debug Newsletter to get all the updates delivered directly to your inbox. We won’t spam or share your email address as we respect your privacy.