Signature Capture–WPF
July 3, 2012 3 Comments
I kept working on the SignaturePanel this last week. I decided to make the same thing in WPF. I fired up a new WPF Application and hooked up a reference to my existing SignatureCapture.Support class. I then added a Rectangle (changed it later to a Canvas) to the MainWindow and three buttons.
I then started copy/pasting the code from my WinForms application to the window’s code-behind.
Yikes! It looks like the Point and Pen class has been changed from the Windows Implementation to the WPF implementation. My first thought was to throw away the WPF version by using the trusty Remove and Sort Using context menu:
I then fully-qualified my classes:
And then I realized that I was completely wrong and if I spent more than 1 second thinking about the problem, the whole remove usings/fully qualifying the classes won’t work.
BECAUSE THEY ARE TWO DIFFERENT TYPES.
Given the choice of adding new functions to my Support class or converted, I chose the later. I added a Convert Line method like so:
private System.Drawing.Point ConvertPoint(System.Windows.Point point) { System.Drawing.Point returnPoint = new System.Drawing.Point(); returnPoint.X = (Int32)point.X; returnPoint.Y = (Int32)point.Y; return returnPoint; }
and then I wired up the UI:
private void signatureCanvas_MouseMove(object sender, MouseEventArgs e) { if (IsCapturing) { if (startPoint.IsEmpty && endPoint.IsEmpty) { endPoint = ConvertPoint(e.GetPosition(this.signatureCanvas)); } else { startPoint = endPoint; endPoint = ConvertPoint(e.GetPosition(this.signatureCanvas)); Line line = new Line(startPoint, endPoint); glyph.Lines.Add(line); DrawLine(line); } } }
Note that the e.GetPosition() method replaces the WinForm’s e.Location property. The key thing is that the second argument (location) needs to be your capturing panel to make it equivalent to the WinForm implementation…
private void DrawLine(Line line) { System.Windows.Shapes.Line currentLine = new System.Windows.Shapes.Line(); currentLine.Stroke = System.Windows.Media.Brushes.Black; currentLine.X1 = line.StartPoint.X; currentLine.Y1 = line.StartPoint.Y; currentLine.X2 = line.EndPoint.X; currentLine.Y2 = line.EndPoint.Y; currentLine.StrokeThickness = 1; signatureCanvas.Children.Add(currentLine); }
private void signatureCanvas_MouseUp(object sender, MouseButtonEventArgs e) { IsCapturing = false; signature.Glyphs.Add(glyph); startPoint = new System.Drawing.Point(); endPoint = new System.Drawing.Point(); }
private void signatureCanvas_MouseDown(object sender, MouseButtonEventArgs e) { IsCapturing = true; glyph = new Glyph(); }
All that was left was to handle the button clicks:
private void clearButton_Click(object sender, RoutedEventArgs e) { signatureCanvas.Children.Clear(); }
private void exportButton_Click(object sender, RoutedEventArgs e) { signatureFactory.SerializeSignatureToDisk(signature, fileName); }
private void DrawSignature() { foreach (Glyph glyph in signature.Glyphs) { foreach (Line line in glyph.Lines) { DrawLine(line); } } }
private void importButton_Click(object sender, RoutedEventArgs e) { signature = signatureFactory.DeserializeSignatureFromDisk(fileName); signatureCanvas.Children.Clear(); DrawSignature(); }
And now I have a WPF implementation of the signature capture panel:
With the cool thing is that I can import and signature from a WinForm into my WPF app, or export my WPF generated signature into the WinForm app or that Web Form app,
Good article Jamie. Would you provide the source code?
Hello this code is very helpful. Please upload the source code for the same.
This is very helpful. Can I get the source? Thank you!!