Http://kb.cnblogs.com/page/71167/author: gnie Source: blog site Release Date: Reading: 802 Original article link full screen reading [favorites] Abstract: This article will continue to introduce manipulatioin, which includes some special touch screen gestures:
In the previous article, we had a preliminary understanding of basic touch operations. This article will continue to introduce manipulatioin, which includes some special touch screen gestures: 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 gestures using 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 the manipulationcontainer (that is, touchpad <canvas>). The container is mainly used for defining 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)
Download source code: wpfmanipulation.zip