Silverlight On Mobile : Application Bar for your Windows Phone 7 Application

I hope you like my last article on Ink Capabilities, Also I am getting tons of email for Charting on WP7 and many of you made request for source project. Within few weeks, I am planning to keep all codes on a central web location and share url with you so that you all can download and explore more on bits I show here.

Coming back to our today’s topic, Today I am going to demonstrate Application Bar which will be a unique integral part of any of your application which you are planning to build on Windows Phone 7 platform.Application Bar allows you to choose various options or you can say it acts as a menu for your application. It sits at the bottom side of your application and you can invoke it on touching on “…” invoker/trigger to pull out application bar which I am going to demonstrate here.

There are two straight forward ways to build Application Bar

• With Built-in infra (XAML)
• Custom Creation

What I mean by custom creation is that you will create it in code something like this :

ApplicationBar = new ApplicationBar();

In both the cases you will have to code since even in first case though your infra will be ready by XAML, you need to take care of click event of each item via code.So can’t run away from code ideally in both the scenarios.Let us first see how Application Bar look like, here is a small look :

Uncomment code and default App Bar is Ready :

When you start new Windows Phone 7 Application Project Template, By default the XAML for App Bar you can find commented in your MainPage.xaml like this :

<!-- Sample code showing usage of ApplicationBar
   <phone:PhoneApplicationPage.ApplicationBar>
       <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
           <shell:ApplicationBarIconButton x:Name="appbar_button1" IconUri="/Images/appbar_button1.png" Text="Button 1"></shell:ApplicationBarIconButton>
           <shell:ApplicationBarIconButton x:Name="appbar_button2" IconUri="/Images/appbar_button2.png" Text="Button 2"></shell:ApplicationBarIconButton>
           <shell:ApplicationBar.MenuItems>
               <shell:ApplicationBarMenuItem x:Name="menuItem1" Text="MenuItem 1"></shell:ApplicationBarMenuItem>
               <shell:ApplicationBarMenuItem x:Name="menuItem2" Text="MenuItem 2"></shell:ApplicationBarMenuItem>
           </shell:ApplicationBar.MenuItems>
       </shell:ApplicationBar>
   </phone:PhoneApplicationPage.ApplicationBar>
   -->

This is what I was talking about “Developing with Ready Infra” above. To start with you just need to uncomment the above code and your default Application Bar is Ready !

AppBar : Inside out

Before going for actual development, it is necessary to understand first what all things we have in AppBar, they are :

• ApplicationBar Icon Buttons (Offcourse with Icons)
• Menu Item (Text based)

Your application on your business requirements can have Icon buttons or Menu items or both.You can do this via smartly commenting out IconButton XAML part or MenuItem XAML part vice-versa.Together it will look like this :

As per your application background and application requirement, you can always play with the Opacity property for best user experience,like this :

 

Before I land into coding part,Here are some things to look at :

Mind your Text ! :

If you are under impression that you can use lengthy Text for your IconButton, then you are having wrong mindset…really? yes ! If you try to put larger text,it will not allow you by any means to wrap it around (I tried out using many ways but my all attempts are FAIL !), see this is how it will look like with chopped text (Where Ticket is chopped to tick) :

Picture speak thousand words ! :

If you are strong believer of above quote,then its good but this will not work if you just try to Put Icon Image without any text. It will throw a runtime exception like this :

Make sure you follow Design Guidelines aka Standards ! :

There is information available about UI UX related to Phone and you can find it over Internet,more correctly over MSDN. There you can find information like what format of Image should be there for IconButton, What should be ideal size etc. information available. Following this guideline will help you while pushing your application to Customers via Application Market / Marketplace. I personally tried a lot to play around standards and try to make-break kind of things, I realized that Images have to be monocolor and in specific size else you will land into something like this :

Changing looks of AppBar by applying colors :

Not a big deal ! you have both Properties :

• BackgroundColor
• ForegroundColor

Anything Beyond IconButtons and MenuItems ? :

I took this concern to my fellow Silverlight MVPs on mail who are also doing wonderful things on Windows Phone 7. I got great inputs from them. Thanks to Shawn Wildermuth for his idea for Popup ( You should visit his article on Popup control on Windows Phone 7 here ) . If you intend to show something customize things like Extra controls or some color palette then AppBar might not help you directly to achieve this due to the default behavior of AppBar. So you can do such things either by your own customize design or on Popup.

Via Code :

Lets see the coding approach to build AppBar.

Namespace :

using Microsoft.Phone.Shell;

General Declaration :

ApplicationBar MyAppBar = new ApplicationBar();

Making ApplicationBar Enabled :

MyAppBar.IsVisible = true;
MyAppBar.IsMenuEnabled = true;

IconButton, Text and Event :

//Add Icon Button
            ApplicationBarIconButton MyAppBarTwoBtn = new ApplicationBarIconButton(new Uri("/Images/appbar.feature.email.rest.png",UriKind.Relative));
            MyAppBarTwoBtn.Text = "Hotel";
            MyAppBarTwoBtn.Click += new EventHandler(MyAppBarTwoBtn_Click);

//Adding IconButtons to Application Bar
MyAppBar.Buttons.Add(MyAppBarTwoBtn);

Event Handle :

void MyAppBarTwoBtn_Click(object sender, EventArgs e)
{
      MessageBox.Show("Hotel Room Booked !");
}

So this is how you can add it via C# Code. Similar technique is for MenuItem, I leave that to you to explore via C# Code, Hope this much of guideline will make your life easy for MenuItem.Instead of MyAppBar.Buttons.Add( ) it will be MyAppBar.MenuItems.Add( )

With this, I am closing this topic at the moment since I think this is more than sufficient for you to get idea about AppBar. I know some of you will raise your eye over this blog post since this is bit away from “Silverlight” and more towards phone though I title it as “Silverlight on Mobile”,but I will not be doing any compromise over any of the topic under Phone 7, I will soon again start talking on Silverlight once this series gets over.

So in coming days you might see here some stuff which is not Silverlight but part of Windows Phone 7. My intention of this series is to help you to get familiar get closer and get comfortable with Windows Phone 7 ecosystem.I will try my best !

See you soon with more stuff on Windows Phone 7 using our “love” platform Microsoft Silverlight.

Vikram.