#ComDayBe – Image manipulation in Windows 8 metro app

@BartLannoeye ( his blog ) and I did a session on Building the Windows 8 Community app, yesterday at Community Day 2012, this as members of the WiPhug user group.

During this session I presented some technical items on how to make your Windows 8 app more attractive… Because of the fact that we currently only shared the slide deck, I’ll be putting up some small blog posts with code references so you can use these inside your own app as well!

First post is about doing Image manipulation in Windows 8 metro.

Our Community app presents a list of events that contain sessions. Such a session can be given by one speaker or more speakers. What we wanted to achieve was to let the user of our app directly see the image(s) of the speaker(s) when he looks at the session list. But the trick here is that because of the use of XAML templates we only have one Image control inside our session list with a given Width and Height. So we need to transform the given images so that they will fit. The effect we are after is this, one speaker = one large image, more speakers = smaller images inside one large one:

image

Now how do you do this… well it’s very easy and this thanks to the WriteableBitmapEx lib available on codeplex or through NuGet. But let me suggest you get the source code because you’ll need to tweak one small thing to get a good result! ( more on this later ) This library gives you a whole range of different extensions on the WriteableBitmap class that is available in .Net namespace Windows.UI.Xaml.Media.Imaging. With these extensions you can manipulate your images.

So when you added a reference to the WriteableBitmapEx, you’ll only need a WriteableBitmap inside your code and you are set! What we do in our app, if the session is only given by one speaker we will just be downloading the image from the web ourselves and return it to the image control.

Downloading images from the web is done by using the FromStream extension.

 

UPDATE: if you get version 1.0.2.0 of the WriteableBitmapEx, you don’t need to change the source code, because as of that version the problem has been fixed!

But befor we continue, do note that the current code base of the FromStream method swaps Red en Blue colour channels! The effect you’ll get are speaker images that look a lot like Navi people from Avatar 🙂 . So therefore, open up the WinRT project of the WriteableBitmapEx solution and search for the FromStream method, it is inside the WriteableBitmapConvertExtensions.cs file! Just put in comment the for block that is underneath the pixelData.DetachPixelData();

But what do we do when we have several speakers and only the same amount of image space inside our XAML? Well we just resize the original images and merge them inside one larger one at specific positions… we currently only support up to 4 speakers, so I didn’t use a sophisticated algorithm to do the transformations.

To do this kind of manipulation we use the Blit method. The Blit method is used on the Target image and you’ll have to give it a set of 4 parameters. The first one is a rectangle indicating where in the new Target image you will be placing the Original image. But the neat thing here is, that by setting this first rectangle parameter you can also in one go resize the Original image! The second parameter is the actual Original image itself. And the third parameter is a source rectangle, also here a neat thing, you can if you want only take out a part of the original image! But we use the complete image… The last parameter is a BlendMode and this is set to Additive.

Now how does this look in code:

 

So that’s it! Now you have everything in place to get the cool look we showed you in our app 🙂

I’ve added a demo solution – Visual Studio 2012 RC – with all the code, so you can try it out.

WriteableBitmapEx Demo solution