windows phone 8.1開發：觸控和指標事件1

標籤：des   style   blog   http   color   os   io   ar   for   

原文出自:http://www.bcmeng.com/windows-phone-touch/

UIElement類的觸控事件：

ManipulationStarting：當使用者將手指放在 IsManipulationEnabled 屬性設定為true的元素上時，將在該元素上發生 ManipulationStarting 事件。即在觸控操作開始之前引發。

ManipulationStarted：在觸控操作開始之後引發。

ManipulationInertiaStarting：當觸控操作終止並開始慣性運動時引發該事件。

ManipulationDelta：當使用者在操作過程中將手指拖過螢幕並且在慣性發生時又重複操作時，該事件會多次發生。只要觸控操作中任何參數的變化都會引發該事件，比如位置，角度等。

（注意ManipulationDelta裡面有倆個十分重要的屬性：Delta和Cumulative。Delta屬性是指當前發生ManipulationDelta事件時的所有資料，Cumulative是指從觸控操作開始一來發生的所有資料的更改。ManipulationDelta事件的Complete()方法可以終止慣性運動）

ManipulationCompleted：觸控操作完成時引發該事件

（註：e.OriginalSource可以擷取引發觸控的對象，e.Handled可以終止路由事件繼續向上傳遞，  e.Position可以擷取當前位置座標）

關於觸控事件引發的順序：(註：ManipulationDelta 事件會被引發多次)

• ManipulationStarting
• ManipulationStarted
• ManipulationDelta
• ManipulationInertiaStarting
• ManipulationDelta
• ManipulationCompleted

我們可以通過一個Rectangle做一個測試來驗證觸控事件的引發順序：(註：必須要設定ManipulationMode屬性，否則不會引發觸控事件)

<Rectangle Name=”rect” Width=”200″Height=”300″ Fill=”Yellow”ManipulationMode=”All”ManipulationCompleted=”rect_ManipulationCompleted”ManipulationDelta=”rect_ManipulationDelta”ManipulationInertiaStarting=”rect_ManipulationInertiaStarting”ManipulationStarted=”rect_ManipulationStarted”ManipulationStarting=”rect_ManipulationStarting”PointerCanceled=”rect_PointerCanceled”PointerEntered=”rect_PointerEntered”PointerExited=”rect_PointerExited”PointerMoved=”rect_PointerMoved”PointerPressed=”rect_PointerPressed”PointerReleased=”rect_PointerReleased”RightTapped=”rect_RightTapped”Tapped=”rect_Tapped”></Rectangle>

 

後台代碼：

private void rect_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e){Debug.WriteLine(“{0}-ManipulationCompleted事件發生”, DateTime.Now.ToString(“H:m:s”));}private void rect_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e){Debug.WriteLine(“{0}-ManipulationDelta事件發生”, DateTime.Now.ToString(“H:m:s”));}private void rect_ManipulationInertiaStarting(object sender, ManipulationInertiaStartingRoutedEventArgs e){Debug.WriteLine(“{0}-ManipulationInertiaStarting事件發生”, DateTime.Now.ToString(“H:m:s”));}private void rect_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e){Debug.WriteLine(“{0}-ManipulationStarted事件發生”, DateTime.Now.ToString(“H:m:s”));}private void rect_ManipulationStarting(object sender, ManipulationStartingRoutedEventArgs e){Debug.WriteLine(“{0}-ManipulationStarting事件發生”, DateTime.Now.ToString(“H:m:s”));}private void rect_PointerCanceled(object sender, PointerRoutedEventArgs e){Debug.WriteLine(“{0}-PointerCanceled事件發生”, DateTime.Now.ToString(“H:m:s”));}private void rect_PointerEntered(object sender, PointerRoutedEventArgs e){Debug.WriteLine(“{0}-PointerEntered事件發生”, DateTime.Now.ToString(“H:m:s”));}private void rect_PointerExited(object sender, PointerRoutedEventArgs e){Debug.WriteLine(“{0}-PointerExited事件發生”, DateTime.Now.ToString(“H:m:s”));}private void rect_PointerMoved(object sender, PointerRoutedEventArgs e){Debug.WriteLine(“{0}-PointerMoved事件發生”, DateTime.Now.ToString(“H:m:s”));}private void rect_PointerPressed(object sender, PointerRoutedEventArgs e){Debug.WriteLine(“{0}-PointerPressed事件發生”, DateTime.Now.ToString(“H:m:s”));}private void rect_PointerReleased(object sender, PointerRoutedEventArgs e){Debug.WriteLine(“{0}-PointerReleased事件發生”, DateTime.Now.ToString(“H:m:s”));}private void rect_RightTapped(object sender, RightTappedRoutedEventArgs e){Debug.WriteLine(“{0}-RightTapped事件發生”, DateTime.Now.ToString(“H:m:s”));//rect.Fill = new SolidColorBrush(Colors.Blue);}private void rect_Tapped(object sender, TappedRoutedEventArgs e){Debug.WriteLine(“{0}-Tapped事件發生”, DateTime.Now.ToString(“H:m:s”));//rect.Fill = new SolidColorBrush(Colors.Red);}

當我們滑動矩形時，會發現輸出如下:

12:19:13-PointerEntered事件發生12:19:13-PointerPressed事件發生12:19:13-ManipulationStarting事件發生12:19:13-PointerExited事件發生12:19:13-ManipulationStarted事件發生12:19:13-ManipulationDelta事件發生12:19:13-ManipulationDelta事件發生12:19:13-ManipulationDelta事件發生12:19:13-ManipulationCompleted事件發生12:19:13-PointerReleased事件發生

下面我們繼續通過這個矩形來示範一個執行個體，通過觸控拖動和旋轉矩形：

首先設定一個複合變換 CompositeTransform：

CompositeTransform cpTransform = null;

再在mainpage的初始化方法中設定矩形的ManipulationMode 屬性。

rect.ManipulationMode = ManipulationModes.TranslateX | ManipulationModes.TranslateY | ManipulationModes.Rotate;

然後對矩形應用變換：

cpTransform = new CompositeTransform();
cpTransform.TranslateX = cpTransform.TranslateY = 0;
cpTransform.Rotation = 0;
//cpTransform.ScaleX = cpTransform.ScaleY = 1;
cpTransform.CenterX = rect.Width / 2;
cpTransform.CenterY = rect.Height / 2;
rect.RenderTransform = cpTransform;

最後在ManipulationDelta事件中處理觸控事件:

cpTransform.TranslateX += e.Delta.Translation.X;
cpTransform.TranslateY += e.Delta.Translation.Y;
cpTransform.Rotation += e.Delta.Rotation;

運行效果如下：

下面我們再來示範一個利用觸控縮放照片的執行個體：

<Image Width=”200″ Height=”200″ Name=”image”Source=”1.jpg” Stretch=”Fill”ManipulationDelta=”image_ManipulationDelta”ManipulationMode=”Scale”/>

後台代碼：

ScaleTransform scaleTransform;public Image(){this.InitializeComponent();scaleTransform = new ScaleTransform();scaleTransform.CenterX = image.Width / 2;scaleTransform.CenterY = image.Height / 2;scaleTransform.ScaleX = scaleTransform.ScaleY = 1;image.RenderTransform = scaleTransform;}private void image_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e){scaleTransform.ScaleX*= e.Delta.Scale;scaleTransform.ScaleY*= e.Delta.Scale;}

運行效果如下：

指標事件我們放到下一篇吧。

windows phone 8.1開發：觸控和指標事件1