I’m on the airplane flight back to Wisconsin from the Microsoft MIX 10 conference in Las Vegas. Working on some Windows Phone 7 demo applications and wanted blog an illustrated guide to adding the ApplicationBar to your new Windows Phone apps.
1) Start by downloading the new Windows Phone 7 Series demo tools at https://developer.windowsphone.com/ – as follows:
Once on that page, click on the “Download the Tools Today!” button, then click on Download the Developer Tools!
You’ll download the “vm_web.exe” which when you run it proceeds to download and install an ~238MB file. Installation for went very smoothly, and installed everything I needed to start developing my applications. Thumbs up to the Mobile Team – this was extremely well done – sure this wasn’t easy to get working that well.
Note, there is a link on the previous page for downloading Demo Code – grab those examples – specifically the “Application Bar Sample” which is what I dissected to write this article.
2) Open up Visual Studio, then go to File –> New –> Project – there you will see “Silverlight for Windows Phone” under the “Installed Templates”.
In this case we’re building a “Windows Phone Application” so select that, name your project and click “OK”.
3) In your “public MainPage()” method start by adding the following code:
1: //----------------------------------------------------------------------
2: // Create the application bar
3: //----------------------------------------------------------------------
4: ApplicationBar = new ApplicationBar();
5: ApplicationBar.IsMenuEnabled = true;
6: ApplicationBar.Visible = true;
7: ApplicationBar.Opacity = 1.0;
4) VS will alert you that you are missing the “Microsoft.Phone.Shell” reference. So right click on References and “Add a Reference” and find the “Microsoft.Phone.Shell” as illustrated – that should clear up that issue.
So in the code above, we see that we’re creating a new ApplicationBar instance, and setting a couple properties so it’s visible and so we have the “...” icon on the right (see more on that later below).
5) Next open the “Application Bar Sample” Demo Code and copy the images folder from that project into yours. You should see three images in the image folder as you can see in the Solution Explorer illustration.
6) Now that we have the ApplicationBar instance and the graphics included in our project – we want to put icons on the ApplicationBar.
Add the following code – which created the ApplicationBarIconButton objects and associates the graphics.
1: //----------------------------------------------------------------------
2: // Create the application bar icons
3: //----------------------------------------------------------------------
4: ApplicationBarIconButton hide =
5: new ApplicationBarIconButton(new Uri("/Images/expand.png", UriKind.Relative));
6: ApplicationBarIconButton opacity =
7: new ApplicationBarIconButton(new Uri("/Images/opacity.png", UriKind.Relative));
8: ApplicationBarIconButton enabled =
9: new ApplicationBarIconButton(new Uri("/Images/menuenabled.png", UriKind.Relative));
7) We follow up with adding the following code to wire up the event that do something when the buttons on the ApplicationBar are clicked.
Note, that you don’t have these event methods defined yet – for me, I have ReSharper installed and it gives me an easy way to create stub methods by just clicking on “Create method ‘enabled_Click' ”
1: //----------------------------------------------------------------------
2: // Wire up the events
3: //----------------------------------------------------------------------
4: hide.Click += hide_Click;
5: opacity.Click += opacity_Click;
6: enabled.Click += enabled_Click;
Either way – here is an example of the code called when the event handler fires, just setup similar methods for the other events.
1: private void enabled_Click(object sender, EventArgs e)
2: {
3: throw new NotImplementedException();
4: }
8) Now we just easily add the ApplicationBarIconButtons to the ApplicationBar as follows:
1: //----------------------------------------------------------------------
2: // Add icons to the menu bar
3: //----------------------------------------------------------------------
4: ApplicationBar.Buttons.Add(hide);
5: ApplicationBar.Buttons.Add(opacity);
6: ApplicationBar.Buttons.Add(enabled);
9) Just a little more code gives us the ability to have the great functionality of the “More Options” scrolling up section native to the ApplicationBar. We follow the same patter as above, creating the instance this time of ApplicationBarMenuItems, wiring up their click events and adding them to the ApplicationBar.MenuItems collection, as follows:
1: //----------------------------------------------------------------------
2: // Creat the menu items
3: //----------------------------------------------------------------------
4: ApplicationBarMenuItem foregroundItem = new ApplicationBarMenuItem("use foreground color");
5: ApplicationBarMenuItem accentItem = new ApplicationBarMenuItem("use accent color");
6:
7: //----------------------------------------------------------------------
8: // Wire up the events
9: //----------------------------------------------------------------------
10: foregroundItem.Click += foregroundItem_Click;
11: accentItem.Click += accentItem_Click;
12:
13: //----------------------------------------------------------------------
14: // Add the menu items to the application bar
15: //----------------------------------------------------------------------
16: ApplicationBar.MenuItems.Add(foregroundItem);
17: ApplicationBar.MenuItems.Add(accentItem);
10) You’re almost there – run the application in the simulator and you get the illustration to the left.
Wait? What happened to our nice icons? Why are there “X”s?
This stumped me for a little bit – and is one reason I wanted to share my experience with everyone.
11) Ok – so missed one step after adding the images to the project. Click on one of the images in the Solutions Explorer – you see that that “Build Action” is set to “Resource” – simply change all of them to “Content”.
12) Run your application again in the emulator – and awesome! There are our icons – and – when we click on the “...” we see the ApplicationBar scroll up to reveal our ApplicationBarMenuItems. Very very cool rewards for a minimal amount of code.
Summary: Wow. Even cooler than having written this article while on the airplane ( gotta love the free WiFi trial on AirTran ) – I’m loving the new Windows Phone 7 Series (WP7) development tools.
“I’m all in” ( see what terminology one picks up in Vegas ) for WP7 development and will continue to evangelize the product!
Way to go Microsoft Mobile Team – looking forward to getting great apps out into the Marketplace. – and hopefully sooner than later replacing my iPhone with a brand new sparkly Windows Phone. :)
Good coding!