y now, you’ve heard of Apple’s revolutionary iPhone (perhaps you even have one yourself). One of the most interesting features of the iPhone is its touch user interface, which allows users to interact with the phone using their fingers. This is in sharp contrast to the touch-screen used in Windows Mobile devices, which employs single-touch technology and only responds to an exact tap– hence the need to use a stylus. However, not everyone enjoys using the stylus, especially end users. And users often end up using their fingernails to tap the various controls on the screen.

It’s impossible to convert your existing Windows Mobile devices to use the multi-touch technology. Not only would this require modifications to the OS to detect multi-touches, it would also require you to overhaul the entire UI to respond appropriately to touches. However, you can ensure that your application design allows users to navigate its user interface easily using their fingers (and not the stylus).

This article will show the simple techniques you can employ to make your Windows Mobile application respond to touches.

Touch UI for Windows Mobile Devices
At the time of writing, there is only one Windows Mobile device that sports a touch user interface:the HTC Touch (see Figure 1). The HTC Touch utilizes a different type of screen technology and is able to respond to touches as well as the tapping of the stylus. In addition, the HTC Touch includes a new UI layer that wraps around the original Windows Mobile user interface. Users primarily interact with the new UI layer to access commonly used applications on the device (PIM applications such as Contacts, Phone Dialer, and so on). Unfortunately, you will ultimately still end up with the original PIM applications, which are not designed for touch navigation in the first place.

Figure 1. The HTC Touch: Able to respond to touches as well as the tapping of the stylus.

Figure 2. The Pointui Interface: You will still need to use the stylus (or fingernail) to touch the relatively large controls.

Here are the important points to take away from examining the current solutions available:

• Current solutions are only skin-deep: Most of the Windows Mobile applications in use today are still designed for use with a stylus.
• Redesign is necessary: You have to redesign your application UI so that users can easily interact with it using their fingers (without needing a stylus).
• There are physical limitations:

Unless you have the HTC Touch, you are limited by the screen hardware. This means that you can never have true touch capability (but the experience is close enough if the UI design takes into consideration this fact).

With these restrictions in mind, let’s take a look at two examples of how to design your application UI for touch interaction.

First Example: A Slider Control
The first example is a slider control, which is shown in Figure 3. Suppose a user wants to temporarily lock their application to prevent unwanted inputs. To unlock the application, the user needs to swipe the button from left to right. Because the button is large, the user is able to comfortably use his finger to accomplish this action.

Using a slider is much useful than asking the user to tap multiple buttons. Conversely, think about what happens when a user tries to unlock a locked Windows Mobile device. As shown in Figure 4, they’d have to first tap on the Unlock menu item and then tap again on the Unlock button. The slider is much more intuitive and eliminates the series of actions required.

Figure 3. The First Example: Locking and unlocking an application.

Figure 4. Two Taps: Unlocking a locked Windows Mobile device is less intuitive.

The slider can also be used to toggle. Figure 5 shows how theiPhone uses this type of control for various purposes.

Coding the Example
To get started, launch Visual Studio 2008 and create a new Windows Mobile device project. In the default Form1, populate the form with the controls shown in Figure 6.

Figure 5. Sliders Rule: The iPhone uses sliders for different purposes.

Figure 6. Populating Form1: Add the controls shown here to Form1.

Set the properties of the various controls as shown in Table 1.

Table 1. This shows how to set the properties of the various controls.

How the slider works is very simple. When the user touches (or taps) the PictureBox control, this fires it’s MouseDown event. When a finger swipes the control over the screen, it fires MouseMove event continually. In this event, you have to constantly relocate the PictureBox control; doing so creates the effect of the button actually moving. When the user lifts their finger, this fires MouseUp event. At this stage, you will decide if the PictureBox control has reached the end of the well (hence the slider is unlocked), or else you have to move the PictureBox control back to the left a few pixels at a time, which simulates it sliding back. Figure 7 shows the various events you need to service.

Figure 7. Servicing the Various Events: The finger position controls firing the events.

You are now ready to code the application. Switch to the code-behind of Form1 and define the various constants and variable:

Public Class Form1    '---position for the slider when locked---    Const SLIDER_LOCKED = 3    '---position for the slider when unlocked---    Const SLIDER_UNLOCKED = 154    '---the last touched x-coordinate---    Dim _prevX As Integer

First, service the MouseDown event:

    Private Sub PictureBox1_MouseDown( _       ByVal sender As Object, _       ByVal e As System.Windows.Forms.MouseEventArgs) _       Handles picSlider.MouseDown        '---records the x-coordinate where the user taps on---        _prevX = e.X    End Sub

As the finger swipes the PictureBox control across the screen, it fires the MouseMove event continuously (as seen in Listing 1).

Finally, when the user lifts their finger, this fires the MouseUp event:

    Private Sub PictureBox1_MouseUp( _       ByVal sender As Object, _       ByVal e As System.Windows.Forms.MouseEventArgs) _       Handles picSlider.MouseUp        '---if the slider has not been unlocked---        If picSlider.Left <> SLIDER_UNLOCKED Then            Dim picCurrentLeft = picSlider.Left            '---animate moving the slider back---            While picSlider.Left > SLIDER_LOCKED                picSlider.Left -= 3                Application.DoEvents()            End While            '---display the message---            lblMessage.Visible = True        End If    End Sub

The SliderUnlocked() subroutine simply emits a beep and prints a message on the screen indicating that the application is unlocked:

Public Sub SliderUnlocked()        '---emits a beep and display a message indicating         ' the slider has been unlocked---        Media.SystemSounds.Beep.Play()        MsgBox("Unlocked!")    End Sub

That’s it! Press F5 to test the application on a real device (you can also use an emulator). Download the following video how your slider control will work in real-time.

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.