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="SigPad" Width="404" Height="152"
Canvas.Left="8" Canvas.Top="9" Background="#FFF4F60C" >
<Rectangle Width="404" Height="152" Fill="#FFF1F8DB"
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:
Declare the following member variables:
Partial Public Class Page
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) _
'---user has let go of the left mouse button---
MouseDown = False
'---add the list of points to the current line---
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
Press F5 to test the application. You will now be able to use your mouse to draw on the canvas (see Figure 2).