Application Bar in Windows 8

Introduction

The name Application Bar sounds similar to Taskbar. In fact, yes they are similar to some extent.

ApplicationBar is a concept of WindowsRT whereas Taskbar belongs to the conventional Windows OS.

Agenda

So, our agenda for this article will be:

• Try to get a basic idea of an Application Bar
• Learn how to put it into a Windows Store XAML App
• Deal with related events

Exploring Application Bars

If you are familiar with Windows 8 or the Windows RT OS then you must have tried Windows Store Apps. And there you may have seen some Horizonatl Bar at the buttom of the screen.

It appears, when you right-click your mouse.

It looks like:

It's just like an Application Bar in Windows Phone.

Unlike Windows Phone, here you can manipulte the styling and design yourself.

Now, Put it in XAML

Step 1

Start a Blank Windows Store project and get inside the XAML window (MainPage.xaml).

Step 2

We will now provide the XAML for the Application Bar. And ensure that your XAML is below the main Grid section (in other words below the </Grid> line).

We will first start with <Page.BottomAppBar>.

And then define the AppBar.

<AppBar x:Name="myApplicationBar" Padding="10">

Here I have named my AppBar "myApplicationBar" with an internal padding of 10.
Within these tags, provide the Appbar buttons using a horizontal stack panel.

<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<AppBarButton IsCompact="True" Icon="Accept"/>
<AppBarButton IsCompact="True" Icon="AddFriend"/>
<AppBarButton IsCompact="True" Icon="Admin"/>
<AppBarSeparator/>
<AppBarButton IsCompact="True" Icon="Calculator"/>
</StackPanel>

<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<AppBarButton IsCompact="True" Icon="Delete"/>
</StackPanel>
</Grid>

 

Most of the code is obvious, except what IsCompact and AppBarSeprator does.

The IsCompact button reduces the extra space between the alernate buttons.

And AppBarSeprator adds a seprator-line like ( | ).

So the outcome will be:

We will now add a Click event.

The same as you do in any Windows Phone app or XAML oriented application, in other words the Click property with their event handler method name.

So, add the Click propery as in the following:

<AppBarButton IsCompact="True" Icon="Accept" Click="AppBarButton_Click"/>

We now have an event handler method in the CS file.

There, we will try to provide a Message Box.

private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
// This is the event Handler
// Now, we will put a Message Box
var messageDialog = new MessageDialog("Hello C# Corner");
messageDialog.ShowAsync();
}

 

Note: You need to use Windows.UI.Popups for MessageDialog()

Conclusion

Its just a fundamental part of Windows 8 application development. Try to go figure out more from the MSDN if you need to ( http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj662743.aspx ).

And, if you need a detailed view of AppBar icons then you can check them from here ( http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj841127.aspx ).

Regrading this article, if you encounter any problem then go for the Solution file or PING me :)

Stay Raw, Stay Geek and Keep Coding :)