#Win8Dev Tutorial: Integrating Application Bar in your Windows Store apps

If you are familiar with Windows Phone applications, you might be already aware of Application Bar. Application Bar is used to provide users with quick access to an application’s most common tasks, which are basically hidden when they are not needed.

Today in this chapter we will learn more about Application Bar in Windows Store apps along with integration and design guidelines.

Introduction to Application Bar

Application bar in an application is used to provide specific commands to the user which are not needed all the time. Hence, those commands are generally kept as hidden in the application bar and when the user needs them, bring them in the foreground before accessing. On need base user can bring the application bar by right clicking in the application UI, pressing Win + Z key combination or swiping from top/bottom edges of the screen. Also, the developer can programmatically show/hide the application bar when the user interacts with some commands.

In general, an application bar looks similar to this:

There are two different application bar available for Windows Store applications named as TopApplicationBar and BottomApplicationBar. As the name suggests, the top application bar resides at the top of the screen and the bottom application bar resides at the bottom of the screen.

The XAML code of application bars looks as below and available under the page. You can chose whether to use top application bar or bottom application bar. If needed, you can use both of them together in a screen.

<!-- TopAppBar design -->

<Page.TopAppBar>

    <AppBar x:Name="topAppBar">

        <Grid>

            <!-- design your application bar here -->

            .

            .

            .

            <!-- design your application bar here -->

        </Grid>

    </AppBar>

</Page.TopAppBar>

<!-- BottomAppBar design -->

<Page.TopAppBar>

    <AppBar x:Name="bottomAppBar">

        <Grid>

            <!-- design your application bar here -->

            .

            .

            .

            <!-- design your application bar here -->

        </Grid>

    </AppBar>

</Page.TopAppBar>

Both the application bar shows and hides automatically based on user interaction. In case you want to add specific commands to show or hide the application bar, you can do this programmatically. The “AppBar” exposes property named “IsOpen”. You can set it to True/False based on the requirement to show/hide it respectively.

There is an other property named “IsSticky”. By default it is set to false, that means, if click inside the application window when the app bar is open, it closes automatically. If you explicitly set that property to true, it will not hide the application bar until you set the IsOpen=”False” or the user right clicks in the application window.

Application Bar Design Guidelines

Here are few application bar design guidelines which you want to remember while developing a Windows Store application with integrated application bar:

• Distinct command groups in opposite side of the application bar.
• Use separator to distinguish two or more set of groups.
• Follow proper placement position of the application bar buttons.
• Show commands contextually on an app bar when an item is selected, and show the app bar automatically.
• Set the app bar's dismissal mode to sticky when displaying contextual commands.
• Use menus and flyouts when you have too many commands.
• Design you app bar for snap view and portrait view.
• Use the bottom bar for default commands and top bar for navigation purposes.
• Use the built-in icons for app bar commands.
• Don’t put the login, logout and other account management commands in app bar.
• Don’t put settings in the application bar.

The above list is collected from the MSDN Guidelines Page for Windows Store Application Bar and you can follow that link to know more about the design guidelines of application bar for Windows Store.

Integrating Application Bar in Windows Store apps

Let us start integrating a top app bar and a bottom app bar into our Windows Store application. To do this, first we will design our main application page to hold the application bar properly. As the application bar resides under the main page tag, we will add the above code and design it as below:

<!-- TopAppBar Design -->

<Page.TopAppBar>

    <AppBar x:Name="topAppBar" IsSticky="True" Background="Black">

        <Grid>

            <StackPanel Orientation="Horizontal">

                <Button Style="{StaticResource ClockAppBarButtonStyle}"/>

                <Button Style="{StaticResource ContactInfoAppBarButtonStyle}"/>

                <Button Style="{StaticResource CommentAppBarButtonStyle}"/>

            </StackPanel>

        </Grid>

    </AppBar>

</Page.TopAppBar>

<!-- BottomAppBar Design -->

<Page.BottomAppBar>

    <AppBar x:Name="bottomAppBar" Background="Black">

        <Grid>

            <StackPanel Orientation="Horizontal">

                <Button Style="{StaticResource FlagAppBarButtonStyle}"/>

                <Button Style="{StaticResource FavoriteAppBarButtonStyle}"/>

                <Button Style="{StaticResource GoAppBarButtonStyle}"/>

            </StackPanel>

        </Grid>

    </AppBar>

</Page.BottomAppBar>

You can see that, there are two app bars added in the page (as shown in the above code snippet) and in each app bar we will add a StackPanel with few buttons and add styles to those buttons. By default, the Visual Studio templates for Windows Store applications generates a lot of styles to be used in application bar but those are kept as commented.

You can find those styles commented in the “StandardStyles.xaml” file present in the “Common” folder as shown in the below screenshot:

If you open the file, you will find those styles grouped in various section in that file as shown below:

To enable these styles, select each group and uncomment them one by one as per your requirement. Once you uncomment, you will see them listed for Button style.

Now once you designed your application bars, build and run the project.  Right click on the application UI to see the application bars in the screen. To programmatically show/hide the application bar on specific command raise, set the IsOpen property respectively and in case you want to handle the sticky status, you can set the IsSticky property properly.

Now, once you run your application, you will be able to show, hide each application bar separately on click of different button. Our demo application will load the application as below:

End Note

I hope that this post will be useful for you to learn and integrate the application bar in your Windows Store metro application. In case any queries, please let me know. Subscribe to my blog’s RSS Feed and email newsletter to get updates directly to your inbox.

I am also available in Twitter, Facebook and Google+ so connect with me there for technical updates and discussions on any topic. Happy Coding.

Recommended Reading

• Walkthrough: The Windows 8 AppBar, you might as well have the coolest! (feat. Expression Design)