Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Pixlate Effect

From Wiki
Jump to: navigation, search

This article explains how to create an effect which looks like the image of a TFT panel.



There is a really cool and geeky effect, which was used in the previous version of Microsoft's MSDN website, which looks like picture that was taken from a TFT display. It looks nice for source code, and at one point, it was pretty common to see such images. This article will help the user implement a similar effect for Nokia Imaging SDK.

The original image, without the Pixlate Effect
The same image with the Pixlate Effect applied


The source code is available on github. You can get it from here.

Code Walkthrough

We begin with the basic Custom Effect implementation, we inherit our class from the CustomEffectBase class.

public class PixlateEffect : CustomEffectBase

Visual Studio will generate the required methods for you. The actual work will happen in the OnProcess method. Let's take a closer look.

            var sourcePixels = sourcePixelRegion.ImagePixels;
var targetPixels = targetPixelRegion.ImagePixels;

We initialize the fields in which we store the image, the actual pixels. Nothing more to comment here.

var row = 0;
sourcePixelRegion.ForEachRow((index, width, position) =>
if (row % 2 == 0)
for (int y = 0; y < width; ++y, ++index)
targetPixels[index] = ResultPixel(sourcePixels[index]);
for (int x = 0; x < width; ++x, ++index)
if (x % 2 == 0)
targetPixels[index] = ResultPixel(sourcePixels[index]);
targetPixels[index] = sourcePixels[index];

What we are doing here is simply walking through the image, selecting every other row and every other column. That is the %2. If we are in an odd row or column, we simply put the original pixel into the new image. The actual magic is the next method:

            var pixel = sourcePixel;
uint blue = pixel & 0x000000ff; // blue color component
uint green = (pixel & 0x0000ff00) >> 8; // green color component
uint red = (pixel & 0x00ff0000) >> 16; // red color component
return 0xdd000000 | blue | (green << 8) | (red << 16); // we return the original pixel, only slightly darker

So, we get each pixel, get the color components and reassemble the pixel later, only with transparency this time. This will be that grid which actually creates the effect.


After reading this code, you should be able to write your own similar effect. I encourage you to do so, get the source from github, modify it, make your own effect.


The code has been released with the standard MIT license.

Article Metadata
Code ExampleTested with
SDK: Windows Phone 8.0 SDK
Dependencies: Nokia Imaging SDK
Created: hlabadi ()
Last edited: Loukt (12 Jul 2014)
This page was last modified on 12 July 2014, at 23:04.
65 page views in the last 30 days.