Windows 8 App Features - App Bar Advanced

Posted by in Windows 8 category on for Advance level | Points: 250 | Views : 7451 red flag
Rating: 4 out of 5  
 1 vote(s)

Windows 8 introduced a whole new style of application development. Windows 8 Style applications display Content over Chrome. This new style of application development help the end user to develop touch enabled applications with the same style as Windows 8. Windows 8 Style applications are based on Tiles, App Bars, Contracts, etc. We will be discussing about various Windows 8 features in a series of articles. In this article we will discuss about the App Bar feature.

App Bar

App bars are the navigation or command bars hidden in top or bottom edges of the screen. We have already discussed about the App Bar in the article Windows 8 App Features – App Bar.

In this document we will discuss about the App Bar declaration using a custom icon and take a closer look into the Global App Bar implementation.

App Bar with Custom Icon

Windows 8 provides a list of frequently used App Bar icons; but in some cases we may need to define our icon and content for the App Bar. Following sample shows how we can use a built-in App Bar icon and how we can define a custom App Bar icon

Play App Bar icon, which is defined by the Windows 8

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

Custom image and content


 <Button x:Name="customer" Click="customer_Click">

                                <StackPanel Orientation="Vertical">
                                        <Image Source="Assets/Customer.png" Width="40"/>
                                        <TextBlock Text="Customer"/>

Page Specific App Bar

As specified in the previous article, we are using a global App Bar for defining the main App Bar, which will be available for all the pages. Apart from this global App Bar, some pages may have specific App Bar requirements like the Customer page may require two more actions like New Customer, Edit Customer, etc.

For defining a page specific App Bar icon along with the Global App Bar, access the global App Bar in OnNavigateTo method and add the new icons to it.

Global App Bar declaration


            <AppBar >
                    <StackPanel Orientation="Horizontal" x:Name="bottomAppBar">
                            <Button x:Name="utility" Click="utility_Click">
                                            <StackPanel Orientation="Vertical">
                                                   <Image Source="Assets/utility.png" Width="40"/>
                                                   <TextBlock Text="Utility"/>
   < /Page.BottomAppBar> 

Accessing the Global App Bar in Customer Page and adding a new icon for “New Customer” action.


protected async override void OnNavigatedTo(NavigationEventArgs e)

            rootPage         = e.Parameter as MainPage;
                    bottomAppBarPnl = rootPage.FindName("bottomAppBar") as StackPanel;
            if(bottomAppBarPnl != null)
            {                        // Create the button to add                       newCust = new Button();
                        newCust.Content = "New Customer";
                        newCust.Click += new RoutedEventHandler(newCust_Click);
                        // Add the button to the AppBar

When navigating to another page, we need to remove the New Customer action icon from App Bar. Define the removal in the OnNavigateFrom method.


protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)

                   if(bottomAppBarPnl != null)
                        // Unhook the Click event handler for the button
                        newCust.Click -= new RoutedEventHandler(newCust_Click);
                   // Remove the button from the AppBar


Windows 8 introduced the new Windows 8 Style application development, which enable the user to develop quick touch enabled applications with a new style. App Bar is one of the major features in Windows 8 Application development.


Page copy protected against web site content infringement by Copyscape

About the Author

Full Name: Ambily KK
Member Level: Silver
Member Status: Member,Microsoft_MVP,MVP
Member Since: 5/18/2010 1:05:25 AM
Country: India
Thanks Ambily K K
I have over 9 years of experience working on Microsoft Technologies. I am carrying the passion on Microsoft technologies specifically on web technologies such as ASP .Net and Ajax. My interests also include Office Open XML, Azure, Visual Studio 2010. Technology adoption and learning is my key strength and technology sharing is my passion.

Login to vote for this post.

Comments or Responses

Posted by: Ak8912351 on: 9/30/2017 | Points: 25
Windows 8 is by far the most fabulous operating system by Microsoft. It's flexible and very easy to operate. This article about App features is very informative. Thanks a lot for sharing.

Login to post response

Comment using Facebook(Author doesn't get notification)