C# 2008 Programmer's Reference

Figure 19-66

The points touched by the mouse between the MouseLeftButtonDown and MouseLeftButtonUp events are saved as a series of continuous points (called a line). For example, the character 'C' is made up of one line (assuming that you did not release the left mouse button while drawing it), while the character 't' is made up of two lines — one horizontal and one vertical (see Figure 19-67).

Figure 19-67

The points making up an individual line are saved in a generic List object. The individual lines in each character are also saved in a generic List object, as Figure 19-68 shows.

Figure 19-68

Coding the Application

In Page.xaml.cs (see Figure 19-69), declare the following member variables:

public partial class Page : UserControl {
 private bool MouseDown = false;
 private Point _previouspoint;
 private List<Point> _points;
 private List<List<Point>> _lines = new List<List<Point>> ();

Figure 19-69

Add the following highlighted lines to the Page() constructor:

public Page() {
 InitializeComponent();
 //---wire up the event handlers---
 SigPad.MouseLeftButtonDown += new
  MouseButtonEventHandler (SigPad_MouseLeftButtonDown);
 SigPad.MouseLeftButtonUp += new
  MouseButtonEventHandler(SigPad_MouseLeftButtonUp);
 SigPad.MouseMove += new
  MouseEventHandler(SigPad_MouseMove);
}

The MouseLeftButtonDown event is fired when the user clicks on the left mouse button. Here you interpret it as the beginning of the signature signing process. Code the MouseLeftButtonDown event handler of SigPad as follows:

//---fired when the user clicks on the Signature pad---

void SigPad_MouseLeftButtonDown(
 object sender, MouseButtonEventArgs e) {
 //---record that the mouse left button is pressed---
 MouseDown = true;
 //---create a new instance of _points and _lines to
 // record all the points drawn---
 _points = new List<Point>();
 //---save the current point for later use---
 _previouspoint = e.GetPosition(SigPad);
 //---add the point---
 _points.Add(_previouspoint);
}

The MouseLeftButtonUp event is fired when the user releases the left mouse button. You interpret that as the end of the signature signing process. Code the MouseLeftButtonUp event handler of SigPad as follows:

//---fired when the user let go of the left mouse button---
void SigPad_MouseLeftButtonUp(
 object sender, MouseButtonEventArgs e) {
 //---user has let go of the left mouse button---
 MouseDown = false;
 //---add the list of points to the current line---
 _lines.Add(_points);
}

The MouseMove event is fired continuously when the user moves the mouse. Here, you draw a line connecting the previous point with the current point. Code the MouseMove event handler of SigPad as follows:

//---fired when the left mouse button is moved---
void SigPad_MouseMove(object sender, MouseEventArgs e) {
 //---if left mouse button is pressed...---
 if (MouseDown) {
  //---add the current point---
  var currentPoint = e.GetPosition(SigPad);
  _points.Add(currentPoint);
  //---draws a line connecting the previous
  // point and the current point---
  Line line = new Line() {
   X1 = _previouspoint.X,
   Y1 = _previouspoint.Y,
   X2 = currentPoint.X,
   Y2 = currentPoint.Y,
   StrokeThickness = 2,
   Stroke = new SolidColorBrush(Colors.Black)
  };
  //---add the line to the signature pad---
  SigPad.Children.Add(line);
  //---saves the current point for later use---
  _previouspoint = currentPoint;
 }
}

Press F5 to test the application. Use your mouse to draw on the web page (see Figure 19-70).

Figure 19-70

Saving the Signature to Isolated Storage

This section explains how to store the coordinates of the signature using isolated storage. This technique is useful if you need to persist information on the client side, such as backing up the signature that the user has signed.

Using the same project created in the previous section, add the following highlighted code to Page.xaml:

<UserControl x:Class='Signature.Page'
 xmlns='http://schemas.microsoft.com/client/2007'
 xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
 Width='400' Height='300'>