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

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.

Control	Property	Value
pnlBackground	Location Size BackColor	3,50 234,62 HotTrack
pnlSliderWell (embedded within pnlBackground)	Location Size BackColor	3,3 228,56 PaleGreen
picSlider	Location Image Size	3,4 Set it to the image as shown in Figure 6 73,48
lblMessage	Text	“slide to unlock”

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.

Previous Page

Next Page