Over a million developers have joined DZone.

Altering pixels in a Windows Phone 7 Silverlight-based app

DZone's Guide to

Altering pixels in a Windows Phone 7 Silverlight-based app

· Mobile Zone
Free Resource

Launching an app doesn’t need to be daunting. Whether you’re just getting started or need a refresher on mobile app testing best practices, this guide is your resource! Brought to you in partnership with Perfecto

There might be many reasons that require the developer to alter some pixels on the screen. One of them could be drawing 8-bit graphics or you simply need to hide a part of the image and you know the exact section that needs removed.

In a regular .NET application, you have a pretty decent toolset to do this kind of stuff. On the other hand, Windows Phone 7 has an SDK that is reduced to a minimum for performance reason. Nonetheless, pixel color replacement is still possible with the WriteableBitmap class (pretty well-known among Silverlight developers).

This class offers the Pixels property that is nothing but an array of integer values that represent the ARGB values for each pixel color. It is important to know how these pixels are enumerated.

Starting from left to right, the pixel ID is incremented by one and continues with the same pattern from the next row. So, for example, if you would have a 300x2 pixel image, if you want to select the first 350 pixels, it will select the first 300 from the first row and then 50 from the next row.

The replacement procedure is performed via SetValue called on the same Pixels property:

WriteableBitmap bitmap = new WriteableBitmap(LayoutRoot, null);
bitmap.Pixels.SetValue(-90756, 0);

Here, LayoutRoot is a simple Grid instance. I am setting the 0-th pixel to -90756 (remember that this is ARGB). If I want to replace a series of pixel, I can easily put it all together in a for loop:

for (int i = 0; i < 200000; i++)
bitmap.Pixels.SetValue(-90756, i);

In this particular sample, I will be replacing 200,000 pixels starting with the first one. You can get the total number of pixels in the current bitmap with the help of the Count method:


One thing to remember here is the fact that whenever you start the replacement process, I would highly recommend having the post-processing and displaying actions ported to a delegate. The UI thread (or the thread you are running on) will not wait for the loop to complete. So, for example, if I want to display the image with this:

Image1.Source = bitmap;

I will not get the full transformation and I might get the raw bitmap (without replaced pixels). To implement it the way I want, the code should look like this:

public void PerformReplacement(ExecuteAction action)
WriteableBitmap bitmap = new WriteableBitmap(LayoutRoot, null);

for (int i = 0; i < 200000; i++)
bitmap.Pixels.SetValue(-90756, i);


ExecuteAction in this case is a delegate that requires a WriteableBitmap as a parameter:

public delegate void ExecuteAction(WriteableBitmap bitmap);

So if I want to execute an actual operation, I can call it like this:

PerformReplacement(new ExecuteAction((bitmap) => { Image1.Source = bitmap; }));

Keep up with the latest DevTest Jargon with the latest Mobile DevTest Dictionary. Brought to you in partnership with Perfecto.


Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}