WPF multi-touch development: Manipulation)

In the previous article, we had a preliminary understanding of basic touch operations. This article will continue to introduce manipulation, which includes some special touch screen gestures: translation, scaling, and rotation. Of course, you do not need to develop these gestures in WPF. You only need to activate the ismanipulationenabled attribute of the UI control and complete various touch screen gesture operations through the following four events: manipulationstarting, manipulationstarted, manipulationdelta, manipulationinertiastarting, and manipulationcompleted are the work sequence and relationship between events.

Create a project

Create a project in XAMLProgramWrite the followingCode, Set the manipulationstarting, manipulationdelta, and manipulationcompleted events for <canvas>, add three images to them, and set the ismanipulationenabled attribute of the image"True", All images are added with the <matrixtransform> object, used to combine translation, scaling, and rotation operations.

 <  Window  X  :  Class = "Wpfmanipulation. mainwindow"  Xmlns  = "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"  Xmlns  :  X  = "Http://schemas.microsoft.com/winfx/2006/xaml"  Title  = "Mainwindow"  Height  = "500"  Width  = "600"> <  Grid  > < Canvas  X  :  Name  = "Touchpad"  Background  = "Gray"  Manipulationstarting  = "Image_manipulationstarting"  Manipulationdelta  = "Image_manipulationdelta"  Manipulationcompleted  = "Image_manipulationcompleted"> <  Image  Canvas. Top = "52"  Canvas. Left  = "34"  Width  = "200"  Ismanipulationenabled  = "True"  Source  = "Images/p1.jpg"> <  Image. rendertransform  > <  Matrixtransform  > </  Matrixtransform  > </ Image. rendertransform  > </  Image  > <  Image  Canvas. Top  = "75"  Canvas. Left  = "339"  Width  = "200"  Ismanipulationenabled  = "True"  Source  = "Images/p2.jpg"> <  Image. rendertransform > <  Matrixtransform  > </  Matrixtransform  > </  Image. rendertransform  > </  Image  > <  Image  Canvas. Top  = "243"  Canvas. Left  = "168"  Width  = "200" Ismanipulationenabled  = "True"  Source  = "Images/p3.jpg"> <  Image. rendertransform  > <  Matrixtransform  > </  Matrixtransform  > </  Image. rendertransform  > </  Image  > </  Canvas > </  Grid  > </  Window  > 

When an image is touched, The image_manipulationstarting event is automatically triggered. You must first define manipulationcontainer (touchpad <canvas>). The container is mainly used to define reference coordinates, any operations on the image are subject to the reference coordinates. Manipulationmodes can be set to restrict which gesture operations are permitted by the program. If there are no special circumstances, you can set it"All".

 
Private voidImage_manipulationstarting (ObjectSender,ManipulationstartingeventargsE) {e. manipulationcontainer = touchpad; E. mode =Manipulationmodes. All ;}
 

The manipulationdelta event is triggered at the beginning of the gesture operation and must be continuously performed. You can use frameworkelement to obtain the operated image control, reduce the image transparency to 0.5, create a matrix to control the image matrixtransform, and use point to obtain the coordinate points in the image center, scale, rotate, and Pan operations are performed through scaleat, rotateat, and translate.

 Private void Image_manipulationdelta ( Object Sender, Manipulationdeltaeventargs E ){ Frameworkelement Element = ( Frameworkelement ) E. source; element. Opacity = 0.5; Matrix Matrix = (( Matrixtransform ) Element. rendertransform). matrix; VaR Deltamanipulation = E. deltamanipulation; Point Center = New  Point (Element. actualwidth/2, element. actualheight/2); Center = matrix. transform (center); matrix. scaleat (deltamanipulation. scale. x, deltamanipulation. scale. y, center. x, center. y); matrix. rotateat (E. deltamanipulation. rotation, center. x, center. y); matrix. translate (E. deltamanipulation. translation. x, E. deltamanipulation. translation. Y );(( Matrixtransform ) Element. rendertransform). Matrix = matrix ;}

Finally, when the finger leaves the touch screen, the operation ends. The image_manipulationcompleted event is triggered, and the image transparency is adjusted to 1.

Private voidImage_manipulationcompleted (ObjectSender,ManipulationcompletedeventargsE ){FrameworkelementElement = (Frameworkelement) E. source; element. Opacity = 1 ;}
 

Program demonstration

 

Related Article

1. WPF multi-touch development: Install multi-point touch screen simulator on Windows 7

2. WPF multi-touch development: Raw touch)

 

Source code download

Wpfmanipulation.zip