Resize images to be used on Live Tile – Windows Phone 7

Recently I added a live tile feature to one of my WP7 applications.
The app tile would show an image of a person, retrieved from a RSS feed.

Now because of the fact that the image is of a person, it’s not squared, but portrait. Meaning that the width of the image is shorter then the height. Also the image I need to display is larger than the windows live tile.
So when you just try to display this image without any modifications, you’ll get a weird result.

The original image

To fix this, you’ll need to resize the image.

First of all, download the image and map it to a BitmapImage object, you can just use an URI that points to the image on the web for this.

One note, before you can start manipulating the image, you’ll need to be sure it has been downloaded completely, so register to the ImageOpened event.

If needed you can also add code when there has ben a failure with downloading the image.

So when you are sure the image has been downloaded you can start manipulating it. Now an extra note here, there is a great library available on Codeplex ( and NuGet ) that adds many extension methods to the WriteableBitmap that are handy when dealing with any image manipulation. It’s called WriteableBitmapEx and can be found here ( http://writeablebitmapex.codeplex.com/ ).

We need to target our image to a tile of 173 by 173 pixels, thus we need to find the aspect – ratio. To do this, we first need to determine what is the largest side of our image.

After this we can determin the destination width and height…

All we need to do now is performing the actual resize.

Now that you have ‘constructed’ your resized image, you’ll have to store it on the phone’s isolated storage before you can use it as a live tile image!

The live tile needs an URI to this saved image to work correctly. To get this done in one go you can use following method SaveTileBitmap, it will save the image and return you the correct URI.

So the last stop is using this method to get the URI and constructing a live tile…

You’ll need to give the image a name, but any name will do.

BUT when you do this, you’ll notice the image is still scaled to 173 px! This is something I didn’t except, but it seems the tile will always try to stretch to 173 by 173, thus miss forming our image.

Resized image – wrong!

To compensate we need to paste our resized image on a dummy 173 by 173 before storing it in the isolated store… In other words best to store a correct sized square image with the resized image pasted inside it at the correct location.

Because we know the width was the smallest, we need to center the image on the tile! So we will be merging the resized image starting not at position 0.0 but compensating for the smaller width!

Resized image – correct!

Windows Phone 7 development

Currently I released 2 Windows Phone 7 apps to the Microsoft Marktplace. The creation of both apps was not that difficult, because when you want to develop for wp7, there are several good reusable libraries out there!

Let me zoom in on one in particular, called WP7Contrib! It’s a wp7 library that is available on CodePlex, so the sourcecode is also available! But why am I using it, well let me give you some examples.

* Tombstoning
Each time your wp7 app gets tombstoned, there is a great chance you’ll want to ‘save state’, this helps the user experience of your app. There are several good examples out there that handle this, but I like the implementation of it in wp7contrib.
Basically you’ll create a new ViewModelBase class that implements 2 methods: IsBeingActivated(IStorage storage); and IsBeingDeactivated(IStorage storage); Now when you create a ViewModel, you’ll inherit from this base class, and because wp7contrib has a StorageService that gets passed along as parameter, you can use it to Write and Read data to/from it!
So each time an app gets tombstonded the IsBeingDeactivated method is called on each instantiated ViewModel, enabling you to write code like this: storage.Write(“zoomLevel”, this.ZoomLevel); This example will write the current value of a local property to the StorageService and when the app resumes you can put following code in the IsBeingActivated method: this.ZoomLevel = storage.Read(“zoomLevel”);
And presto, your View will again contain the data the user had put in before tombstoning!

* Isolated Storage
A similar feature is a nice wrapper around the Isolated Storage called StoreSettings. It gives you some method calls that are easy to use! Some examples:
– this.SettingsService.Write(“UserName”, this.UserName); This will store a given View textbox to the Isolated Storage
– this.SettingsService.TryToRead(“UserName”, out userName); This will try to retrieve the value back again, it will return True if the Key was found in the Isolated Storage

* Page navigation
Page navigation from ViewModels in a MVVM app is something that needs to be addressed correctly! Because when you want to submit an app to the marktplace, this is something that has to be working 100% and there are even some rules applied to it.
My tip, just use the NavigationService available in wp7contrib! If you want to ‘navigate’ to another view from your viewmodel, you’ll only have to add following code: this.SettingsCommand = new RelayCommand(() => this.NavigationService.Navigate(ViewModelLocator.SettingsPageUri));
Side note here, I’m setting up a RelayCommand in the constructor of the ViewModel, so that I can trigger this from an appbarbutton in the View!

* Bing Maps location
One last item that I’m a huge fan of in this wp7contrib lib, is the LocationService! One of my apps has Bing Maps integrated and when you need to get a current location fix ( or you want to track location for a period of time ), again you’ll have to write a lot of code to get it done ‘right’.
But with wp7contrib you’ll only need to call the correct methods and everything will be handled for you!
In my app I current allow the user to get his current location fix from the push of an appbar button, with this I’m triggering following code:
_currentSubscriber = _locationService.Location()
.ObserveOnDispatcher()
.Subscribe(location => this.CurrentPosition = location);

What it does, is fire up the location service and return the current phone location if it is available! When I get it, I’ll just set the CurrentPosition, what in my app is a MVVM binded property to a pushin on the BingMaps control in my view… and presto the current location is visible!

There are also some cool controls available and the one I like most is the SmartTextBlock, just take a look here for the implementation.

Well the list could go on, but currently these 4 are my mostly used ones! I just have to say that wp7contrib helped me speed up my wp7 app development and I would suggest you’ll check it out.
It is available on the wp7contrib codeplex site and the main page contains a good overview of most of the features.