In the previous post, we talked about the back button paradigm in Windows Phone Application.
This is the fifth post in “Discover Windows Phone” development series” we’ll be covering Application Bar.
If you look around at many of the applications that are being demoed on places like YouTube, you’ll notice a pretty consistent use of the application bar.
The Application Bar in Windows Phone 8 is that set of circled icons at the bottom of an application. Here’s an example of the App bar from my application, Playin.
You’ll see from the above example that i have two icons that i want the user to interact with. Add, which refers to add a new playlist, and profile. Tapping any of those icons will take them to that specific page of the application at anytime. So, how do we make this thing work?
Adding the Application Bar
Let’s open the project we’ve created through out the previous posts.
1. Open Mainpage.xaml
2. Add your application bar (the following XAML code) at the very end of the page but before
</phone:PhoneApplicationPage>
<phone:PhoneApplicationPage.ApplicationBar> <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True"> <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/add.png" Text="add"> <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/cancel.png" Text="cancel"> <shell:ApplicationBar.MenuItem> <shell:ApplicationBarMenuItem Text="MenuItem 2"> <shell:ApplicationBarMenuItem Text="MenuItem"> </shell:ApplicationBar.MenuItems> </shell:ApplicationBar> </phone:PhoneApplicationPage.ApplicationBar>
This is an example of an application bar with two icon buttons, first one is ‘Add’ and the second is ‘Cancel’, and two menu items. Which will end up like this:
When you click on one of the ApplicationBarIconButtons, check the properties tab. You’ll see a simple way to set the icon and text for each one. Here’s what it looks like:
If you drop down the IconUri select box, you’ll see a lot of standard icons that you can use in your applications, these icons should serve most of your needs, in addition; you can always create your own icon and add it manually).
Making these buttons work
Okay, so at this exact point, you’ve got a couple of pretty buttons on your application, but they do not do anything when you click them. These buttons are like anything in your XAML file. they just need a Click event, and an event handler in the code behind.
So to do this:
1. Select the ‘add’ button from the design view
2. Go to the properties windows
3. You’ll find another tab for event handlers, click on it
4. Change the name of the button, and double tap on the textbox that is corresponding to the event ‘Click’.
The result will be as follows and the project will directly take you to the event handler of the button is the code behind.
Add a MessageBox to your event so you test that it works, that’s how it’s done:
Same applies to any other application bar button.
So what are the other text-based menu items?
When you run your application, you may have noticed that by clicking on the ellipsis icon (…), the application bar slides up to reveal a list of another menu options. If you used the default code from above, they still say “MenuItem 1” and “MenuItem 2”. These work just like the IconButtons, where you can rig up event handlers for when your users click on them.
Can you minimize the app bar?
Yes you can! you can have an application bar that doesn’t show any of the ApplicationBarIconButtons by default. To do this, you simply need to change the Mode property of the ApplicationBar to be “Minimized”.
Other appBar properties:
You can change the opacity of the appBar, expected values are between 0.0 and 1.0, from totally transparent to completely opaque respectively.
The background and the foreground colors can be changed as a property in the XAML element. Also the visibility and enabling the appBar is possible.
To know more about ApplicationBar best practices click here.
That was how to add an application bar, download the source code from here
Next post will be discussing page orientation
For any feedback or questions:
Yasmine Abdelhady 