Posts Tagged ‘ Application Bar ’

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…

Advertisement
2011
12/08
POSTED BY
CATEGORY
recent Blogposts
TAGS



Leave a comment

The Application Bar

This post is about the Application Bar. It is similar to a menu. It has both icons at the very top and an ellipsis button, that when the user clicks it, it opens up and shows a number of textual menu options beneath it. A developer can use these to enact some operations on the given XAML page or navigate the user to a whole different area within the application. The choice is the developer’s.

The Application Bar stays mostly hidden. It stays out of the way of the basic usage of the application. But when the user needs those extra options, they can be easily retrieved through that ellipsis button.

Let’s get right into that. I’ve created a new project. And the first thing I am going to do is define a folder that’s going to hold my icons:

I am going to call that folder “Images”. The next thing is going to the Windows Explorer and navigate to find some images that are already on my hard drive. When I installed Visual Studio 2010 Express for Windows Phone the SDK for Windows Phone 7 was installed as well. That SDK has a number of icons that I can use. They are themed for the phone. If you are on a 64 bit OS you’ll find them in the “Program Files (x86)” folder, if you are on a 32 bit OS like I am you’ll find them in the “Program Files” folder. In that folder I find the subfolder “Microsoft SDKs” and its subfolder “Windows Phone”, and again its subfolder “v7.0”. There I can find the subfolder “Icons”, and there I am going to choose the subfolder “dark”. There is a number of png files that have been created as icons that are properly sized for the Application Bar in my application. I am going to pick the “minus” and the “new” icon:

I am going to drag and drop them into the created Images Folder into my Solution Explorer:

Now I select them both and change the Build Action from Resource to Content:

It is important to change this, because otherwise my application won’t find these images.

Ok, now that I have some images in my application, I simply need to reference them in my Application Bar.

I am going to my XAML code. There I see that by default an Application Bar was already created, it has just been commented out:

So, I remove those comments, and that lets me see the Application Bar in my designer surface:

When I run this I can see two icons in my Application Bar but they both contain “x”. This happens when for whatever reason the applications can’t find a reference to those icons. When I click the ellipsis button it does display the menu options:

All I had to do was to uncomment out the predefined Application Bar. And now I just need to change the references to some of the images.

Let’s move on and get my images included there. I am just going to edit the XAML directly:

When I run it now, it displays the images and when I click the ellipsis button it also displays the menu options:

So I’ve created an event for both the icons and the menu items. Now I just have to navigate to the event handlers, where I can do some important work and tell the application how to react when an icon is clicked or a menu item is chosen. For this blog entry I just leave it like this.

Notice: I only can define four icon bar buttons within my Application Bar, but I can define as many menu items as I want or need. This gives me a lot of flexibility with the number of commands that I want to allow for the user to use.

 

To be continued…

2011
03/29
POSTED BY
CATEGORY
recent Blogposts
TAGS



Leave a comment
%d bloggers like this: