WPF multi-touch Development: Basic touchscreen operations (RAW Touch)

Multi-Touch (multi-touch) is the process by which people interact with applications through contact with touch-screen devices. For example, touch-screen phones, touchscreen notebooks, displays, and Microsoft's newest surface products, which are often used in life, are touch-screen operating devices. This article describes how to develop applications that support the Mt feature.

The multi-touch development technology already in place in WPF 4, when multiple fingers touch a touchscreen device, WPF considers each finger as a touch device and assigns it a unique identification ID to track the operation gestures of different fingers. The following examples demonstrate the low-level touch operations supported by WPF: Touch (Touchdown), Detach (TouchUp), Move (Touchmove), which are some of the most basic operating modes.

Create a project

The new project writes the following code in XAML,<grid> only the <Canvas> control is added, which contains the touchdown, TouchUp, Touchmove three underlying touch events. When the finger touches the program, it generates a colored circle in the canvas, the position of the circle is changed by the movement of the finger, and the circle disappears while the fingers leave the touch screen. The next step is to explain the tasks that each event completes.

<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 primarily the task of generating colored circles in the <Canvas> control when the touch is generated (C # code below). Use ellipse to create a randomly colored circle, get the touch point by Gettouchpoint method, and adjust the position of the circle in <Canvas>. To track the movement of your fingers, you need to store the touchscreen device ID and UI controls in the collection 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);
}