Editor's Note: The following is a guest post by Windows Phone Development MVP Kevin Wolf as part of the MVP Award Program Blog's "MVPs for Windows Phone 7" series. Kevin is a Windows Phone 7 Development MVP from Tampa FL.  With over 20 years in the software development industry, he has worked on everything from small embedded systems to a large decision support BI database.  Currently he is helping his clients maximize their investment in mobile technologies across all mobile platforms but specializes in Microsoft technologies.  When not shipping software for his clients, he is building the next Windows Phone 7 killer app!

Over the past few months on my blog at The Wolf Bytes, I’ve published a number of Quick Tips on developing for Windows Phone 7.  These were primarily lessons learned while creating some applications I’ve published on the Marketplace.  What follows are some fairly simple things you should be able to pickup and use right away while developing application for Windows Phone 7.

Windows Phone 7 Quick Tip #1 – Use App.Resources for your Application Title

 

On most screens within your Windows Phone 7 application you might need to display your application name. This might be in a simple page or one that contains a Pivot or Panorama.

Standard Page

Pivot Page

Panorama Page

 

With the XAML that gets generated you can enter your application name for the respective page types as:

 

Notice how the same text is entered for each title as a string literal?

 

A better solution is to use a string resource. To create a string resource, add the following to your Application.Resources node within the App.xaml file.

Then everywhere you need to use your application name you can use the following syntax

An even better approach might be to use a resource dictionary, but that might be a little overkill if you aren’t planning on globalizing your application. 

Windows Phone 7 Quick Tip #8 – Making your Images “Theme-able”

When building your Windows Phone 7 application you should be aware of the concept of themes. I’ve got another Quick Tip coming up on using themes, however if you use the built in themes and you have any “metro” style graphics, you’ll need to make sure they work with the both built in light and dark color themes. If you create your graphics with a white foreground so that it contrasts the ‘dark’ background on the phone, when the white or ‘light’ background is selected by the user your images will disappear.  One potential solution here is to create two graphics (both white and black ones) and then swap them out based upon the selected background color. I don’t think any of us really likes that idea.

 

With the help of Bill Reiss I came up with a custom control using an OpacityMask that will allow your metro type icons to work with both the light and dark backgrounds that can be selected by the user on their phone.

Here’s the source code, simply cut-and-paste it into your project.

using System;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;
using System.Windows;

namespace WolfBytes
{
public class ThemeableImage : Grid
{
Rectangle _rectangle;

public ThemeableImage()
{
_rectangle = new Rectangle();

var bgBrush = Application.Current.Resources["PhoneBackgroundBrush"]
as SolidColorBrush;

if (bgBrush.Color == Color.FromArgb(0xFF, 0xFF, 0xFF, 0xFF))
_rectangle.Fill = new SolidColorBrush(Colors.Black);
else
_rectangle.Fill = new SolidColorBrush(Colors.White);

Children.Add(_rectangle);
}

public ImageSource Source
{
get
{
if (_rectangle.OpacityMask != null)
return (_rectangle.OpacityMask as ImageBrush).ImageSource;
else
return null;
}
set
{
_rectangle.OpacityMask = new ImageBrush { ImageSource = value };
}
}
}
}

Then for usage simply create either a black or white (or I guess for that matter any color image) transparent PNG. That image will then be used to either show or hide the pixels of either the Black or White background (as specified with the “PhoneBackgroundBrush” resource) based upon their opacity of the pixels in the image.

 

Then in your XAML you can reference the control by adding the namespace with something like:

xmlns:wb="clr-namespace:WolfBytes"

With that in place you can add the new control to your page or control with:

<wb:ThemeableImage Source="/Images/Camera.png" x:Name="CameraButton" />

-twb

Windows Phone 7 Quick Tip #17 – Enable/Disable Menu Bar

Here’s another quick one I ran into while testing my application. I need to submit data to a web service and wait for a response. While they phone is communicating with the web service, I don’t want the user to send the same request twice. Initiating the send takes place on the app bar.


We need to disable the app bar button. If you attempt to use the control name you assign to the button it will throw a null reference exception. Not a very good UX. My initial solution that I put in place and held my nose was similar to:

((ApplicationBarIconButton)ApplicationBar.Buttons[0]).Enabled = false;

Don’t get me started on what I don’t like about that approach, ok?

 

I came across an instance where I needed to disable two buttons; I just couldn’t handle the smell of…

((ApplicationBarIconButton)ApplicationBar.Buttons[0]).Enabled = false;
((ApplicationBarIconButton)ApplicationBar.Buttons[1]).Enabled = false;

…and decided to do something about it. My solution is a simple extension method that looks like:

namespace Microsoft.Phone.Shell
{
public static class ApplicationBarHelpers
{
public static void Enable(this IApplicationBar appBar)
{
appBar.IsMenuEnabled = true;

foreach (var obj in appBar.Buttons)
{
var button = obj as ApplicationBarIconButton;
if (button != null)
button.IsEnabled = true;
}
}

public static void Disable(this IApplicationBar appBar)
{
appBar.IsMenuEnabled = false;

foreach (var obj in appBar.Buttons)
{
var button = obj as ApplicationBarIconButton;
if (button != null)
button.IsEnabled = false;
}
}
}
}

Just include the using Microsoft.Phone.Shell to pickup the namespace within your .cs file and you can do the following:

ApplicationBar.Enable();

and

ApplicationBar.Disable();

Which I think is much cleaner.

Windows Phone 7 Quick Tip #21 – Good Vibrations

Not an earth shattering tip this time, but I just spent the last 30 minutes “binging” how to make my phone vibrate and didn’t come up with anything.

As with most stuff in programming, it’s easy once you know how:

  1. Add a reference to Microsoft.Phone (if you are working in XNA and don’t already have one)
  2. Then call Start on Microsoft.Devices.VibrateController.Default with the number of milliseconds you want the phone to vibrate.