Untapped Silverlight Powers: The Interactive Application : Page 2

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)

Author's Note: The techniques for capturing and storing a signature is similar to techniques previously discussed in an earlier article, Capture Signatures Remotely from Your Pocket PC.

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.

Figure 2. It Works!: Signing on the canvas.

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).

Previous Page

Next Page