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

Author’s Note: If you have Visual Studio 2008 installed, be sure to check Microsoft?s web site to see if the Silverlight 1.1 Alpha has been fixed to work with the RTM version of Visual Studio 2008. At the time of writing, Silverlight 1.1 Alpha can only work with the Beta 2 of Visual Studio 2008. By the time you read this article, Microsoft should have fixed this problem.

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)

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

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.

Author’s Note: In this section, you will be using the ASP.NET Futures release. You can download the ASP.NET Futures here.

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.'  _ _ _ _ _Public Class WebService    Inherits System.Web.Services.WebService    ...    ...End Class

Define the following two web methods:

     _    Public Function SaveSignature(ByVal value As String) As Boolean        Try            My.Computer.FileSystem.WriteAllText( _               Server.MapPath(".") & "Signature.txt", value, False)            Return True        Catch ex As Exception            Return False        End Try    End Function     _    Public Function GetSignature() As String        Dim fileContents As String        fileContents = My.Computer.FileSystem.ReadAllText( _           Server.MapPath(".") & " Signature.txt")        Return fileContents    End Function

The SaveSignature() function saves the values of the signature into a text file. The GetSignature() function reads the content of the text file and returns the content back to the caller.

In the Signature Silverlight project, add a web reference to the web service you just created. In the Add Web Reference dialog, click the following (see also Figure 5):

1. Web Services in this solution link
2. WebService
3. Add Reference

Figure 5. Add a Web Reference: Click these buttons to add a web reference to the Web service.

In Page.xaml.vb, code the Save button as follows:

    '---Save button---    Private Sub btnSave_MouseLeftButtonDown( _       ByVal sender As Object, _       ByVal e As System.Windows.Input.MouseEventArgs) _       Handles btnSave.MouseLeftButtonDown        Try            Dim ws As New localhost.WebService            If ws.SaveSignature(GetSignatureLines) Then                txtStatus.Text = "Signature sent to WS!"            Else                txtStatus.Text = "Error saving to file"            End If        Catch ex As Exception            txtStatus.Text = ex.ToString        End Try    End Sub

Here, you send the signature to the Web service.

Next, code the Load button as follows:

    '---Load button---    Private Sub btnLoad_MouseLeftButtonDown( _       ByVal sender As Object, _       ByVal e As System.Windows.Input.MouseEventArgs) _       Handles btnLoad.MouseLeftButtonDown        Try            Dim ws As New localhost.WebService            DrawSignature(ws.GetSignature)            txtStatus.Text = "Signature loaded from WS!"        Catch ex As Exception            txtStatus.Text = ex.ToString        End Try    End Sub

Here, you call the web service to retrieve the saved signature. Save the Signature project.

In Solution Explorer, right-click the http://localhost/SignatureWebSite project, and select Add Silverlight Link.

This will cause Visual Studio 2008 to copy the relevant files from the Silverlight project onto the current project. Select Signature and click OK.

When prompted if you would like to enable Silverlight debugging, click Yes. Notice that a new folder named ClientBin is added to the project and the various files copied onto the project.

The copied files form the compiled Silverlight application.

In Default.aspx, add the following code in bold:

Here, you use the new element to host a Silverlight page.

In the Solution Explorer, right-click the http://localhost/SignatureWebSite project and select Set as Startup Project.

Select Default.aspx and then press F5 to test the project. You can now save the signature to the web service as well as load the saved signature from the web service (see Figure 5).

Useful Last Words
You’ve seen how to build a Silverlight application to capture a user’s signature and then send it to a web service. One particular point to note is the use of the new element to host a Silverlight application from within ASP.NET. In addition, the Silverlight application can only send data back to the web service hosted in the same domain as the web page that is hosting it?cross-domain calls are not supported in this release.