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.