ne of Silverlight’s key strengths is its ability to provide rich, interactive features. Besides using it to perform cool animations and transformations on graphics and videos, another good use of Silverlight is for developing applications that could not otherwise be developed using conventional web applications (even when using ASP.NET and AJAX). A good example of this is a signature-capturing application. Oftentimes, when you sign for an online service (such as applying for a Google AdSense account), you need to sign a contractual agreement. In place of the traditional signature, you are often requested to provide some sort of personal information (such as your birth date or mother’s maiden name) to prove that you are who you are said you are. This is because there is no way you could sign (literally) on the web page, unless you print out the form, sign it, and fax it back to the service provider.

With Silverlight, you can develop an application that allows users to sign on the page itself. And with more and more people using Tablet PCs (or having access to a pen tablet such as the Wacom Intuos Pen Tablet), pen input is no longer a dream. This article will walk you through creating a Silverlight application that captures the user’s actual signature. You’ll also learn how the signature can be sent back to a web service for archival.

Software Requirements
Before you get started, you would need the following components:

• Silverlight 1.1 Alpha
• Expression Blend 2 (optional)
• Visual Studio 2008 Beta 2
• ASP.NET Futures

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:

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

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

Saving the Signature
Now that you can sign on the canvas, it’s time to save the signature to somewhere. But first, add the code shown in Listing 3 to Page.xaml.

Page.xaml should now look like the example shown in Figure 3 (you can view this in Expression Blend 2).

Figure 3. Page.xaml: The page with three buttons and a TextBlock control.

In Page.xaml.vb, define the GetSignatureLines() function so that the coordinates of the signature can be serialized as a string:

    '---returns the signature as a series of lines---    Private Function GetSignatureLines() As String        Dim sb As New System.Text.StringBuilder        '---for each line---        For i As Integer = 0 To _lines.Count - 1            '---for each point---            For Each pt As Point In _lines(i)                sb.Append(pt.X & "," & pt.Y & "|")            Next            sb.Append(vbLf)        Next        Return sb.ToString    End Function

Define the DrawSignature() subroutine so that the signature can be reproduced from the collection of lines, as shown in Listing 4.

This subroutine is needed so that later on you can reproduce a saved signature when you retrieve it from the web service.

Code the MouseLeftButtonDown event handler for the Clear button so that the signature can be cleared from the drawing pad:

'---Clear button---    Private Sub btnClear_MouseLeftButtonUp( _       ByVal sender As Object, _       ByVal e As System.Windows.Input.MouseEventArgs) _       Handles btnClear.MouseLeftButtonUp        _lines = New List(Of Object)        _points = New List(Of Point)        '---iteratively clear all the signature lines---        For i As Integer = 0 To SigPad.Children.Count - 2            SigPad.Children.RemoveAt(1)        Next        txtStatus.Text = "Signature cleared!"    End Sub

Here, you are simply iteratively removing all the lines in the canvas.

Saving to Web Service
You are now ready to send the signature to a web service. For this purpose, use an ASP.NET application.

Using the same project created in the previous section, add a new web site project to the current solution (see Figure 4).

Figure 4. Use the Same Project: Add a new web site project to the current solution.

Select ASP.NET Futures AJAX Web Site and name the project http://localhost/SignatureWebSite.

In the newly created web project, add a new Web Service item to the Web Site project.

In the WebService.vb file, add the following lines in bold:

Imports System.WebImports System.Web.ServicesImports System.Web.Services.ProtocolsImports System.Web.Script.Services' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.'  _ _ _ _