Windows 8 App Features - App Bar Advanced

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

                    
   	<Button.Content>

                        
   	   	<StackPanel Orientation="Vertical">

                            
   	   	   	<Image Source="Assets/Customer.png" Width="40"/>

                            
   	   	   	<TextBlock Text="Customer"/>

                   
        	</StackPanel>

                    
   	</Button.Content>

                
</Button>

 
 
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

 

<Page.BottomAppBar>
        
   	<AppBar >

            
   	   	<StackPanel Orientation="Horizontal" x:Name="bottomAppBar">
	
                
   	   	   	<Button x:Name="utility" Click="utility_Click">

                    
   	   	   	   	<Button.Content>

                        
   	   	   	   	   	<StackPanel Orientation="Vertical">

                            
   	   	   	   	   	   <Image Source="Assets/utility.png" Width="40"/>

                            
   	   	   	   	   	   <TextBlock Text="Utility"/>

                   
        	   	   	   	</StackPanel>

                    
   	   	   	   	</Button.Content>

                
   	   	   	</Button>
   	   	----------------------------------------

   	   	</StackPanel>
        
   	</AppBar>
   < /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

               
    	   	bottomAppBarPnl.Children.Add(newCust);

            }

        }

 
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

               
    	   	bottomAppBarPnl.Children.Remove(newCust);

            }
}

 
Conclusion

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.

 

If you like this article, subscribe to our RSS Feed. You can also subscribe via email to our Interview Questions, Codes and Forums section.