WEBINAR:
On-Demand
Building the Right Environment to Support AI, Machine Learning and Deep Learning
Capturing the Signature
Using Visual Studio 2008 Beta 2, create a new Silverlight project and name it
Signature.
Add a canvas and rectangle object to the page to show the area where the user can sign on it. Populate Page.xaml as follows:
<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Page_Loaded"
x:Class="Signature1.Page;assembly=ClientBin/Signature1.dll"
Width="640"
Height="480"
Background="White">
<Canvas x:Name="SigPad" Width="404" Height="152"
Canvas.Left="8" Canvas.Top="9" Background="#FFF4F60C" >
<Rectangle Width="404" Height="152" Fill="#FFF1F8DB"
Stroke="#FF000000" StrokeThickness="3"/>
</Canvas>
</Canvas>
The page should be like the one shown in
Figure 1 (you can use Expression Blend 2 to view the page).
 | |
Figure 1. Page.xaml: The Silverlight page with a rectangle for capturing the user's signature. |
With the user interface created, you can now write the code to capture the signature. In Page.xaml.vb, import the following namespaces:
Imports System.Windows.Media.Color
Imports System.Collections.Generic
Declare the following member variables:
Partial Public Class Page
Inherits Canvas
Private MouseDown As Boolean = False
Private _previouspoint As Point
Private _points As List(Of Point)
Private _lines As New List(Of Object)
Capturing the user's signature mainly involves servicing three event handlers:
- MouseLeftButtonDown: When the left mouse button is clicked
- MouseLeftButtonUp: When the left mouse button is released
- MouseMove: When the mouse moves
Code the
MouseLeftButtonDown event handler as shown in
Listing 1.
The MouseLeftButtonDown event is fired when the user clicks the left mouse button. Here, you will interpret it as the beginning of a handwriting stroke and start to record the first point that the user has made on the canvas control.
Listing 2 shows the code for the MouseMove event handler.
The MouseMove event is fired continuously as the user moves the mouse. Here, you will draw a line connecting the previous point with the current point and record all the coordinates into the _points variable.
Code the MouseLeftButtonUp event handler as follows:
'---fired when the user let go of the left mouse button---
Private Sub SigPad_MouseLeftButtonUp( _
ByVal sender As Object, _
ByVal e As System.Windows.Input.MouseEventArgs) _
Handles SigPad.MouseLeftButtonUp
'---user has let go of the left mouse button---
MouseDown = False
'---add the list of points to the current line---
_lines.Add(_points)
End Sub
The
MouseLeftButtonUp event is fired when the user releases the left mouse button. Here, you will interpret it as the end of a stroke. The series of points stored in the
_points variable is then appended to the
_lines variable.
Press F5 to test the application. You will now be able to use your mouse to draw on the canvas (see Figure 2).