Windows 8.1應用開發之觸控操作

與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>

查看本欄目更多精彩內容：http://www.bianceng.cnhttp://www.bianceng.cn/Programming/net/

接下來，編寫每個事件的具體內容，如下代碼：

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鍵看看效果如何。

作者：李敬然（Gnie）

出處：{GnieTech} （http://www.cnblogs.com/gnielee/）