WPF multi-touch development: Raw touch)

Multi-touch is to reach people and applications through contact with touch screen devices.ProgramInteractive operation process. For example, touch-screen mobile phones, touch-screen laptops, monitors, and Microsoft's latest surface products that are frequently used in daily life are all touch-screen operating devices. This article describes how to develop applications that support the MT function.

The multi-touch development technology already available in WPF 4. When multiple fingers touch a touch screen device, WPF considers each finger as a touch device, and assign a unique identification ID to track the operation gestures of different fingers. The following example demonstrates the low-level touch operations supported by WPF: touch down, touch up, and touch move. These are some of the most basic operation modes.

Create a project

The new project is written as follows in XAML:Code, <Grid> only the <canvas> control is added, which contains three basic touch events: Touchdown, touchup, and touchmove. When the fingers touch the program, a colored circle is generated in the canvas. The position of the circle changes as the fingers move, and the circle disappears when the fingers exit the touch screen. Next, we will explain the tasks completed by each event one by one.

 <  Window  X  :  Class = "Wpfrawtouch. mainwindow"  Xmlns  = "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"  Xmlns  :  X  = "Http://schemas.microsoft.com/winfx/2006/xaml"  Title  = "Mainwindow"  Height  = "350"  Width  = "525"> <  Grid  > < Canvas  X  :  Name  = "Touchpad"  Background  = "Gray"  Touchdown  = "Touchpad_touchdown"  Touchup  = "Touchpad_touchup"  Touchmove  = "Touchpad_touchmove"> </  Canvas  > </  Grid > </  Window  > 

The touchdown event is mainly used to generate a color circle in the <canvas> control when a touch is generated (C # code is as follows ). Use ellipse to create a random circle, use the gettouchpoint method to obtain the touch position, and adjust the position of the circle in <canvas>. To track the movement of fingers, you need to store the touch screen device ID and UI control in the Set movingellipses.

 Private  Dictionary < Int , Ellipse > Movingellipses = New  Dictionary < Int , Ellipse > ();Random RD = New  Random (); Private void Touchpad_touchdown ( Object Sender, Toucheventargs E ){ Ellipse Ellipse = New  Ellipse (); Ellipse. width = 30; ellipse. Height = 30; ellipse. Stroke = Brushes . White; ellipse. Fill = New  Solidcolorbrush (Color . Fromrgb (( Byte ) RD. Next (0,255 ),( Byte ) RD. Next (0,255 ),( Byte ) RD. Next (0,255 ))); Touchpoint Touchpoint = E. gettouchpoint (touchpad ); Canvas . Settop (ellipse, touchpoint. bounds. Top ); Canvas . Setleft (ellipse, touchpoint. bounds. Left); movingellipses [E. touchdevice. ID] = ellipse; touchpad. Children. Add (ellipse );}

When the finger leaves the touch screen, the touchup event will be triggered. First, the touch device will be removed from the movingellipses collection, and the finger-related operations will not be tracked, and the colored circle will be removed from the <canvas>.

Private voidTouchpad_touchup (ObjectSender,ToucheventargsE) {movingellipses. Remove (E. touchdevice. ID );EllipseEllipse = movingellipses [E. touchdevice. ID]; touchpad. Children. Remove (ellipse );}
 

When the finger moves continuously on the touch screen, the touchmove event is triggered to track the finger movement track and re-adjust the position of the circle in <canvas>.

Private voidTouchpad_touchmove (ObjectSender,ToucheventargsE ){EllipseEllipse = movingellipses [E. touchdevice. ID];TouchpointTouchpoint = E. gettouchpoint (touchpad );Canvas. Settop (ellipse, touchpoint. bounds. Top );Canvas. Setleft (ellipse, touchpoint. bounds. Left );}
 

Program demonstration

So far, a simple touch application has compiled and run the program, touch the screen with your fingers and keep moving to see if the following video is displayed (if there are no multi-point touch screen devices, please refer to here for solutions ).

 

Source code download

Wpfrawtouch.zip