WP7 icons quick and undirty

An unexpectedly time consuming part of Windows Phone 7 development are icons. Developers often don’t put much care into icons, and they are wrong. Your app is listed in the marketplace with an icon and most users just skip the crappy ones. If you make a bad icon most users won’t even read what the application is about, let alone download and install it.

That said, as a developer with some occasional design inspirations I found Expression Blend to be the perfect tool to generate WP7 graphics. The simple, minimalist style of WP7 icons just fits well with Blend and XAML in general.  Pro designers will probably be better off with specific graphic tools, but to me it’s just easier and faster to “program” my icons in Blend. I’ve had some decent results to support this approach but of course YMMV (the smile below is a placeholder and should be judged as such :-) ).

wp7buddy3

The main issue in creating the graphics with Blend is that you spend a lot of time cropping pictures to the correct size. That’s why I built myself a raw tool that is now decent enough to share with the world. It’s really raw, but it does the job. In fact it’s nothing more than a Blend/VS solution with correctly sized canvas and the ability to export all the images in one shot. The code is horrible and all, but it saved me a lot of time.

wp7buddy1

Pixel-perfect

The Windows Phone 7 marketplace requires you to create several icons in different sizes. Don’t take this as an unnecessary hassle, it is in fact an opportunity: it means you can create a pixel-perfect image for every size. Do not create an image and just resize it to each size. There are good reasons against this:

1. The tile image is not a simple icon. It will be shown on the main phone page and includes at least the application name. That’s why your image must have an offset to take this into account. My solution overlays the system settings icon, so that you can check if your logo is correctly centered. If your icons are full-width you can ignore this.

wp7buddy2

2. You can (and should) use a different detail level for every size. A good looking 173×173 icon may look like an undefined mass of blurry pixels when resized to 62×62. Just keep the general theme and image consistent.

3. Straight lines will become anti-aliased and look blurry when you resize them (in XAML when you use a viewbox). It’s simple: the width of a line when stretched could become a non-integer value (for ex. 3.5 pixels) and will look blurry. If you have a different image for every size you have full control and can make one-pixel changes to avoid this effect. Look at this example: it may not look obvious but on a close look you’ll see that the left picture is not as well defined as the right one. On the phone, the difference is even more obvious.

wp7buddy4

Download

Usage is simple: open the solution in Blend 4 or Visual Studio 2010 (it’s a WPF application), delete the placeholder smile and put your graphics in its place. Run the application and hit the export button to save the images. Tip: use resources for colors, shapes, etc. so that you can change them in one shot.
Enough said: download WP7IconBuddy and use it at your own risk. I’d love to hear some feedback.

Simple Error Reporting on WP7 RE-REDUX

If you haven’t read Rudi Grobler’s Simple Error Reporting on WP7 and Simple Error Reporting on WP7 Redux, please go read them now. Basically it’s about reporting errors at runtime from a Windows Phone 7 application. I always incorporate this kind of functionality in my applications (not only on Windows Phone) and it has proven to be very useful in these years.

While Rudi’s implementation uses the EmailComposeTask to send an error report, I do it in a slightly different and by submitting the report as http POST to a web page that then sends the email. This way the process is entirely silent and nothing is shown to the user (except the prompt). My reasoning is that the less steps she has to perform, the more likely she is to send the report.

In order to use this method you’ll need some server, but nothing fancy is required. I suspect you already have something adequate in place (for example the one hosting your blog).

Client Side

This is the code I put on the phone:

public void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e)
{
    if (MessageBoxResult.OK != MessageBox.Show("We encountered a problem and need to close. Would you like to tell us?",
                                "Oh no!",
                                MessageBoxButton.OKCancel))
    {
        return;
    }

    try
    {
        var subj = e.ExceptionObject.Message;
        var body = new StringBuilder("Stacktrace:");
        body.AppendLine(e.ExceptionObject.StackTrace);

        var wc = new WebClient();
        wc.Headers[HttpRequestHeader.UserAgent] = "Mozilla/5.0";
        wc.Headers[HttpRequestHeader.ContentType] = "application/x-www-form-urlencoded";
        wc.UploadStringCompleted += (s, er) => MessageBox.Show("Thanks for your report!");
            
        wc.UploadStringAsync(
            new Uri("http://your-host.com/bug-report.php"),
            "POST",
            string.Format("subject={0}&body={1}",
                HttpUtility.UrlEncode(subj),
                HttpUtility.UrlEncode(body.ToString())));
    }
    catch (WebException)
    {
        MessageBox.Show("The report could not be sent (no network available?).");
    }
}

Don’t forget to replace the messages with something better. You can add whatever you like to the report, just keep in mind that if you query DeviceExtendedProperties to get the peak memory usage, your app will need the Identity Capability (which looks a bit scary in the marketplace in my opinion).

Server Side

On the server side you can do pretty much anything: you could insert the report in a database or fill in a ticket in your bug tracker. I keep it simple and send an email (please set up a dedicated address if you do this). My server is rather fast but only supports PHP, so that’s what I use:

<?php
	if (isset($_POST["subject"]) &amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp; isset($_POST["body"]))
	{
		mail("youremail@your-host.com", "wp7 app bug report: ".$_POST["subject"], $_POST["body"]);
		echo "ok.";
	}
	else
	{
		echo "missing parameters.";
	}
?>

Please notice that this is not the most secure practice in the world as someone could sniff the traffic generated by your app and exploit this page to flood your mailbox. A simple solution is to limit this page to send a maximum of say 10 emails/hour. Anyways if you are getting a much larger number of legit hits, chances are that the exception is always the same one (or your app is really buggy and you deserve to be flooded :-P).

Is this method better than using the EmailComposeTask? I don’t know, but it’s just another option at your disposal.