Convert WPF InkCanvas to Bitmap

by jason9. December 2008 14:38

We live in a digital age and if you are like me, paper is only used when it is absolutely unavoidable. If you have a tablet PC, signing your name to attach it to a document may be one less thing you will need a physical sheet of paper for.

The WPF ink control can be put into your XAML to collect stylus strokes as a collection of geometry points. Of course, as the stylus moves, the movements are also shown on screen.

inktest

As I mentioned, the strokes shown in the control are actually stored as a collection of geometric lines. If you want to reproduce those ink strokes, you can save the collection found in a property on the control called "Strokes", but what you can't do with the control's data is store a rendered image of it. Or, at least you can't do this without a little extra work.

One of the nice things about WPF is that its controls can actually be rendered into an image with relative ease. I submit the following code snipit as my solution for rendering the contents of an InkCanvas to a bitmap image:

XAML:

<StackPanel Name="spHorizontal" Orientation="Horizontal">
<InkCanvas Name="icSignature" MinWidth="575" MinHeight="100" />
</StackPanel>

 

C#:

private byte[] SignatureToBitmapBytes()
{   
//get the dimensions of the ink control
int margin = (int)this.icSignature.Margin.Left;
int width = (int)this.icSignature.ActualWidth - margin;
int height = (int)this.icSignature.ActualHeight - margin;
//render ink to bitmap
RenderTargetBitmap rtb =
new RenderTargetBitmap(width, height, 96d, 96d, PixelFormats.Default);
rtb.Render(icSignature);
//save the ink to a memory stream
BmpBitmapEncoder encoder = new BmpBitmapEncoder();
encoder.Frames.Add(BitmapFrame.Create(rtb));
byte[] bitmapBytes;
using (MemoryStream ms = new MemoryStream())
{
encoder.Save(ms);
//get the bitmap bytes from the memory stream
ms.Position = 0;
bitmapBytes = ms.ToArray();
}
return bitmapBytes;
}

As you can see, the bytes of the bitmap are read back out of a memory stream (line 23), but it would also be just as easy to save directly to a file stream; bypassing the memory stream.

The WPF InkCanvas can be used for many, many things (annotating video and images is one cool example I've seen), but another use for it can be a do-it-yourself signature pad.

Tags: , , ,

Development | WPF

Comments (2) -

Ashok
Ashok
9/28/2009 6:25:35 AM #

Hi,

Could you please provide me the sample code for how can I save this image in a file?

jason
jason
9/29/2009 7:24:19 PM #

Ashok,

To write the bitmap to a file, just use a FileStream in place of the MemoryStream.

Comments are closed

About

Jason Williams is a .NET developer in Lincoln, Nebraska.

The name "Centrolutions" came out of a long search for a domain name. The goal was to create a name that conveyed an ideology of writing software centered (Centr--) on a solution (--olutions) for a particular problem. In other words, it was the only name in a long list that wasn't already registered on the internet.

If you're looking for the products I have for sale, you should go here.