31 Days of Windows Phone | Day #6: Application Bar

This post is Day #6 in a series called the 31 Days of Windows Phone.

Yesterday, I discussed System Theming, and how you can use Expression Blend to bind directly to those system values with the click of a mouse.  Today, we’re going to talk about another topic that Expression Blend makes infinitely easier.  If you look around at many of the applications that are being demoed on places like YouTube (or my site, Blankensoft), you’ll notice a pretty consistent use of the Application Bar.

The Application Bar in Windows Phone 7 is that set of circled icons at the bottom of an application.  Here’s an example of the Application Bar from my game, TapScotch.

tapscotch

You’ll see from the above example that I have four common icons that I want users to interact with.  Play, Best Times, Badges, and Help.  Tapping any of those icons will take them to that specific page of the application at any time.  So, how do we make this thing work?

Adding the Application Bar

If you’ve started with a new project, there’s actually some sample code commented out in your MainPage.xaml file.  If you deleted that, and need it again, here’s what the default Application Bar code looks like:

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

If you also deleted the XML Namespaces that are required from your page header, here’s the code for those as well (make sure you still have references to these assemblies):

    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

Once you’ve added an Application Bar to your app, you should also notice that Visual Studio is smart enough to adjust your app’s DesignHeight property by 72 pixels.  That’s how tall the AppBar is.  This might also be a good time to talk about the SystemTray.

The Windows Phone SystemTray

You may have noticed that when you run your application, you can still see the clock, Wi-fi signal strength, battery life, etc.  This is because, by default, the SystemTray is enabled.  If you don’t care to show that information (or you just need that valuable 32 pixels back), you can set its Visible property = false.

shell:SystemTray.IsVisible="False"

Adding Icons to the AppBar

If you look a the code for the Application Bar, you’ve likely noticed that it’s pointing to two images that are not currently part of your project.  If you run your app, you’ll notice that it shows an X icon for each of the ApplicationBarIconButtons.  We could very easily go create some images for these buttons, add them to our project, and then reference them on those lines of code, right?  Sure, but there’s a much easier way, and it’s called Expression Blend again.  Open your app in Expression Blend, and navigate the “Objects and Timeline” tree until you find those ApplicationBarIconButton objects.

applicationbariconbutton

When you click on one of the ApplicationBarIconButtons, check the Properties tab.  You’ll see a simple way to set the icon and text for each one.  Here’s what it looks like:

properties

If you drop down the IconUri select box, you’ll see a WEALTH of standard icons that you can use in your applications.  Unless you have a custom icon that you absolutely can’t live without, these icons should serve MOST of your needs (you can always create your own icon and add it manually).  And by selecting one, it automatically adds the white version of that icon to your project also.  “Why only the white one, Jeff?”  Great question.  One I’ll address shortly.  If you’re not following along in Blend, here’s the list of icons (my apologies for the length of this list):

iconlist

Why Only White Icons?

The Windows Phone team has made your life SO easy.  You only need to create ONE version of your icon, and they take care of the rest for you.  So, when you give it a white icon, it will use that one in a Dark theme, and will AUTOMATICALLY flip it to black when your user uses the Light theme.  Try it out!  Choose an icon from the list above, and look at your project structure.  There’s only one image included in your project.  The operating system automatically changes the white icon to black when you need it to.

Making These Buttons Work

Ok, so at this point, you’ve got a couple of pretty buttons on your application, but they don’t do anything when you click them.  At this point, they’re like anything else in your XAML file.  They need a Click event, and an event handler in the code-behind.  Here’s what my XAML and C# look like for this simple application:

XAML

<shell:ApplicationBarIconButton x:Name="AddButton" IconUri="/icons/appbar.add.rest.png" Text="Add" Click="AddButton_Click"/>
<shell:ApplicationBarIconButton x:Name="SubtractButton" IconUri="/icons/appbar.minus.rest.png" Text="Subtract" Click="SubtractButton_Click"/>

C#

private void AddButton_Click(object sender, EventArgs e)
{
	Counter.Text = (Int32.Parse(Counter.Text.ToString()) + 1).ToString(); 
}

private void SubtractButton_Click(object sender, EventArgs e)
{
	Counter.Text = (Int32.Parse(Counter.Text.ToString()) - 1).ToString(); 
}

What Are Those Other Text-Based Menu Items?

Another very good question.  If you’ve run your application yet, you may have noticed that by clicking on the ellipsis icon (…), the Application Bar slides up to reveal a list of other menu options.  If you used the default code from above, they still say “MenuItem 1” and “MenuItem 2.”  These work just like the IconButtons, where you can rig up event handlers for when your users click on them.  Here’s what it looks like expanded in my sample application (in both themes):

applicationbaropen applicationbaropenlighttheme

You Can Minimize The App Bar

A new feature to Windows Phone 7.5 is that you can now have an application bar that doesn’t show any of the ApplicationBarIconButtons by default.  To do this, you simply need to change the Mode property of the ApplicationBar to be “Minimized.”  By doing this, you end up with an AppBar that looks like this:

image

Download the Code

To see my sample application in all its glory, download the source code here.  The add and subtract buttons add or subtract one from the zero in the center of the screen.  The shrink and grow buttons increase and decrease the font size of that same number.  A decent example of how to make the Application Bar in Windows Phone 7 work in a useful way.

download

20 thoughts on “31 Days of Windows Phone | Day #6: Application Bar

  1. sir…i am from india.i want to create a new application for wp7.i am very eager to do some thing of my own .can u please suggest me to create an application.

  2. Is it possible at runtime to change the text of a menuitem (the text menu items brought up by the three dots)? When I try to change the text value by doing menuItem1.Text in code during the load or initialize event, I receive an exception that it is null.

    Your description of the icons were very helpful and this series if very helpful

  3. Thank you very much for windows phone 7 series and support. I am very happy to go ahead with this series and implement all these things while developing new windows phone 7 app.

  4. The web log really is wonderful. I like reading through it but the truth is, the writing appears to be kinda odd when using the safari website broswer

  5. It is the nature of desire not to be satisfied, and most men live only for the gratification of it.

  6. Let the gentle bush dig its root deep and spread upward to split the boulder.

  7. Lord save us all from old age and broken health and a hope tree that has lost the faculty of putting out blossoms.

  8. Jack You seem somewhat familiar. Have I threatened you before

  9. When a whole nation is roaring Patriotism at the top of its voice, I am fain to explore the cleanness of its hands and purity of its heart.

  10. Hello,
    How to add a menu or button on one place of an application for each page rather than add on each page. ex:- like menu in master page in asp.net are available for whole site.

    is it possible in wp7?

    thanks

    • I’d have to respond to that question with a “why?” The application bar is meant to promote core functionality on the page you’re currently on. Having the same button on each page suggests you might be using it for navigation, which I generally discourage. What are you trying to accomplish?

  11. Pingback: Getting ready for the Windows Phone 7 Exam 70-599 (Part 5)

  12. Pingback: ux.artu.tv » Blog Archive » 31 Weeks of Windows Phone Metro Design | 14 Using the Windows Phone App Bar

  13. its easy to learn windows phone7 here

  14. Pingback: 31 Days of Windows 8 | Day #4: New Controls « Blankenblog

  15. Pingback: 31 Days of Windows 8 | Day #4: New Controls « Blankenblog

  16. Pingback: วันที่ 4 : New Controls « Windows App Dev Thai

  17. Pingback: 31 días de Windows 8 | Día 4: Controles Nuevos | La Liga Silverlight

  18. I am so pleased by this site. no one can explain like this, awesome. Even a kid will code. keep up the good work. maybe the domain name of ur website make u not visible to the millions of developers who are struggling to get to things. I have not explored ur website fully i am dire need to learn gaming with 3d. explain on how to add the 3d image and use it. the 2d gaming i was able to learn to an extent on my own.

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