Resize image for Live Tile - WriteableBitmapEx

Question

**
Found the solution
Because of the fact this is a tile, the image will always be strechted to 173 by 173!
To avoid this first create a dummy 173 by 173 and merge this with the resized one!

Rect rect = new Rect(0.0, 0.0, width, height);
WriteableBitmap bitmapDummy = new WriteableBitmap(173, 173);
bitmapDummy.Blit(rect, resized, rect, WriteableBitmapExtensions.BlendMode.None);

**

Well I have created a Background agent to update the live tile of my WP7 app. But no matter what I try to resize it, I'm not getting a good result!

Any tips? Currently I have following code, but I also tried 135 by 173 and also the other Interpolation.

WriteableBitmap writeableBitmap = new WriteableBitmap(bitmapImage);
var resized = writeableBitmap.Resize(173, 173, System.Windows.Media.Imaging.WriteableBitmapExtensions.Interpolation.Bilinear);

There is also a small rectangle added below to show the title of the app! It's 40px in height, would be great if image would be cropped above. The actual image is always 250 by 321px

Answer 1

Your problem is that you're not calculating the width/heights to a correct Aspect ratio.

So to get a 1:1 proportions, you would need a width of 134.735 pixels, for a 173 pixel height.

This can be done by first determining what side is the largest

var aspect = Math.Max(bitmapImage.Width, bitmapImage.Height)
var ratio = largest / 173;
var width = width / ratio;
var height = height / ratio;

var resizedImage = writeableBitmap.Resize(width, height, System.Windows.Media.Imaging.WriteableBitmapExtensions.Interpolation.Bilinear);

And remember to set Stretch="Uniform" to avoid stretching the image to unnecessary proportions.

To create a 173x173 pixel image, with the other image applied on top, use the Blit function from WriteableBitmapEx

var tileImage = new WriteableBitmap(173, 173, ...)
tileImage.Blit(new Rect(width, height), resizedImage, new Rect(width, height), BlendMode.None);