Login | Register   
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

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

What if you could convert your devices to use the kind multi-touch technology you see in an iPhone? It requires modifications to the OS and an overhaul to the entire UI, but it can be done.


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



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap