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. App bars can be invoked by mouse right click, Win+Z
key or by a swipe in top or bottom edges. For an application you can add two
app bars – one on top and another on bottom.
Top App Bar is used for navigation and the bottom App Bar is
for Commands. For example, if you want to move to a particular page, we can use
the top App Bar to define the navigation to the page. Actions like New, Edit,
Save, Filter, Sort, etc. needs to be added to the bottom App Bar
Note: Windows 8 Application can be developed using various
programming languages like HTML/Javascript and XAML/C#. For our samples we use
the XAML C# combination.
Bottom App Bar
You can add App Bars to your app using XAML designer. Following code define a bottom App Bar with
two action buttons –Edit and Help.
<Page.BottomAppBar>
<AppBar x:Name="bottomBar" Padding="5
5 5 5" Background="Black">
<Grid>
<StackPanel
HorizontalAlignment="Left" Orientation="Horizontal">
<Button x:Name="edit" Content="Edit"
/>
</StackPanel>
<StackPanel
Orientation="Horizontal" HorizontalAlignment="Right">
<Button x:Name="help" Content="Help"
/>
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>
The resultant App Bar is
IsOpen Property
But when you run the
application, no App bars will be rendered. The user will not be aware of the
App bar which is hidden in the bottom area. We can make the App bar open by
default. When the user interacts with the application, the App bar will disappear.
He can invoke the same again using mouse right click.
For Opening the App bar
initially set the IsOpen property to true.
<Page.BottomAppBar>
<AppBar x:Name="bottomBar"
Padding="5 5 5 5" Background="Black" IsOpen="True"
>
<Grid>
<StackPanel HorizontalAlignment="Left"
Orientation="Horizontal">
<Button x:Name="edit" Content="Edit"
/>
</StackPanel>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Right">
<Button x:Name="help" Content="Help"
/>
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>
Top App Bar
Now let us add the top
App bar to our page. Following XAML define a top App Bar with two navigations –
Upload and Download.
<Page.TopAppBar>
<AppBar x:Name="topBar" Padding="5 5 5 5" IsOpen="True"
Background="Black">
<Grid>
<StackPanel HorizontalAlignment="Left"
Orientation="Horizontal">
< Button x:Name="upload" Content="Upload"
/>
< Button x:Name="download" Content="Download"
/>
</StackPanel>
</Grid>
</AppBar>
</Page.TopAppBar>
Now our application has
two App bars – one on top and another on bottom.
IsSticky Property
When you start
interacting with your application, the App bars will disappear. This will allow
the user to view more content. For making the App bar to visible always in the
Application life cycle, set the IsSticky to true.
<Page.TopAppBar>
<AppBar x:Name="topBar" Padding="5 5 5 5" IsOpen="True" IsSticky="True"
Background="Black">
<Grid>
<StackPanel HorizontalAlignment="Left"
Orientation="Horizontal">
< Button x:Name="upload" Content="Upload"
/>
< Button x:Name="download" Content="Download"
/>
</StackPanel>
</Grid>
</AppBar>
</Page.TopAppBar>
Once you add the
IsSticky property, corresponding App Bar will be open throughout the application
life cycle.
Open & Close Events
We can handle the App
bar open and close events and code appropriately.
<AppBar x:Name="topBar" Padding="5 5 5 5" IsOpen="True"
IsSticky="True"
Background="Black"
Opened="topBar_Opened"
Closed="topBar_Closed">
<Grid>
<StackPanel HorizontalAlignment="Left"
Orientation="Horizontal">
< Button x:Name="upload" Content="Upload"
/>
< Button x:Name="download" Content="Download"
/>
</StackPanel>
</Grid>
</AppBar>
Global Page
App Bar added to a
particular page won’t be visible to another page. For making an App Bar
accessible to all pages, we need to define a global page.
Add a new page as Main
or Global page and define the common App Bar icons. Define the Content as a
frame where we will render the pages. Following code snippet define a global
page with top app bar and a main frame.
<Page.TopAppBar>
<AppBar x:Name="topBar" Padding="5 5 5 5" Background="LightBlue"
IsSticky="True">
<Grid>
<StackPanel HorizontalAlignment="Left"
Orientation="Horizontal">
< Button x:Name="back" Content="Back" Click="back_Click"
/>
< Button x:Name="main" Content="mainPage" Click="main_Click"
/>
<Button x:Name="rss" Content="RSS
Reader" Click="rss_Click"
/>
</StackPanel>
</Grid>
</AppBar>
</Page.TopAppBar>
<Grid
Background="{StaticResource
ApplicationPageBackgroundThemeBrush}">
<Frame x:Name="mainFrame" />
</Grid>
Define the navigation in
the code behind file. Render each page in the main frame using the
Frame.Navigate() method.
Page rootPage;
protected override void OnNavigatedTo(NavigationEventArgs
e)
{
rootPage = e.Parameter as
Page;
mainFrame.Navigate(typeof(MainPage),
this);
}
private void
back_Click(object sender, RoutedEventArgs
e)
{
if
(mainFrame.CanGoBack)
{
mainFrame.GoBack();
}
else
if (rootPage != null &&
rootPage.Frame.CanGoBack)
{
rootPage.Frame.GoBack();
}
}
private void
main_Click(object sender, RoutedEventArgs
e)
{
mainFrame.Navigate(typeof(MainPage),
this);
}
private void
rss_Click(object sender, RoutedEventArgs
e)
{
mainFrame.Navigate(typeof(FirstPage),
this);
}
Built-In App Bar Icons
Windows 8 define a set
of Built-in App Bar icons, which can be used for common actions like Edit,
Pause, Pin, etc. Few of the Built-In App Bar icons are shown below.
Few of these icons are defined in the StandardStyle sheet added as part of
the project templates in VS 2012. StandardStyle sheet can be located under
Common folder in the project.
<Page.TopAppBar>
<AppBar
Background="#FFF9FCFD">
<StackPanel
Orientation="Vertical">
<StackPanel
Orientation="Horizontal">
<Button Style="{StaticResource
SkipBackAppBarButtonStyle}"/>
<Button Style="{StaticResource
SkipAheadAppBarButtonStyle}"/>
<Button Style="{StaticResource
PlayAppBarButtonStyle}"/>
<Button Style="{StaticResource
PauseAppBarButtonStyle}"/>
---------------------------------------------------------------------------
-----------------------------------------------------------------------------
</StackPanel>
</AppBar>
</Page.TopAppBar>
Conclusion
Windows 8 introduced the new Windows 8 Style applications, which enable the
user to develop quick touch enabled applications with the new style. App Bar is
one of the major feature in Windows 8 Application development.