Windows 8.1 应用开发 – 触控操作

最新推荐文章于 2025-01-19 01:08:06 发布

转载最新推荐文章于 2025-01-19 01:08:06 发布 · 87 阅读

本文介绍在Windows 8.1应用中实现触控操作的方法，包括平移、缩放、旋转等常见手势，并通过示例展示了如何使用XAML和C#代码来响应这些触控事件。

与WPF相同Windows 8.1应用中也具有高级触控操作（Manipulation），其中包含了三种常见的触屏手势：平移、缩放、旋转，通过以下四种事件可为控件实现各种触控操作：ManipulationStarting、ManipulationStarted、ManipulationDelta、ManipulationInertiaStarting、ManipulationCompleted。

打开Visual Studio 2013 Preview，新建Windows Store应用。在XAML代码中添加Image控件，将ManipulationMode设置为ALL（也可按需要选择不同模式），并为其添加ManipulationStarting、ManipulationDelta、ManipulationCompleted事件，以便后续实现相关手势操作内容。RenderTransform中的CompositeTransform是一个控件变形组合，可容纳多种变形属性，如平移、旋转、缩放。

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">		
　　<Canvas>
　　　　<Image x:Name="imageElement" Source="images/cliff.jpg"
　　　　　　　　Height="460" Width="758" Canvas.Left="300" Canvas.Top="150" 　　　　　　　　ManipulationMode="All"
　　　　　　　　ManipulationStarting="image_ManipulationStarting"
　　　　　　　　ManipulationDelta="image_ManipulationDelta"
　　　　　　　　ManipulationCompleted="image_ManipulationCompleted">
　　　　　　<Image.RenderTransform>
　　　　　　　　<CompositeTransform x:Name="imageCT"/> 　　　　　　</Image.RenderTransform>
　　　　</Image>
　　</Canvas>
</Grid>

接下来，编写每个事件的具体内容，如下代码：

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;
}

这些代码很好理解，当ManipulationDelta触发后，首先将控件透明度设置为0.5，然后捕捉触控操作并对TranslateX、TranslateY（平移）；ScaleX、ScaleY（缩放）、Rotation（旋转）进行修改。最后ManipulationCompleted结束后将控件透明度恢复即可。按下F5键看看效果如何。