Adding Multi-Touch to Your Windows Mobile Application's User Interface : Page 3

Second Example: A Book Selector
Instead of having users select items from a combo-box control, wouldn't it be more intuitive for them to select items visually using their fingers? This next example builds on the concepts discussed in the first. The screen displays a selection of books. To view each title, users simply touch the picture. Users can also rearrange the books by dragging them across the screen (see Figure 8).

Figure 8. The First Example: Selecting, viewing, and rearranging books.

Figure 9. Form2: Adding the two controls to Form2.

Coding the Second Example
To build the second example, add a new form to the project. Add controls to the form, as shown in as shown in Figure 9.

Add the three book cover images into the project (see Figure 10) and set their Copy to Output property as Copy. This will deploy them to the Windows Mobile device.

Figure 10. Adding Images: This will deploy the book cover images to the device.

Switch to the code-behind of Form2 and define the following constants and variables:

Public Class Form2
    '---size of picture---
    Const PIC_WIDTH As Integer = 83
    Const PIC_HEIGHT As Integer = 100

    '---spacing between the two pictures---
    Const SPACING As Integer = 5

    '---stores the path of the executable---
    Dim path As String

    '---arraylist containing all the pictures---
    Dim pictures As New ArrayList

    '---coordinates of the last point touched---
    Dim _prevX As Integer
    Dim _prevY As Integer

In the Form1_Load event handler, create new PictureBox controls to display the images and then wire up each control with the MouseMove and MouseDown event handlers Listing 2).

In this example, each PictureBox control is wired up with the PictureBox_MouseMove and PictureBox_MouseDown event handlers. These two event handlers are defined as shown in Listing 3.

Unlike in the first example, there is no need to service the startup object for the project to Form2 and press F5 to test the application. You can now rearrange the books with your finger! Download the following video how your book selector will work in real-time.

Previous Page