Silverlight 3 – The Bitmap API / WriteableBitmap
Silverlight 3 introduces the new Bitmap API useful for accomplishing three primary goals:
- Creation of a bitmap completely from scratch, pixel-by-pixel
- Client-side manipulation of an image loaded from your server or the local machine
- Rendering of a portion of the visual tree to bitmap to perform screen-shot like functionality (or improve performance by pre-rendering and caching elements in certain situations)
Creating a Bitmap From Scratch
The key to generating a bitmap is the WriteableBitmap class found in System.Windows.Media.Imaging. You use that class to create a source which is assigned to a normal Image element.
<Grid x:Name="LayoutRoot">
<Image x:Name="MyBitmap"
Width="200"
Height="200" />
</Grid>
Here’s the code to generate a funky image
private void BuildBitmap()
{
const int imageWidth = 200;
const int imageHeight = 200;
WriteableBitmap b =
new WriteableBitmap(imageWidth, imageHeight,
PixelFormats.Bgr32);
b.Lock();
for (int x = 0; x < imageWidth; x++)
{
for (int y = 0; y < imageHeight; y++)
{
// generate a color in Pbgra32 format
byte[] components = new byte[4];
components[0] = (byte)(x % 255); // blue
components[1] = (byte)(y % 255); // green
components[2] = (byte)(x * y % 255); // red
components[3] = 0; // unused
// you could certainly do your own masking here
int pixelValue = BitConverter.ToInt32(components, 0);
// set the pixel value
b[y * imageWidth + x] = pixelValue;
}
}
b.Invalidate();
b.Unlock();
MyBitmap.Source = b;
}The code generates this bitmap:
The order of operations: Lock, Write, Invalidate, Unlock is significant. As of this writing, they are required in that order for WPF compatibility.
You can also manipulate a current bitmap and render the contents of a control to a bitmap. I’ll cover those in a future post as they aren’t 100% baked as I write this.