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.
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.
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:
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):
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):
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:
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.
JEFF BLANKENBURG 
Leave a Reply