Adding an Application Bar

Windows Phone From Scratch #46

In a recent posting I wrote about creating Conway’s Life for the phone.  The application AppButtons is a tinkerer’s playhouse and I find myself going back to it to add features and tweaks.

This morning I decided it would be nice to let the user slow down the interval between generations. To do this, I wanted a pair of buttons (slower and faster).  This turned out to be absurdly easy.

You can create your Application Bar and buttons in Xaml by hand. You also can do an appendectomy through your mouth, but it takes longer and hurts more.  The right answer is to open the project in Expression Blend. 

To see this, create a new application in Expression Blend.  Put some TextBlocks and/or Buttons into the content area and then, when you are ready, click on [PhoneApplicationPage] in the Objects and Timeline panel.  Next, go to the Common Properties sub-panel (on the Properties panel) and click on the New button next to ApplicationBar.  A new subpanel will open, and the second line has an ellipses button next to the Buttons (Collection) label.   Click on the ellipses to open the Collection Editor.  Click Add Another Item  which opens the Select Object dialog box.

You will probably need to click the Show All Assemblies CheckBox. Expand Microsoft Phone and then expand Microsoft.Phone.Shell. Click on ApplicationBarIconButton and click OK. 

This returns you to the Collection Editor. Notice the Common Properties panel within the editor.  Drop down the IconURI drop box to pick one of the standard and pre-created icons.  Be sure to fill in the text and then either click Add Another Button or click OK to close the Collection Editor.

Open the Xaml view in Blend or, even better, save all and then open the project in Visual Studio.  Add a click event to the button(s) on the Application Bar and add event handlers in the code behind. 

That’s all there is to it.  Easy as cake.

Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in Blend, Essentials, Mini-Tutorial, Patterns & Skills and tagged . Bookmark the permalink.

2 Responses to Adding an Application Bar

  1. @James Murray
    Yes, this is how you create a dockbar.

  2. James Murray says:

    So I use this to write a Dickbar?

Leave a Reply

Your email address will not be published.