Visual Studio vs Expression Blend: Adding an Application Bar

Many applications have an AppBar. The ApplicationBar on Windows Phone is the equivalent of a menu bar and / or toolbar for desktop applications. It can include IconButtons and MenuItems.

The namespace Microsoft.Phone.Shell defines the AppBar.

I’ll get started right away with a new project in Visual Studio.

All I want to do is add an AppBar with four icon buttons and seven menu items. There are a few steps that I need to take:

1. Create a folder (I usually call that folder “Images”) in my solution that is going to hold my icons.

2.Get the icons I need the folder:

Windows Explorer – OS(C:) – Program Files – Microsoft SDKs – Windows Phone – v7.1 – Icons – dark

On a 64 bit OS the icons are in the folder:

Windows Explorer – OS(C:) – Program Files (x86) – Microsoft SDKs – Windows Phone – v7.1 – Icons – dark

I select the icons and drag them into my created Images folder.

3. In the solution explorer I set the Build Action for all four of them to “Content”.

4. Reference them in my ApplicationBar.

Visual Studio creates an AppBar by default. It is commented out.

I uncomment it and change the references:

That created a nice ApplicationBar with four icon buttons and a few menu items in my project:

 

 

With Expression Blend I don’t have to do all this, because of the better UX (User eXperience) when creating an ApplicationBar.

In the ‘Object and Timeline’ panel right-click the ‘PhoneApplicationPage’ and click “Add ApplicationBar”.

That already created the ApplicationBar. Now I only need to add the icon buttons and the menu items. I right-click on the ApplicationBar to add ApplicationBarIconButton and ApplicationBarMenuItem.

After adding the IconButtons and the MenuItems I can add my images for the buttons and change the text property’. I can do that in the ‘Property’ panel under ‘Common Properties’ with the IconButton or MenuItem selected in the ‘Object and Timeline’ panel:

Clicking that little arrow opens a drop-down list where I can select the icon I want. I do that for all four buttons.

To wrap it up: The ApplicationBar can have up to four IconButtons and as many MenuItems as I like. That is true for both Visual Studio and Expression Blend.

No matter where I create my AppBar, in Visual Studio or Expression Blend, the end result is the same. It looks easier to create an ApplicationBar in ExpressionBlend. But in the end it comes down to personal taste.

 

To be continued…

Advertisements
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: