Image Processing in Metro

Editorial Note

This article appears in the Third Party Product Reviews section. Articles in this section are for the members only and must not be used by tool vendors to promote or advertise products in any way, shape or form. Please report any spam or advertising.

Introduction

I finally got around to playing with the Windows 8 developer preview and Metro apps. After tinkering around with the new Start Menu and apps, I decided to try a simple image display and processing Metro app.

Using the Code

First, I created a basic layout with 2 buttons, an image, and label for displaying some metadata. I was happy to see that they stuck with XAML so the learning curve was very small.

I’ve always felt like native image processing was lacking and don’t mind using third party libraries, so I tried an evaluation copy of LEADTOOLS I had from a previous project to see if it worked on the new Windows 8. The .NET 4 libraries worked, but in order to convert form the LEADTOOLS RasterImage class to the new Metro ImageSource, I used a pre-release DLL from their support department:

Overall, I enjoy the new Metro style apps. It was fun to play around with the developer preview and it was comforting to see the learning curve is minimal and that third party components are already getting their feet wet as well rather than waiting for Windows 8 to be "officially" released.

Note Regarding Visual Studio 11 Beta and Windows 8 Consumer Preview

When I originally wrote this, I used Visual Studio 11 Developer Preview.
Since then I've tried the same example with Visual Studio 11 Beta and Windows 8 Consumer Preview and it no longer works due to Metro apps now using .Netcore rather than accepting .NET Framework 4.0 libraries (see this forum post for more details).

Native Code Example

As requested by some users, I've attached an app that does some image processing without any 3rd party tools.

Here is how I loaded the image programmatically using the FileOpenPicker:

Share

About the Author

Starting with my NES in 1990, I've loved computers ever since. Writing video game hacks (the kinds for unlimited health and super-powerful guns mind you...I always purchase my software!) and webpages for fun in middle school, a college education in Computer Science and a career in software development was a lock.

Currently, I work as a web developer and technical writer and primarily use .NET.

Hello Greg! In example withusing LeadTools libraries you have used:
LeadTools.dll
LeadTools.Codecs.dll
LeadTools.Codecs.Bmp.dll
LeadTools.Codecs.Cmp.dll
LeadTools.Codecs.Fax.dll
LeadTools.Codecs.Gif.dll
LeadTools.Codecs.Png.dll
LeadTools.Codecs.Tif.dll
LeadTools.ImageProcessing.SpecialEffects.dll
LeadTools.Metro.Media.dll
But in source code wich I have downloaded from codeproject these libraries does not exists.
Can you enable for downloading these libraries?

Awesome tutorial Sir, I tried your code, I’m surprised how fast it is. However, in the native image processing code you wrote, you used pixelStream.Read(row2, 0, stride), which means that you are copying each row to a buffer, correct? If so, this can affect the speed of the overall process. Is there any way to read the WriteableBitmap data directly without copying it to a buffer first?

You have to use two buffers b/c you are working “in place” on the source image.
If you were creating a new image from the original, then you could read from the source directly into the target (at the proper location).