The touch operation of Windows 8.1 application development

It also has advanced touch operations (manipulation) in the same Windows 8.1 applications as WPF, which contains three common touch gestures: panning, zooming, rotating, and implementing various touch operations for the control through the following four events: Manipulationstarting, manipulationstarted, Manipulationdelta, manipulationinertiastarting, manipulationcompleted.

Open the Visual Studio 2013 Preview to create a new Windows Store application. Add the image control in XAML code, set Manipulationmode to all (or you can select different modes as needed), and add manipulationstarting, Manipulationdelta, Manipulationcompleted event for subsequent implementation of the relevant gesture action content. The Compositetransform in RenderTransform is a combination of control variants that can accommodate a variety of deformation properties, such as panning, rotation, and scaling.

<grid background= "{StaticResource Applicationpagebackgroundthemebrush}" >      
<Canvas>
<image x : Name= "imageelement" source= "images/cliff.jpg" height= "460" width= "758" "canvas.left=" canvas.top= "" "
  
    manipulationmode= "All"
manipulationstarting= "image_manipulationstarting"
Manipulationdelt A= "Image_manipulationdelta"
manipulationcompleted= "image_manipulationcompleted" >
<image.render　　　　transform>
<compositetransform x:name= "Imagect"/>
</Image.RenderTransform>
</Image>
</Canvas>
</Grid>
  

See more highlights of this column: http://www.bianceng.cnhttp://www.bianceng.cn/Programming/net/

Next, write the specific contents of each event, the following code:

private void Image_manipulationstarting (object sender, Manipulationstartingroutedeventargs e)
{
e.handled = true;
}
    
private void Image_manipulationdelta (object sender, Manipulationdeltaroutedeventargs e)
{
FrameworkElement　　element = E.originalsource as FrameworkElement;
Element.　　Opacity = 0.5;
Imagect.translatex + = e.delta.translation.x;
Imagect.translatey + = E.DELTA.TRANSLATION.Y;
Imagect.scalex *= E.delta.scale;
Imagect.scaley *= E.delta.scale;
Imagect.rotation + + e.delta.rotation;
}
    
private void Image_manipulationcompleted (object sender, Manipulationcompletedroutedeventargs e)
{
FrameworkElement element = E.originalsource as FrameworkElement;
Element. Opacity = 1;
}

This code is well understood, and when Manipulationdelta is triggered, the control's transparency is first set to 0.5, and then the touch operation is captured and the Translatex, Translatey (panning), ScaleX, ScaleY (scaling), Rotation (rotate) to modify. Finally, the control transparency can be restored when the manipulationcompleted is finished. Press the F5 key to see how it works.

Author: Li Jinghan (Gnie)

Source: {Gnietech} (http://www.cnblogs.com/gnielee/)