原文位址：http://create.msdn.com/en-US/education/quickstarts/Touch_Input
【譯者注:這篇文章是翻譯自微軟官方的WP7 QuickStart的第九篇，講述WP下的觸控輸入。部分内容加入了自己的了解和表達習慣。而翻譯此系列的主要目的一是為了練習英語，二是讓自己作為一個 BI開發者對WP7的開發有一個了解。部分翻譯不當的地方望各位高人指出批評指正】
Windows Phone裝置的螢幕都是支援多點觸控的，允許使用者多指同時操作實作不同的手勢功能，比如單擊，滑動和放大縮小。Windows Phone下的Silverlight有很多種不同的處理觸控輸入的方法。此篇描述觸控輸入的基礎内容。
主要包含一下部分:
觸控輸入介紹
手勢功能
滑鼠事件
Manipulation（操縱）事件
Windows Phone的Silverlight工具包
UI設計與觸控輸入
留意：
此篇包含一些實時示範，是通過浏覽器中的Silverlight來模拟Windows Phone下Silverlight的效果。實際的操作可能會和模拟器中或者實際裝置中的效果略有不同。
觸控輸入介紹
Windows Phone使用觸控的方式完成大多數的輸入操作，它支援多點觸控讓使用者以手勢操作的方式跟裝置互動。填加觸控和手勢功能将會使程式的使用者體驗大大提高。在Windows Phone下的Silverlight 可以以很多種方式來處理觸控操作。
Silverlight下的滑鼠事件可以用來檢測一些簡單的，單指點選或者輕按兩下。滑鼠事件在代碼中使用很友善和快捷，也是一種實作基本觸控功能比較簡單的方法。
Manipulation事件，比如ManipulationStarted和ManipulationDelta，用來處理更加複雜的手勢功能，比如多點觸控時的手勢功能和用到慣性和速度的手勢功能。
TouchPoint類是另外一種處理觸控輸入的方法。TouchPoint是一個低級别觸控系統，此篇暫不對其進行描述。
第四種方法就是使用Windows Phone下的Silverlight工具包的GestureService和GestureListner類。這個工具包是開源項目，不輸入Windows Phone下Silverlight核心的一部分，但是有一些早期版本的控件已經加入到了後續版本的Silverlight中。
手勢功能
手勢功能是一種進階别的方式來把觸控資料解釋成一些基本的動作，比如點選，滑動和放大縮小。在Windows Phone通用的手勢如下：
Tab
手指按下螢幕并擡起
Double Tab
手指敲擊螢幕兩次
Hold
手指在一個地方短時間的持續點選
Drag
手指按住螢幕并且向一個方向移動
Flick
手指的滑動操作
Pinch
兩指在螢幕上的移動
Windows Phone下的Silverlight滑鼠事件，比如MouseLeftButtonUp和MouseMove可以用來支援一些最基本的單指操作，比如單擊。
對于一些多點觸控的手勢操作比如放大縮小，還有用到慣性和速度資料的手勢比如滑動，就需要用到Manipulation事件，這個事件裡提供的資訊不是手勢的相關資訊，而是一些觸控的資料，比如位置，和translation delta【譯者注：位移增量？】以及速度。這些觸控資料可以用來判定手勢動作的種類。而開發人員需要做的就是将這些資訊轉換成等價手勢功能。另外，Windows Phone的Silverlight工具包也通過GestureService和GestureListner兩個類提供了對手勢功能的支援。
滑鼠事件
使用滑鼠事件是實作Windows Phone下Silverlight觸控功能最簡單的一種方法。滑鼠事件僅限于實作單指的手勢操作比如單擊和輕按兩下，但是不支援基于速度的手勢功能。單指接觸螢幕的時候被轉換成了Silverlight的滑鼠事件，比如當觸控螢幕的時候是MouseLeftButtonDown，手指擡起的時候是MouseLeftButtonUp，手指在螢幕上移動是MouseMove。此外還有MouseLeave和MouseEnter。這些事件的參數是MouseButtonEventArgs。
下面的示例示範如何使用MouseLeftButtonDown，MouseLeftButtonUp和MouseLeave事件處理矩形對象的單擊操作。
首先，在XAML中定義一個名稱為TestRectangle的Rectangle矩形，以及MouseLeftButtonDown,MouseLeftButtonUp和MouseLeave的事件處理。
XAML
<Rectangle Name="TestRectangle"
Height="100"
Width="200"
Fill="Blue"
MouseLeftButtonDown="Tap_LeftButtonDown"
MouseLeftButtonUp="Tap_LeftButtonUp"
MouseLeave="Tap_MouseLeave" />
下一步，事件處理代碼被生成了。MouseLeftButtonDown裡增加Rectangle的高度和寬度，MouseLeftButtonUp裡恢複其高度和寬度到原先的值。最後，MouseLeave裡也設定成對這兩個屬性值的恢複。
C#
private void Tap_LeftButtonDown(object sender, MouseButtonEventArgs e)
{
Rectangle rect = sender as Rectangle;
// Change the size of the Rectangle.
if (null != rect)
{
rect.Width = 250;
rect.Height = 150;
}
}
private void Tap_LeftButtonUp(object sender, MouseButtonEventArgs e)
{
Rectangle rect = sender as Rectangle;
// Reset the dimensions on the Rectangle.
if (null != rect)
{
rect.Width = 200;
rect.Height = 100;
}
}
private void Tap_MouseLeave(object sender, MouseEventArgs e)
{
Rectangle rect = sender as Rectangle;
// Finger moved out of Rectangle before the mouse up event.
// Reset the dimensions on the Rectangle.
if (null != rect)
{
rect.Width = 200;
rect.Height = 100;
}
}
下面是執行個體效果。點選矩形區域看看運作的效果。
下面的示例示範如何用按鈕的Click事件處理點選操作。
首先，在XAML中建立一個按鈕，以及其Click單擊事件的處理方法。
XAML
<Button Name="TestButton"
Content="Tap"
Height="100" Width="200"
Click="TestButton_Click" />
在Click事件處理代碼中，内容在“Tap”和“Tap Again!”之間來回切換。文本在每次點選的時候都會變化。
C#
private void TestButton_Click(object sender, RoutedEventArgs e)
{
Button button = sender as Button;
if (null != button)
{
// Toggle Button.Conten between "Tap" and "Tap Again!"
if (button.Content as string == "Tap")
{
button.Content = "Tap Again!";
}
else
{
button.Content = "Tap";
}
}
}
下面是執行個體效果。點選矩形區域看看運作的效果。
Manipulation事件
如果需要在程式中支援多指手勢，或者包含速度資料的手勢操作，那麼就需要用到Manipulation事件。可以用Manipulation事件來捕獲像滑動，拖拽，放大縮小以及按住螢幕的操作。下表列出了Manipulation事件類。
ManipulationStarted Event
在UIElement的操作開始的時候發生
ManipulationDelta Event
在操作的過程中位置發生變化的時候發生
ManipulationCompleted Event
當操作和加速度完成的時候發生
ManipulationStartedEventArgs
為ManipulationStarted事件提供資料
ManipulationDeltaEventArgs
為ManipulationDelta事件提供資料
ManipulationVelocities
在操作發生的時候描述速度資料
ManipulationCompleteEventArgs
為ManipulationCompleted事件提供資料
在Windows Phone的Silverlight下手勢事件是由一系列的Manipulation事件組成。每個手勢均由ManipulationStarted事件開始，包括使用者開始觸摸螢幕，然後，一個或更多的ManipulationDelta事件被觸發。比如，當你觸摸螢幕并且在螢幕上來回移動的時候，若幹ManipulationDelta事件就被觸發了。最終，手勢操作以ManipulationCompleted事件的觸發結束。
如果你使用Windows Phone模拟器來測試Manipulation事件代碼并且沒有觸摸屏的話，測試将要受到限制。模拟器是不支援滑鼠的多點觸控的。不過可以對偏移進行測試，下面是該執行個體的示範。
首先，在XAML中建立一個高度和寬度全部為200，名稱為TestRectangle的Rectangle。
XAML
<Rectangle Name="TestRectangle"
Width="200"
Height="200"
Fill="Blue" />
然後，為Rectangle建立一個全局的TranslateTransform，名稱為dragTranslation，并且為其填加ManipulationDelta事件的處理代碼。dragTranslation被填加到了Rectangle的RenderTransform的部分。最後，在ManipulationDelta的事件處理代碼中，Rectangle的位置是通過DeltaManipulation屬性的TranslateTransform實時更新的。
C#
// Global Transform used to change the position of the Rectangle.
private TranslateTransform dragTranslation;
// Constructor
public MainPage()
{
InitializeComponent();
// Add handler for the ManipulationDelta event
TestRectangle.ManipulationDelta +=
new EventHandler<ManipulationDeltaEventArgs>(Drag_ManipulationDelta);
dragTranslation = new TranslateTransform();
TestRectangle.RenderTransform = this.dragTranslation;
}
void Drag_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
// Move the rectangle.
dragTranslation.X += e.DeltaManipulation.Translation.X;
dragTranslation.Y += e.DeltaManipulation.Translation.Y;
}
下圖是運作效果，注，不是線上示例。
Windows Phone下的Silverlight工具包
Windows Phone下的Silverlight工具包是一個開源的項目，微軟的Silverlight團隊分享了新的元件和方法在裡面。這個工具包裡包含了大量的手勢功能架構，他們主要是通過GestureService和GestureListener兩個類來捕捉特定的手勢。這些類可以大大的簡化Silverlight程式中手勢的使用。
要用到這些接口，需要在這裡下載下傳并安裝。其中這個頁面裡有對目前釋出版本的描述。
UI設計和觸控輸入
如何設計使用者界面可以影響到在程式中使用觸控功能的容易程度。這裡有一些在程式中使用觸控輸入的最佳實踐，非常值得閱讀，不過這裡也要強調一些觸控和UI設計：
1. 所有的簡單指令都應該用單指去完成。
2. 觸控控件應該馬上回應。即使在使用者觸摸螢幕到控件給出響應有輕微的延遲。
3. 提供直接的視覺元素或者聲音回報。
4. 如果操作需要很長時間，應考慮提供更多的回報資訊。
5. 觸控目标不應該小于9毫米或者34像素。
6. 在可觸控的控件之間應該保留2毫米或者8像素的間距。
7. 在極少數需要控件很小的情況下，也不要建立小玉7毫米或者26像素的控件。
8. 經常需要被用到的控件，需要考慮将其設計成大于9毫米。
9. 觸控的目标區域應該比控件本身大，不應該比其更小。
10. 控件不應該小于其觸控區域的60%。
11. 縱向排列的矩形或者原型元素更容易被點選到。