Click here to Skip to main content
13,293,950 members (54,851 online)
Click here to Skip to main content
Add your own
alternative version


24 bookmarked
Posted 7 Nov 2011

Image Processing in Metro

, 4 Apr 2012
Rate this:
Please Sign up or sign in to vote.
How to do third party image processing in new Metro style apps.


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.

<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
      <StackPanel Orientation="Horizontal">
         <Button Content="Load" FontSize="24" Width="200" Height="60" Click="Load_Click" />
         <Button Content="Process" FontSize="24" Width="200" Height="60" 

            Click="Process_Click" />
      <Image x:Name="Image1" Width="800" Height="600" Stretch="Uniform" 

      <TextBlock x:Name="DisplayText" FontSize="48" Foreground="White" />

To load the image, I used the new FileOpenPicker. I really liked the look and feel of this control and found its file filter an improvement on the old WinForms way of using a single string.

FileOpenPicker openPicker = new FileOpenPicker();
StorageFile file = await openPicker.PickSingleFileAsync();
int loadBitsPerPixel = 0;
RasterCodecs codecs = new RasterCodecs();
if (file != null)
   string fileName = file.Path;
   var winRTStream = await file.OpenAsync(FileAccessMode.ReadWrite);
   IInputStream inputStream = winRTStream.GetInputStreamAt(0);
   DataReader dataReader = new DataReader(inputStream);
   await dataReader.LoadAsync((uint)winRTStream.Size);
   var buffer = dataReader.ReadBuffer((uint)winRTStream.Size);
   using (System.IO.Stream oldRTStream = buffer.AsStream())
      using (RasterImage rasterImage = codecs.Load(oldRTStream, loadBitsPerPixel, 
         CodecsLoadByteOrder.BgrOrGray, 1, 1))
         DisplayText.Text = string.Format("Filename: {0} - {1}x{2}x{3} - {4}", 
         Image1.Source = RasterImageConverter.ConvertToSource(rasterImage, 


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:

using (RasterImage image = RasterImageConverter.ConvertFromSource(Image1.Source, 
   BricksTextureCommand cmd = new BricksTextureCommand(60, 20, 4, 3);
   Image1.Source = RasterImageConverter.ConvertToSource(image, 


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:

FileOpenPicker openPicker = new FileOpenPicker();
StorageFile file = await openPicker.PickSingleFileAsync();
IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.Read);
BitmapImage bmp = new BitmapImage();
Image1.Source = bmp;

Here's the code for flipping an image. The first step is to gain access to the pixel data by creating a WriteableBitmap. Then read from the top and bottom of the image and swap the rows.

// Cast the image in the viewer as a WriteableBitmap
WriteableBitmap wb = Image1.Source as WriteableBitmap;

// If it's a WriteableBitmap, just use it, otherwise create one
if (wb == null) 
   BitmapSource bs = Image1.Source as BitmapSource;
   wb = new WriteableBitmap(bs);

// Assume 32 bits since that is what Metro currently supports
int stride = wb.PixelWidth * 4; 

// extension method defined in System.Runtime.InteropServices.WindowsRuntime
System.IO.Stream pixelStream = wb.PixelBuffer.AsStream(); 

byte[] row1 = new byte[stride];
byte[] row2 = new byte[stride];

// flip the image
for (int row = 0; row < wb.PixelHeight / 2; row++)
   pixelStream.Read(row2, 0, stride);
   pixelStream.Seek((wb.PixelHeight - row - 1) * stride, SeekOrigin.Begin);
   pixelStream.Read(row1, 0, stride);
   pixelStream.Seek(-stride, SeekOrigin.Current);
   pixelStream.Write(row2, 0, stride);
   pixelStream.Seek(row * stride, SeekOrigin.Begin);
   pixelStream.Write(row1, 0, stride);

Image1.Source = wb; 



  • 7th November, 2011: Initial post  
  • 11th November, 2011: Added non-third party example 
  • 4th April, 2012: Added note about Consumer Preview 


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Web Developer
United States United States
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.

You may also be interested in...


Comments and Discussions

GeneralMy vote of 3 Pin
Jymmy0971-Jul-13 23:29
memberJymmy0971-Jul-13 23:29 
Questioncool Pin
Hellowlf23-Jul-12 23:02
memberHellowlf23-Jul-12 23:02 
GeneralMy vote of 5 Pin
Farhan Ghumra27-Jun-12 20:23
memberFarhan Ghumra27-Jun-12 20:23 
QuestionLeadTools does not exists in example with using LeadTools dlls Pin
ilia198726-Jan-12 5:58
memberilia198726-Jan-12 5:58 
Hello Greg! In example with using LeadTools libraries you have used:
But in source code wich I have downloaded from codeproject these libraries does not exists. 
Can you enable for downloading these libraries?

AnswerRe: LeadTools does not exists in example with using LeadTools dlls Pin
gregtheross26-Jan-12 6:04
membergregtheross26-Jan-12 6:04 
SuggestionLove it! Pin
Terry Powell himself21-Nov-11 8:03
memberTerry Powell himself21-Nov-11 8:03 
GeneralRe: Love it! Pin
gregtheross22-Nov-11 5:03
membergregtheross22-Nov-11 5:03 
QuestionPerfect, and I have a question. Pin
PierreBonnet21-Nov-11 7:54
memberPierreBonnet21-Nov-11 7:54 
AnswerRe: Perfect, and I have a question. Pin
gregtheross22-Nov-11 5:01
membergregtheross22-Nov-11 5:01 
GeneralMy vote of 1 Pin
Richard Deeming15-Nov-11 9:19
memberRichard Deeming15-Nov-11 9:19 
GeneralMy vote of 1 Pin
tecgoblin15-Nov-11 3:37
membertecgoblin15-Nov-11 3:37 
QuestionWhy? Pin
HaBiX8-Nov-11 0:43
memberHaBiX8-Nov-11 0:43 
AnswerRe: Why? Pin
gregtheross8-Nov-11 5:04
membergregtheross8-Nov-11 5:04 
GeneralMy vote of 1 Pin
Axel Rietschin7-Nov-11 8:21
memberAxel Rietschin7-Nov-11 8:21 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171207.1 | Last Updated 4 Apr 2012
Article Copyright 2011 by gregtheross
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid