Basic image filters for Windows Store apps

Basic image filters for Windows Store apps

Basic image filters for Windows Store apps

This tutorial demonstrates you how you can create a Windows Store app that will open a picture and apply a basic image filter to it.
You can use the filter from this tutorial, or any other basic image filter. The filter that we use here is an invert filter, therefore all colors in the target picture will be inverted.

Just like in the tutorial “Basic image filters for Windows Phone” we will add an Image, load a picture to a WriteableBitmap, apply the filter and display it in the Image. The idea is the same, unfortunately the code is not..

In Windows Store apps WriteableBitmap works differently. We can not access the pixel array directly.. Instead of the array with Int32 ARGB colors, we can obtain a byte array here. This byte array has a byte for each color, 4 colors per pixel in BGRA order. A little different approach. Easier to get the color, but a little harder to write back.

  • In Visual Studio create a new Windows Store (Blank) App project
  • Add a picture to your project with Build Action “Content”. In my case this is kim.jpg in the folder “Pictures”
  • In MainPage.xaml add a new Image tag in the main Grid:
    <Image Name="myImage"/>
  • Go to MainPage.xaml.cs and add make sure the following usings are present:
    using System;
    using Windows.Storage;
    using Windows.Storage.Streams;
    using Windows.UI.Xaml.Media.Imaging;
    using System.Runtime.InteropServices.WindowsRuntime;
  • Very dirty to do in the constructor, so make something prettier for yourself but this is the code to load the picture and call our filter:
    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        // Open the file
        StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Pictures/Kim.jpg"));
    
    	using (IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read))
    	{
    		// We have to load the file in a BitmapImage first, so we can check the width and height..
    		BitmapImage bmp = new BitmapImage();
    		bmp.SetSource(fileStream);
    		// Load the picture in a WriteableBitmap
    		WriteableBitmap writeableBitmap = new WriteableBitmap(bmp.PixelWidth, bmp.PixelHeight);
    		writeableBitmap.SetSource(await file.OpenAsync(Windows.Storage.FileAccessMode.Read));
    
    		// Now we have to extract the pixels from the writeablebitmap
    		// Get all pixel colors from the buffer
    		byte[] pixelColors = writeableBitmap.PixelBuffer.ToArray();
    
    		// Execute the filter on the color array
    		ApplyFilter(pixelColors);
    
    		// Now we have to write back our pixel colors to the writeable bitmap..
    		writeableBitmap.PixelBuffer.AsStream().Write(pixelColors, 0, pixelColors.Length);
    
    		// Set the source of our image to the WriteableBitmap
    		myImage.Source = writeableBitmap;
    		// Tell the image it needs a redraw
    		writeableBitmap.Invalidate();
    	}
    }
  • And finally the filter itself. You can replace this filter by any other image filter.
    void ApplyFilter(byte[] target)
    {
        // for each pixel in the array
    	for (int i = 0; i < target.Length; i += 4)
    	{
    		// Subtract the colors from white(255 or 0xFF)
    		// Blue
    		target[i + 0] = (byte)(255 - target[i + 0]);
    		// Green
    		target[i + 1] = (byte)(255 - target[i + 1]);
    		// Red
    		target[i + 2] = (byte)(255 - target[i + 2]);
    		// Alpha
    		//target[i + 3] = target[i + 3];
    	}
    }

Download Download the Visual Studio 2012 project

Windows Store app invert photo filter

Windows Store app invert photo filter

One thought on “Basic image filters for Windows Store apps”

  • Good post, just what I needed to continue on. The WriteableBitmap in windows/phone 8.1 is getting on my nerves!! Perhaps time to create a nuget package with good extensions, what do you say?

Leave a Reply

Your email address will not be published. Required fields are marked *