快速入門:觸控輸入

快速入門:觸控輸入 (XAML)

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App,請參閱 最新文件 ]

裝置通常都有配備多點觸控螢幕,可以讓使用者同時以多指來產生不同的輸入互動,例如點選、拖曳或捏合。Windows 執行階段有一些處理觸控輸入的不同機制,可以讓您建立讓使用者自信探索的沈浸式體驗。 這個快速入門涵蓋在使用 C++、C# 或 Visual Basic 的 Windows 執行階段應用程式中使用觸控輸入的基本概念。如需其他程式碼範例,請參閱輸入範例

如果您是使用 C++、C# 或 Visual Basic 開發 Windows 執行階段應用程式的新手:  請仔細閱讀這些主題以熟悉這裡討論的技術。

使用 C# 或 Visual Basic 建立您的第一個 Windows 市集應用程式

使用 C++ 建立您的第一個 Windows 市集應用程式

使用 C# 或 Visual Basic 建立 Windows 執行階段應用程式的藍圖

使用 C++ 建立 Windows 執行階段應用程式的藍圖

請參閱事件與路由事件概觀以了解事件

應用程式功能,從開始到完成:  應用程式功能,從開始到完成系列深入探索此功能。

使用者互動,從開始到完成 (XAML)

使用者互動自訂,從開始到完成 (XAML)

使用者經驗指導方針:  

平台控制項程式庫 (HTMLXAML) 提供完整的使用者互動體驗,包含標準互動、動畫物理效果及視覺化回饋。 如果您不需要自訂的互動支援,請使用這些內建控制項。

如果平台控制項不足,下列使用者互動指導方針能讓您在各種輸入模式下提供令人讚賞的沈浸式互動體驗。這些指導方針主要著重在觸控輸入,不過與觸控板、滑鼠、鍵盤和手寫筆輸入仍有相關。

範例:  Windows 市集應用程式範例中,查看此功能的執行方式。

輸入:XAML 使用者輸入事件範例

輸入:裝置功能範例

輸入:操作和手勢 (C++) 範例

輸入:觸控點擊測試範例

XAML 捲動、移動瀏覽和縮放範例

先決條件

假設您可以建立使用 C++、C# 或 Visual Basic 的基本 Windows 執行階段應用程式。

若要完成這個教學課程,您需要:

使用者經驗指導方針 (最佳做法)

平台控制項程式庫 (HTMLXAML) 提供完整的使用者互動體驗,包含標準互動、動畫物理效果及視覺化回饋。 如果您不需要自訂的互動支援,請使用這些內建控制項。

如果平台控制項不足,下列使用者互動指導方針能讓您在各種輸入模式下提供令人讚賞的沈浸式互動體驗。這些指導方針主要著重在觸控輸入,不過與觸控板、滑鼠、鍵盤和手寫筆輸入仍有相關。

觸控輸入簡介

許多裝置都使用觸控做為主要的使用者輸入方式。多點觸控螢幕可以讓使用者與裝置自然地進行互動。將觸控與互動支援加到應用程式,可以大幅增強使用者經驗。不過,您應該謹慎地設計觸控支援,以確保使用者可以自信地探索您的應用程式。此外,即使應用程式是針對觸控操作做優化,也必須考量到傳統的滑鼠和鍵盤輸入。

在使用 C++、C# 或 Visual Basic 的 Windows 執行階段應用程式中,有一些不同的方式可以處理觸控輸入。 內建的控制項程式庫使用標準互動、動畫物理行為效果及視覺化回饋,提供預設的觸控、滑鼠以及鍵盤支援。

如果不需要自訂的觸控支援,您可以使用架構所提供的功能,並遵循這個快速入門稍後描述的一些簡單觸控最佳化指導方針。

您可以實作自己的觸控和互動支援,但請牢記,使用者所期待的是與應用程式元素直接互動的直覺式體驗。 為了保持簡單性和可探索性,您應該根據內建支援來建立您的自訂觸控支援模型。此外,您應該為所有互動都提供立即的視覺化回饋,以避免讓使用者感覺不確定,並且也能鼓勵進行探索。

如果想提供自訂的觸控支援,您可以處理 UIElement 事件 (它們分成三個不同的抽象層級)。高階事件,例如 Tapped 可以讓您回應簡單的互動。指標事件提供較低階的細節,例如指標移動以及區分按下和放開手勢。操作事件提供較低階的細節,例如手勢速度以及慣性和多點觸控資料。這些事件會自動支援觸控和滑鼠輸入,不過也提供資訊,讓您在需要時,區分實際的輸入裝置。

手勢

手勢是一種將觸控輸入資料解譯成一組常見動作 (例如點選、滑動以及捏合) 的高階方法。Windows 8 中使用的一些常見手勢包括:

互動說明
點選一根手指觸碰螢幕後提起手指。
按住不放一根手指觸碰螢幕後停在原地。
滑動一或多根手指觸碰螢幕後,再往同一個方向移動。
撥動一或多根手指觸碰螢幕後,再往同一個方向短距離移動。
捏合二或多根手指觸碰螢幕後,再往靠攏的方向或分開的方向移動。
旋轉二或多根手指輕觸螢幕後,往順時鐘或逆時鐘方向弧形移動。
伸展 二或多根手指觸碰螢幕後,再朝分開的方向移動。

 

您可以處理高階事件,例如 TappedDoubleTappedRightTapped 以及 Holding,就可以回應簡單的觸控及滑鼠手勢。您也可以將 IsTapEnabledIsDoubleTapEnabledIsRightTapEnabled 以及 IsHoldingEnabled 設定成 false,停用特殊元素的這些手勢。

指標事件 (例如 PointerMoved) 可用來支援簡單、單指的互動 (例如滑動)。

對於多點觸控互動 (例如捏合) 以及使用慣性和速度資料的互動 (例如拖曳),請使用操作事件。操作事件所提供的資訊不是以已執行的互動形式,而是提供觸控資料,像是位置、平移量以及速度。您可以使用這個觸控資料來判斷已執行的互動類型。然而,將這個資訊轉換成對等的互動是您的責任。

使用指標事件

指標事件會自動支援觸控和滑鼠輸入,以及取代更多的傳統滑鼠事件。

觸控式指標事件僅限用於單指互動 (例如點選和滑動),而且不支援以速度為基礎的互動。螢幕上的單指觸碰會被轉換成同等的 Windows 執行階段指標事件,例如當您將手指放在螢幕上時會轉換成 PointerPressed,當您將手指提起時會轉換成 PointerReleased,以及當您將手指劃過螢幕時會轉換成 PointerMoved。其他由使用 C++、C# 或 Visual Basic 的 Windows 執行階段應用程式所使用的指標事件為 PointerExitedPointerEntered。指標事件的事件引數為 PointerRoutedEventArgs

下列範例示範如何使用 PointerPressedPointerReleased 以及 PointerExited 事件來處理 Rectangle 物件上的點選互動。

首先,在 XAML 中建立了一個名稱為 TestRectangleRectangle,並且為 PointerPressedPointerReleased 以及 PointerExited 事件新增事件處理常式。



<Rectangle Name="TestRectangle"
  Height="100" Width="200" Fill="Blue"
  PointerPressed="TestRectangle_PointerPressed"
  PointerReleased="TestRectangle_PointerReleased"
  PointerExited="TestRectangle_PointerExited" />

接著建立了指標事件的事件處理常式。PointerPressed 事件處理常式增加了 RectangleHeightWidthPointerReleased 事件處理常式將 HeightWidth 設回它們的開始值。最後,PointerExited 事件處理常式將 HeightWidth 也設回它們的開始值。



private void TestRectangle_PointerPressed(object sender, 
    PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Change the size of the Rectangle
    if (null != rect)
    {
        rect.Width = 250;
        rect.Height = 150;
    }
}

private void TestRectangle_PointerReleased(object sender, 
    PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Reset the dimensions on the Rectangle
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}

private void TestRectangle_PointerExited(object sender, 
    PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Finger moved out of Rectangle before the pointer exited event
    // Reset the dimensions on the Rectangle
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}

使用操作事件

如果您的應用程式中需要支援多指互動或是使用速度資料的互動,就需要使用操作事件。您可以使用操作事件來偵測互動 (例如拖曳、捏合以及按住不放)。以下是使用 C++、C# 或 Visual Basic 的 Windows 執行階段應用程式的操作事件和相關類型清單。

事件或類別說明
ManipulationStarting event 第一次建立操作處理器時發生。
ManipulationStarted event 當輸入裝置開始在 UIElement 進行操作時發生。
ManipulationDelta event 當輸入裝置在操作期間變更位置時發生。
ManipulationInertiaStarting event 在操作和慣性開始的時候,只要輸入裝置不與 UIElement 物件接觸便發生。
ManipulationCompleted event 當在 UIElement 進行的操作和慣性互動完成時發生。
ManipulationStartingRoutedEventArgs 提供 ManipulationStarting 事件的資料。
ManipulationStartedRoutedEventArgs 提供 ManipulationStarted 事件的資料。
ManipulationDeltaRoutedEventArgs 提供 ManipulationDelta 事件的資料。
ManipulationInertiaStartingRoutedEventArgs 提供 ManipulationInertiaStarting 事件的資料。
ManipulationVelocities 描述發生操作的速度。
ManipulationCompletedRoutedEventArgs 提供 ManipulationCompleted 事件的資料。

 

手勢是由一系列操作事件所組成。每個手勢都是以 ManipulationStarted 事件開始,例如當使用者觸碰螢幕。接著觸發一或多個 ManipulationDelta 事件。例如,當您觸碰螢幕,然後將手指劃過螢幕時,就會觸發一些 ManipulationDelta 事件。最後,當互動完成時,會引發 ManipulationCompleted 事件。

注意  如果您沒有觸控式螢幕監視器,可以在使用滑鼠和滑鼠滾輪介面的模擬器中測試您的操作事件程式碼。
 

下列範例示範如何使用 ManipulationDelta 事件來處理拖曳互動。這個範例會建立一個可在螢幕上拖曳的 Rectangle

首先,在 XAML 中建立了一個名稱為 TestRectangleHeightWidth 為 200 的 Rectangle



<Rectangle Name="TestRectangle"
  Width="200" Height="200" Fill="Blue" 
  ManipulationMode="All"/>

接著,建立了一個名稱為 dragTranslation 的全域 TranslateTransform 來轉譯 Rectangle。將事件處理常式加到了 Rectangle 來處理 ManipulationDelta 事件,並將 dragTranslation 加到了 RectangleRenderTransform。最後,在 ManipulationDelta 事件處理常式中,使用了 Delta 屬性上的 TranslateTransform 來更新 Rectangle 的位置。



// 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 += Drag_ManipulationDelta;
    dragTranslation = new TranslateTransform();
    TestRectangle.RenderTransform = this.dragTranslation;
}

void Drag_ManipulationDelta(object sender, 
    ManipulationDeltaRoutedEventArgs e)
{
    // Move the rectangle.
    dragTranslation.X += e.Delta.Translation.X;
    dragTranslation.Y += e.Delta.Translation.Y;
}

UI 設計和觸控輸入

如果您實作自己的互動支援,請牢記使用者所期待的是與應用程式 UI 元素直接互動的直覺式體驗。 建議您在平台控制項程式庫 (HTMLXAML) 模型化您的自訂互動,以保持一致和可探索的 UI 體驗。這些程式庫中的控制項提供完整的使用者互動體驗,包含標準互動、動畫物理效果、視覺化回饋及協助工具。只有在需求明確且定義清楚,而且沒有基本的互動可以支援您的情況時,才建立自訂互動。

使用者介面的設計方式會影響以觸控輸入使用應用程式的難易程度。為了確保您的應用程式可以發揮最出色的觸控功能,請遵循這些指導方針執行:

  • 務必考量到滑鼠指標和指尖大小的差異。觸控需要較大的 UI 元素,以確保精確度,同時避免手指擋住重要的資訊。
  • 觸控互動一定要提供立即且直接的視覺化回饋。例如,您可以使用醒目提示或工具提示指出目前的觸控目標,以及防止意外啟動其他目標。
  • 使用物理作用 (例如加速和慣性) 為互動操作 (例如移動瀏覽) 帶來自然的感覺。
  • 使用貼齊點以及其他限制條件,協助引導使用者進入最有用的狀態。

如需其他有關觸控的使用者經驗設計指導方針,請參閱使用者互動的指導方針

路由事件

本文中所述的所有指標事件、手勢事件和操控事件都會做為「路由事件」來實作。這表示事件除了可由最初引發事件的物件處理外,還能由其他物件來處理。即使原始元素未處理事件,物件樹狀目錄中的後續父項 (例如 UI 元素的父容器或根 Page) 也能選擇處理這些事件。相反地,任何實際處理事件的物件可以將事件標示為已處理,如此一來就不會到達任何父元素。如需路由事件概念以及這會如何影響您撰寫路由事件處理常式的詳細資訊,請參閱事件與路由事件概觀

相關主題

開發人員
回應使用者互動
開發 Windows 執行階段應用程式 (XAML)
快速入門:觸控輸入
設計人員
觸控互動設計

 

 

顯示:
© 2017 Microsoft