與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)
element.Opacity = 1;
這些代碼很好了解,當ManipulationDelta觸發後,首先将控件透明度設定為0.5,然後捕捉觸控操作并對TranslateX、TranslateY(平移);ScaleX、ScaleY(縮放)、Rotation(旋轉)進行修改。最後ManipulationCompleted結束後将控件透明度恢複即可。按下F5鍵看看效果如何。
本文轉自Gnie部落格園部落格,原文連結http://www.cnblogs.com/gnielee/p/windowsapp-manipulation.html,如需轉載請自行聯系原作者