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!

LongListSelector – Windows Phone 7 development

If you are using a Windows Phone 7, you’ll have noticed that when you want to go through your People list they are all ‘grouped’ by one character. And when you press one of those characters, you’ll get a nice overview of all available groups, again shown by a character.
Example example

Now if you are a wp7 developer and want to have the same kind of behaviour for any kind of ‘lists’ you want to present to the enduser, you have 2 options, 1. develop your own control or 2. use the LongListSelector available in the Sliverlight toolkit for WindowsPhone7!

Now to use this control, you better read up 2 posts available on windowsphonegeek

Now if you follow these posts, you’ll notice you won’t get the same look and feel as on the People list in the Windows Phone itself… now to overcome this, you’ll better read up Benjii’s post on how to use the LongListSelector!
Because when you follow his instructions, you’ll get a better UI in reference to the People list on the Windows Phone.
But somehow when I used his solution, I was not able to get a correct Item Selection Change event to Command working. Somehow Benjii’s group class won’t let me cast back to one selected item in the ViewModel.

So again I needed a solution! And after some twitter chatter and a question on stackoverflow, I was directed to a custom implementation done by Claus Jørgensen!
The best way to look at his grouping class and LongListSelector usage, is to download his weather app from GitHub!
It contains a fine example on how to use the LongListSelector and also an extension that is needed to get Command binding to the SelectionChanged event!
His Grouping class also makes it possible to get the correct item from when the selection changed event get’s fired!

I did however change one small detail of his Grouping class ( LongListCollection.cs ), because when you do nothing with Claus’ class, you’ll only see the item group keys of the available items. And Benjii’s solution, first add’s dummy key/list items so that you’ll get the same overview as on the People list, when a group has no items the group key will be greyed out!!

To get this working with Claus’ class, I added a DefaultHeaders list! Here is my implementation of the class:

Now if you want to use this in your ViewModel, you only need to add the following 2 lines:

I hope you guys have as much fun with the LongListSelector as I did 😉

Use Bing Maps SetView method with MVVM – Windows Phone 7

Well when you are developing on the Windows Phone and are trying to use MVVM, you’ll notice not everything is ‘real’ MVVMable 🙂
You’ll notice it mostly when you are using controls that don’t have much bindable items… so sometimes you’ll loose control of the View – ViewModel link.

An example I came across, where I was stuck with using the normal MVVM way, was when I added some pushpins on a Bing Maps control and wanted to adjust the view of the Bing Maps so that it would show all pushpins just added!
There is a real nice method on the Bing Maps called SetView()! It accepts a LocationRect as parameter and you can create such a LocationRect from a IEnumerable list of Geocoördinates. In other words if you have the PushPin collection, you can pass this along and the Bing Map will zoom and center to an appropriate size / place to show all pushpins in the given collection.

But the bad part, the SetView is a method and there is no bindable property on the map to use to control this. So you are a bit stuck when you only want to use the MVVM pattern.

So how to solve this, well it’s actually very easy 😉
When you are using the MVVMLight Toolkit from Laurent Bugnion, you can use the Messaging feature for this!

So what do you need to do.
First create a class inside the Model folder ( or in the root of the project ) called PushPinModel and add a List<Geocoordinate> GeoCoordinateList property inside of it.
Then assuming you have a MainPage View, add following in the constructor of this MainPage.xaml.cs
Messenger.Default.Register<PushPinModel>(this, action => this.SetView(action));

Also add following private method inside the MainPage.xaml.cs, this method will be called each time the listener receives a message!

private void SetView(PushPinModel pushpinModel)
{
if (pushpinModel.GeoCoordinateList.Count > 0)
{
this.PointMap.SetView(LocationRect.CreateLocationRect(pushpinModel.GeoCoordinateList));
};
}

Now the only thing left to do is fill up this Geocoordinate list in the ViewModel and send out a message to the listeners!

PushPinModel pm = new PushPinModel();
pm.GeoCoordinateList.Add(new GeoCoordinate(51.10524, 4.54229));
pm.GeoCoordinateList.Add(new GeoCoordinate(51.3411, 3.2398));

Messenger.Default.Send<PushPinModel>(pm);

For a detailed example just download changeset 62756 from my WP7 codeplex project wp7cycling.codeplex.com

Telenet telemeter for Windows Phone 7

Well, maybe you noticed when reading my last post… I’ve been busy developing for my Windows Phone 7!
The best way for me to learn a new environment is to try out some real scenario. This way I have a good focus on what I’m trying to do/learn.
So also when I started with WP7 development, I had an idea I wanted to work out and that idea was to create a Telemeter ( Telenet bandwidth usage tool ) for the Windows Phone.

At first, it was not easy to get this thing going… Everything was actually new for me! XAML, MVVM, Silverlight controls many different things!
But in the end, I’m glad I did take a look at this platform, because I think it has lot of potential!

So for the app itself, I just got notice today it passed Microsoft certification, so I guess it will be downloadable soon from the Marktplace.
When you start up the app for the first time, you’ll need to enter your Telenet credentials ( the actual first account given, not aliases you created yourself afterwards ) in the settings screen.
After that, you’ll be able to refresh the data graph available on the main screen… when everything goes well ( sometimes the Telenet service is not available ), you’ll get a nice looking graph with all the bandwidth details of each day.
But an image says more than words, so here is a preview of the app itself.

[Update] It’s downloadable 🙂 http://www.appsfuze.com/applications/windowsphone.tools/wp7telemeter,9329

Windows Phone 7 development

Well my current cellphone is a new HTC smartphone with the Window Phone 7 OS! It’s the HTC Trophy and I have to say the OS and the device are just brilliant.
But to be honest, the fact that you can just code .Net apps for it, made it a winner in my books.

So let me introduce you in the Windows Phone 7 development area.
Here are some of my current findings with it.

The first thing to know is that when you are developing it will be in a WPF/Silverlight environment, so be sure to get the hang of XAML or even better, get your Expression Blend skills up to date.

Secondly, the best way to create good, manageable code, is by using the MVVM pattern. The fact that this pattern is not only restricted to the Windows Phone 7 environment makes it beneficial to learn it for other projects. MVVM is based on viewmodel property binding for your view data.
Now to get a good start with MVVM, you better use a framework that integrates well with the Windows Phone 7. My personal favourite is MVVM Light Toolkit from Laurent Bugnion!
Get the details here: http://www.galasoft.ch/mvvm/getstarted/ and here: http://mvvmlight.codeplex.com/.

The only drawback in my mind, is the fact that currently you are by default limited in possible api uses from the Phone itself. In other words, some of the nice controls or features used on the default up front installed phone apps are not available to the developers. So another good thing to know is what frameworks/libraries are out there to overcome this…

My current list of libraries are
* Silverlight for windows phone toolkit: http://silverlight.codeplex.com/
* Coding4Fun windows phone toolkit: http://coding4fun.codeplex.com/
* WP7 Contrib framework: http://wp7contrib.codeplex.com/ ( this is actually already a superset of other libraries with custom additions )

When you add these to your Windows Phone 7 tool set, you’ll get plenty of controls and helpers that are needed when you start developing.

To show of some of the features of these frameworks I started a CodePlex project, called WP7Cycling! http://wp7cycling.codeplex.com/
The main reason for this project is just for myself to get to know the development environment, but it will also benefit other developers in showing what can be done in combination with the given toolkits!
For now it doesn’t have any downloads, so just grab the source code to get the complete project if you want to see it running in the emulator: http://wp7cycling.codeplex.com/SourceControl/list/changesets

Currently I created a simple MainPage with an integrated Bing Maps control and when you press the Get current location button on the appbar, the map will center itself on the current GPS coordinate location of the phone.

Have fun coding and any tips or tricks are always welcome 🙂