タッチ操作開発者向けガイド

2024-02-01

タッチがユーザーの主な入力方法になることを想定してアプリを設計しましょう。 UWP コントロールを使用する場合、タッチパッド、マウス、ペン/スタイラスのサポートに追加のプログラミングは不要です。UWP アプリでは、これらのサポートが無料で提供されます。

ただし、タッチに最適化された UI が必ずしも従来の UI より優れているわけではありません。どちらの UI にも、テクノロジやアプリケーションに固有の長所と短所があります。タッチ操作主体の UI に移行する際には、タッチ、タッチパッド、ペン/スタイラス、マウス、キーボードの各入力の主な違いを理解することが重要です。

重要な API: Windows.UI.Xaml.Input, Windows.UI.Core, Windows.Devices.Input

多くのデバイスは、1 本以上の指 (またはタッチ接触) を入力として使用できるマルチタッチスクリーンを搭載しています。タッチ接触とその動きは、タッチジェスチャや対話式操作として解釈され、さまざまなユーザー操作をサポートしています。

Windows アプリにはタッチ入力を処理するためのさまざまなメカニズムがあり、ユーザーが安心して操作できるイマーシブエクスペリエンスを実現できます。ここでは、Windows アプリでタッチ入力を使用する場合の基本事項について説明します。

タッチ操作には、次の 3 つのことが必要です。

タッチ対応のディスプレイ。
ディスプレイに対する 1 本以上の指の直接接触 (ディスプレイが近接センサーを搭載しており、ホバー検出をサポートしている場合は近接)。
タッチ接触の動き (または時間しきい値に基づくタッチ欠如)。

タッチセンサーによって提供される入力データは次のように扱われます。

1 つ以上の UI 要素を直接操作する物理的なジェスチャ (パン、回転、サイズ変更、移動など) として解釈されます (対照的に、プロパティウィンドウ、ダイアログボックスなどの UI アフォーダンスを介した要素の操作は間接的な操作と見なされます)。
マウスやペンなどの代替入力方法として認識されます。
ペンで描いたインクストロークをぼかすなど、他の入力方法の側面を補完または変更するために使用されます。

タッチ入力は通常、画面上の要素の直接操作を伴います。この要素は、ヒットテスト領域内のあらゆるタッチ接触に即座に反応し、削除を含むその後のタッチ接触の動きにも適切に反応します。

カスタムのタッチジェスチャと対話式操作は慎重に設計する必要があります。操作を直感的で、応答性が高く、見つけやすいものにして、ユーザーが快適にアプリを探索できるようにする必要があります。

アプリの機能はサポートされているすべての種類の入力デバイスで一貫して提供されるようにしてください。必要であれば、キーボード操作のテキスト入力や、マウスとペンの UI アフォーダンスなど、何らかの間接的な入力モードを使用しましょう。

従来の入力デバイス (マウスやキーボードなど) は多くのユーザーにとって馴染みがあり、魅力的です。タッチでは不可能な速度、正確さ、触覚フィードバックを実現できます。

すべての入力デバイスに独自の操作エクスペリエンスを実現することで、幅広い機能と好みをサポートし、可能な限り幅広いユーザーにアピールし、アプリにより多くの顧客を惹きつけることになります。

タッチ操作の要件を比較する

次の表に、タッチ操作に最適な Windows アプリの設計時に考慮する必要がある、入力デバイス間の違いをいくつか示します。

要素	タッチ操作	マウス、キーボード、ペン/スタイラスの操作	タッチパッド
精度	指先の接触面は、1 つの x-y 座標よりも大きいため、意図しないコマンドが起動する可能性が高くなります。	マウスとペン/スタイラスは正確な x-y 座標を提供します。	マウスと同じです。
	接触領域の形状は動きの中で変化します。	マウスの動きとペン/スタイラスのストロークは正確な x-y 座標を提供します。キーボードフォーカスは明示的です。	マウスと同じです。
	ターゲティングを補助するマウスカーソルはありません。	マウスカーソル、ペン/スタイラスカーソル、キーボードフォーカスはすべてターゲティングを補助します。	マウスと同じです。
人体解剖学	指先の動きは不正確で、1 本または複数の指で直線的な動きをするのは困難です。これは、手の関節の曲がり具合と動作に関わる関節の数によるものです。	マウスやペン/スタイラスで直線的な動きを行う方が簡単です。それらを操作する手の方が物理的な移動距離が短いため、直線的な動きを行いやすいためです。	マウスと同じです。
	ディスプレイデバイスのタッチ面には、指の姿勢やユーザーのデバイスの握り方によって届きにくい部分があります。	マウスとペン/スタイラスは画面のどの部分にも届きますが、どのコントロールもタブ順にキーボードから操作できる必要があります。	指の姿勢や握り方が問題になることがあります。
	オブジェクトは 1 つまたは複数の指先やユーザーの手によって隠されることがあります。これはオクルージョンと呼ばれます。	間接入力デバイスはオクルージョンを引き起こしません。	マウスと同じです。
オブジェクトの状態	タッチは 2 状態モデルを使用します。ディスプレイデバイスのタッチ面はタッチされている (オン) か、されていない (オフ) かのどちらかです。追加の視覚的フィードバックをトリガーできるホバー状態はありません。	マウス、ペン/スタイラス、キーボードはすべて、アップ (オフ)、ダウン (オン)、ホバー (フォーカス) の 3 状態モデルを持っています。ホバーでは、UI 要素に関連付けられたヒントが表示され、ユーザーはその要素について調べて理解を深めることができます。ホバーとフォーカスの効果は、どのオブジェクトがインタラクティブかを伝え、ターゲティングにも役立ちます。	マウスと同じです。
リッチな操作	マルチタッチのサポート: タッチ面上の複数の入力ポイント (指先) に対応しています。	単一の入力ポイントに対応しています。	タッチと同じです。
リッチな操作	タップ、ドラッグ、スライド、ピンチ、回転などのジェスチャによるオブジェクトの直接操作に対応しています。	マウス、ペン/スタイラス、キーボードは間接入力デバイスであり、直接操作には対応していません。	マウスと同じです。

注

間接入力は 25 年以上にわたって改良されてきました。ホバーによってトリガーされるヒントのような機能は、タッチパッド、マウス、ペン/スタイラス、キーボード入力に特化した UI 探索向けに設計されています。このような UI 機能は、タッチ入力によるリッチなエクスペリエンス向けに再設計されており、他のデバイスのユーザーエクスペリエンスを損なうことはありません。

タッチフィードバックを使用する

アプリとの対話式操作中に適切な視覚的フィードバックがあれば、ユーザーはアプリと Windows プラットフォームの両方で自分の操作がどのように解釈されるかを認識し、理解を深め、適応できます。視覚的フィードバックは、操作の成功を示し、システムのステータスを伝え、コントロールの感覚を向上させ、エラーを減らします。また、ユーザーがシステムや入力デバイスを理解しやすくして、対話式操作を進めやすくします。

視覚的フィードバックが重要になるには、ユーザーが位置に基づく正確さと精度が求められるアクティビティでタッチ入力に頼っている場合です。タッチ入力が検出されたときは、いつでもどこでもフィードバックを表示して、アプリとそのコントロールによって定義されたカスタムターゲティング規則をユーザーが理解できるようにしてください。

ターゲティング

ターゲティングは次の方法で最適化されます。

タッチターゲットのサイズ

明確なサイズガイドラインにより、アプリケーションでは確実に、オブジェクトとコントロールに簡単かつ安全にターゲティングできる快適な UI を提供できます。
接触形状

指の接触面全体のターゲットに最もなりやすいオブジェクトを決定します。
スクラブ

グループ内のアイテム (ラジオボタンなど) の間で指をドラッグすることで、簡単にそれらのアイテムを再ターゲティングできます。タッチを離すと、現在のアイテムがアクティブになります。
ロッキング

密集したアイテム (ハイパーリンクなど) は、指を押し下げ、スライドさせずにアイテム上で前後に動かすことで、簡単に再ターゲティングできます。オクルージョンのため、現在のアイテムはヒントまたはステータスバーで識別され、タッチを離すとアクティブになります。

正確さ

ずさんな操作に対応するための設計には次のものを使用します。

ユーザーがコンテンツを操作するときに、目的の位置で簡単に停止しやすくするスナップポイント。
手がわずかに弧を描いても、垂直方向や水平方向のパンを補助する方向「レール」。詳細については、「パンのガイドライン」を参照してください。

オクルージョン

指と手のオクルージョンは次の方法で避けてください。

UI のサイズと配置

UI 要素は、指先の接触面で完全に覆われないように十分な大きさにします。

可能な限り、メニューやポップアップを指先の接触面の上に配置します。
ヒント

ユーザーがオブジェクトに指を触れ続けたときにヒントを表示します。これはオブジェクトの機能を説明するのに便利です。ユーザーは指先をオブジェクトからドラッグして、ヒントが表示されないようにすることができます。

小さなオブジェクトの場合は、指先の接触エリアで覆われないように、ヒントをずらします。これによりターゲティングしやすくなります。
精密な操作のためのハンドル

正確さが求められる場合、たとえばテキストの選択では、選択精度が向上するように、選択境界からハンドルをずらして表示します。詳細については、「テキストと画像を選択するためのガイドライン (Windows ランタイムアプリ)」を参照してください。

タイミング

時限モードでの変更を避けて、直接操作を優先させます。直接操作は、オブジェクトの直接的でリアルタイムの物理的な操作をシミュレートします。オブジェクトは指の動きに合わせて反応します。

一方、時限操作はタッチ操作の後に実行されます。時限操作では通常、時間、距離、速度などの目に見えないしきい値に基づいて、実行するコマンドが決まります。時限操作では、システムがアクションを実行するまで視覚的フィードバックはありません。

直接操作には、時限操作に比べて多くの利点があります。

操作中に即座に視覚的フィードバックが得られることで、ユーザーはより操作に没頭し、自信を持って、操作をコントロールできていると感じます。
直接操作は可逆的であり、システムの探索がより安全になります。ユーザーが自分の操作を論理的かつ直感的な方法で簡単に取り消すことができるためです。
オブジェクトに直接影響を与え、実世界の操作を模倣する操作は、より直感的で見つけやすく、記憶に残ります。あいまいなで抽象的な操作には依存しません。
時限操作は、ユーザーが任意の見えないしきい値に到達する必要があるため、実行が難しい場合があります。

さらに、次のことを強くお勧めします。

操作は、使用する指の数によって区別されないようにします。
対話式操作は複合操作をサポートする必要があります。たとえば、指をドラッグしてパンしながらピンチしてズームする操作です。
操作は時間によって区別されないようにしてください。同じ操作は、実行にかかった時間に関係なく、同じ結果が得られるようにしてください。時間ベースの起動は、ユーザーに強制的な遅延をもたらし、直接操作の没入感とシステムの応答性の認識の両方が損なわれます。

注

特定の時間制限のある対話式操作を使用して学習や調査に役立てる場合は例外です (長押しなど)。
適切な説明と視覚的な合図は、高度な操作の使用に大きな影響を与えます。

アプリビュー

アプリビューのパン/スクロールとズームの設定を通して、ユーザーの操作エクスペリエンスを微調整します。アプリビューでは、ユーザーがアプリとそのコンテンツにどのようにアクセスし操作するかを決定します。ビューでは、慣性、コンテンツ領域の端での跳ね返り、スナップポイントなど、さまざまな動作を用意します。

ScrollViewer コントロールのパンとスクロールの設定では、ビューのコンテンツがビューポート内に収まらないときに、ユーザーが 1 つのビュー内でどのように移動するかを定義します。たとえば、1 つのビューは、雑誌や書籍のページ、コンピューターのフォルダー構造、ドキュメントのライブラリ、フォトアルバムになります。

ズーム設定は光学ズーム (ScrollViewer コントロールでサポート) とセマンティックズーム コントロールの両方に適用されます。セマンティックズームは、1 つのビュー内で関連する大量のデータやコンテンツを表示および操作するための、タッチに最適化された手法です。 2 つの異なる分類モード (ズームレベル) を使用して機能します。 1 つのビュー内でのパンとスクロールに似ています。パンとスクロールはセマンティックズームと組み合わせて使用できます。

アプリのビューとイベントを使用して、パン/スクロールとズームの動作を変更します。これにより、操作エクスペリエンスはポインターイベントやジェスチャイベントの処理でもたらすエクスペリエンスよりもスムーズになります。

アプリのビューの詳細については、「コントロール、レイアウト、テキスト」を参照してください。

カスタムタッチ操作

独自の対話式操作のサポートを実装する際は、ユーザーがアプリの UI 要素と直接対話する直感的なエクスペリエンスを期待していることを意識してください。カスタム操作をプラットフォームのコントロールライブラリに基づいてモデル化することで、一貫して動作し見つけやすくすることをお勧めします。これらのライブラリのコントロールは、標準の対話式操作、アニメーション化された物理的効果、視覚的フィードバック、アクセシビリティなど、ユーザー操作エクスペリエンスを網羅しています。カスタム操作を作成するのは、明確に定義された要件があり、目的のシナリオを基本的な操作ではサポートできない場合に限られます。

重要

Windows 11 以降

"既定では、3 本および 4 本の指によるタッチ操作は、Windows アプリでは動作しなくなります。"

既定では、3 本および 4 本の指によるタッチ操作は、ウィンドウの切り替えや最小化、仮想デスクトップの変更などの操作のためにシステムによって使用されるようになりました。これらの操作はシステムレベルで処理されるようになったため、この変更によってアプリの機能が影響を受ける可能性があります。

アプリケーション内で 3 本または 4 本の指による操作をサポートするために、システムでこれらの操作を処理するかどうかを指定する新しいユーザー設定が導入されました。

[Bluetooth とデバイス]>[タッチ]> [3 本と 4 本の指によるタッチジェスチャ]

"オン" (既定値) に設定すると、システムによって 3 本および 4 本の指によるすべての操作が処理されます (アプリではそれらをサポートできません)。

"オフ" に設定した場合、アプリで 3 本および 4 本の指による操作をサポートできます (システムによって処理されません)。

アプリケーションでこれらの操作をサポートする必要がある場合は、この設定についてユーザーに通知し、設定アプリを起動するためのリンクを関連ページに配置することをお勧めします (ms-settings:devices-touch)。詳細については、Windows 設定アプリの起動に関する記事を参照してください。

カスタマイズされたタッチサポートを提供するために、さまざまな UIElement イベントを処理できます。これらのイベントは 3 つの抽象レベルに分類されます。

静的ジェスチャイベントは、対話式操作の完了後にトリガーされます。ジェスチャイベントには、Tapped、DoubleTapped、RightTapped、Holding などがあります。

IsTapEnabled、IsDoubleTapEnabled、IsRightTapEnabled、IsHoldingEnabled を false に設定することで、特定の要素のジェスチャイベントを無効にすることができます。
PointerPressed や PointerMoved などのポインターイベントは、ポインターの動きなど各タッチ接触に関する低レベルの詳細や押す/離すイベントを区別する機能などを提供します。

ポインターは、統一されたイベントメカニズムを備えた汎用的な入力です。アクティブな入力ソース (タッチ、タッチパッド、マウス、ペンなど) に関する画面の位置などの基本情報を提供します。
ManipulationStarted などの操作ジェスチャイベントは進行中の操作を示します。ユーザーが要素に触れたときに発生し、ユーザーが指を離すか操作がキャンセルされるまで継続します。

操作イベントには、ズーム、パン、回転などのマルチタッチ操作や、慣性と速度データを使用するドラッグなどの操作が含まれます。操作イベントによって提供される情報は、実行された操作の形式を特定するものではなく、位置、移動量、速度などのデータを含みます。このタッチデータを使用して、実行する必要がある操作の種類を決定できます。

UWP でサポートされている一連の基本的なタッチジェスチャを次に示します。

名前	種類	説明
タップ	静的ジェスチャ	1 本の指を画面に触れ、持ち上げます。
長押し	静的ジェスチャ	1 本の指を画面に触れ、その場に留めます。
スライド	操作ジェスチャ	1 本以上の指を画面に触れ、同じ方向に動かします。
スワイプ	操作ジェスチャ	1 本または複数の指を画面に触れ、同じ方向に短い距離を動かします。
ターン	操作ジェスチャ	2 本以上の指を画面に触れ、時計回りまたは反時計回りの円弧を描きます。
ピンチ	操作ジェスチャ	2 本以上の指を画面に触れ、互いに近づけます。
伸ばす	操作ジェスチャ	2 本以上の指を画面に触れ、互いにさらに離します。

ジェスチャイベント

個々のコントロールの詳細については、「コントロールの一覧」を参照してください。

ポインターイベント

ポインターイベントは、タッチ、タッチパッド、ペン、マウスなど、さまざまなアクティブな入力ソースによって発生します (これらは従来のマウスイベントを置き換えます)。

ポインターイベントは単一の入力ポイント (指、ペン先、マウスカーソル) に基づいており、速度に基づく操作はサポートしていません。

ポインターイベントとそれに関連するイベント引数の一覧を次に示します。

イベントまたはクラス	説明
ポインタが押された	1 本の指が画面に触れると発生します。
ポインタが解放されました	同じタッチ接触が離されると発生します。
ポインタが移動しました	ポインターが画面上でドラッグされると発生します。
ポインタが入力されました	ポインターが要素のヒットテスト領域に入ると発生します。
ポインターが退出しました	ポインターが要素のヒットテスト領域から出ると発生します。
ポインターキャンセル	タッチ接触が異常に失われた場合に発生します。
ポインターキャプチャロスト	ポインターのキャプチャが別の要素によって取得されると発生します。
ポインタホイール変更	マウスホイールのデルタ値が変更されたときと、タッチパッドでピンチされたときに発生します。
の PointerRoutedEventArgs	すべてのポインターイベントのデータを提供します。

次の例は、PointerPressed、PointerReleased、および PointerExited イベントを使用して、Rectangle オブジェクト上のタップ操作を処理する方法を示しています。

まず、という名前のを Extensible Application Markup Language (XAML) で作成します。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Name="touchRectangle"
           Height="100" Width="200" Fill="Blue" />
</Grid>

次に、PointerPressed、PointerReleased、および PointerExited イベントのリスナーを指定します。

MainPage::MainPage()
{
    InitializeComponent();

    // Pointer event listeners.
    touchRectangle->PointerPressed += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerPressed);
    touchRectangle->PointerReleased += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerReleased);
    touchRectangle->PointerExited += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerExited);
}

public MainPage()
{
    this.InitializeComponent();

    // Pointer event listeners.
    touchRectangle.PointerPressed += touchRectangle_PointerPressed;
    touchRectangle.PointerReleased += touchRectangle_PointerReleased;
    touchRectangle.PointerExited += touchRectangle_PointerExited;
}

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Pointer event listeners.
    AddHandler touchRectangle.PointerPressed, AddressOf touchRectangle_PointerPressed
    AddHandler touchRectangle.PointerReleased, AddressOf Me.touchRectangle_PointerReleased
    AddHandler touchRectangle.PointerExited, AddressOf touchRectangle_PointerExited

End Sub

最後に、PointerPressed イベントハンドラーが Rectangle の Height と Width を増やし、PointerReleased イベントハンドラーと PointerExited イベントハンドラーが Height と Width を元の値に戻します。

// Handler for pointer exited event.
void MainPage::touchRectangle_PointerExited(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Pointer moved outside Rectangle hit test area.
    // Reset the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 200;
        rect->Height = 100;
    }
}

// Handler for pointer released event.
void MainPage::touchRectangle_PointerReleased(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Reset the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 200;
        rect->Height = 100;
    }
}

// Handler for pointer pressed event.
void MainPage::touchRectangle_PointerPressed(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Change the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 250;
        rect->Height = 150;
    }
}

// Handler for pointer exited event.
private void touchRectangle_PointerExited(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Pointer moved outside Rectangle hit test area.
    // Reset the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}
// Handler for pointer released event.
private void touchRectangle_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

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

// Handler for pointer pressed event.
private void touchRectangle_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

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

' Handler for pointer exited event.
Private Sub touchRectangle_PointerExited(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Pointer moved outside Rectangle hit test area.
    ' Reset the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 200
        rect.Height = 100
    End If
End Sub

' Handler for pointer released event.
Private Sub touchRectangle_PointerReleased(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Reset the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 200
        rect.Height = 100
    End If
End Sub

' Handler for pointer pressed event.
Private Sub touchRectangle_PointerPressed(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Change the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 250
        rect.Height = 150
    End If
End Sub

操作イベント

アプリで複数の指による操作や速度データを必要とする操作をサポートする場合は、操作イベントを使用します。

操作イベントを使用して、ドラッグ、ズーム、ホールドなどの操作を検出できます。

注

タッチパッドでは操作イベントは発生しません。代わりに、タッチパッド入力に対してポインターイベントが発生します。

操作イベントとそれに関連するイベント引数の一覧を次に示します。

イベントまたはクラス	説明
ManipulationStarting イベント	操作プロセッサが最初に作成されると発生します。
ManipulationStarted イベント	入力デバイスが UIElement の操作を開始すると発生します。
ManipulationDelta イベント	操作中に入力デバイスの位置が変わると発生します。
ManipulationInertiaStarting イベント	操作中に入力デバイスが UIElement オブジェクトとの接触を失い、慣性が開始されると発生します。
ManipulationCompleted イベント	UIElement の操作と慣性が完了すると発生します。
操作開始ルーティングイベント引数	ManipulationStarting イベントのデータを提供します。
ManipulationStartedRoutedEventArgs	ManipulationStarted イベントのデータを提供します。
ManipulationDeltaRoutedEventArgs	ManipulationDelta イベントのデータを提供します。
ManipulationInertiaStartingRoutedEventArgs	ManipulationInertiaStarting イベントのデータを提供します。
操作速度	操作が行われる速度を記述します。
操作完了ルーティングイベント引数	ManipulationCompleted イベントのデータを提供します。

ジェスチャは一連の操作イベントで構成されます。各ジェスチャは、ユーザーが画面に触れたときなど、ManipulationStarted イベントで開始されます。

次に、1 つ以上の ManipulationDelta イベントが発生します。たとえば、画面をタッチしてから画面上で指をドラッグした場合です。最後に、操作が終了すると ManipulationCompleted イベントが発生します。

注

タッチ画面モニターがない場合は、シミュレーターでマウスとマウスホイールインターフェイスを使用して操作イベントコードをテストできます。

次の例では、ManipulationDelta イベントを使用して、Rectangle のスライド操作を処理し、画面上で移動させる方法を示しています。

まず、Rectangle を touchRectangle という名前で、Height と Width を 200 として、XAML で作成します。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Name="touchRectangle"
               Width="200" Height="200" Fill="Blue" 
               ManipulationMode="All"/>
</Grid>

次に、グローバルな TranslateTransform を dragTranslation という名前で作成して、Rectangle の変換用に用意します。 ManipulationDelta イベントリスナーを Rectangle で指定し、dragTranslation を Rectangle の RenderTransform に追加します。

// Global translation transform used for changing the position of 
// the Rectangle based on input data from the touch contact.
Windows::UI::Xaml::Media::TranslateTransform^ dragTranslation;

// Global translation transform used for changing the position of 
// the Rectangle based on input data from the touch contact.
private TranslateTransform dragTranslation;

' Global translation transform used for changing the position of 
' the Rectangle based on input data from the touch contact.
Private dragTranslation As TranslateTransform

MainPage::MainPage()
{
    InitializeComponent();

    // Listener for the ManipulationDelta event.
    touchRectangle->ManipulationDelta += 
        ref new ManipulationDeltaEventHandler(
            this, 
            &MainPage::touchRectangle_ManipulationDelta);
    // New translation transform populated in 
    // the ManipulationDelta handler.
    dragTranslation = ref new TranslateTransform();
    // Apply the translation to the Rectangle.
    touchRectangle->RenderTransform = dragTranslation;
}

public MainPage()
{
    this.InitializeComponent();

    // Listener for the ManipulationDelta event.
    touchRectangle.ManipulationDelta += touchRectangle_ManipulationDelta;
    // New translation transform populated in 
    // the ManipulationDelta handler.
    dragTranslation = new TranslateTransform();
    // Apply the translation to the Rectangle.
    touchRectangle.RenderTransform = this.dragTranslation;
}

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Listener for the ManipulationDelta event.
    AddHandler touchRectangle.ManipulationDelta,
        AddressOf testRectangle_ManipulationDelta
    ' New translation transform populated in 
    ' the ManipulationDelta handler.
    dragTranslation = New TranslateTransform()
    ' Apply the translation to the Rectangle.
    touchRectangle.RenderTransform = dragTranslation

End Sub

最後に、ManipulationDelta イベントハンドラーで、Rectangle の位置を TranslateTransform の Delta プロパティで更新します。

// Handler for the ManipulationDelta event.
// ManipulationDelta data is loaded into the
// translation transform and applied to the Rectangle.
void MainPage::touchRectangle_ManipulationDelta(Object^ sender,
    ManipulationDeltaRoutedEventArgs^ e)
{
    // Move the rectangle.
    dragTranslation->X += e->Delta.Translation.X;
    dragTranslation->Y += e->Delta.Translation.Y;
    
}

// Handler for the ManipulationDelta event.
// ManipulationDelta data is loaded into the
// translation transform and applied to the Rectangle.
void touchRectangle_ManipulationDelta(object sender,
    ManipulationDeltaRoutedEventArgs e)
{
    // Move the rectangle.
    dragTranslation.X += e.Delta.Translation.X;
    dragTranslation.Y += e.Delta.Translation.Y;
}

' Handler for the ManipulationDelta event.
' ManipulationDelta data Is loaded into the
' translation transform And applied to the Rectangle.
Private Sub testRectangle_ManipulationDelta(
    sender As Object,
    e As ManipulationDeltaRoutedEventArgs)

    ' Move the rectangle.
    dragTranslation.X = (dragTranslation.X + e.Delta.Translation.X)
    dragTranslation.Y = (dragTranslation.Y + e.Delta.Translation.Y)

End Sub

ルーティングイベント

ここで説明したポインターイベント、ジェスチャイベント、操作イベントはすべて、ルーティングイベントとして実装されています。つまりイベントは、最初にそのイベントを発生させたオブジェクト以外のオブジェクトが処理できます。オブジェクトツリー内の連続する親要素、たとえば UIElement の親コンテナーやアプリのルート Page は、元の要素がイベントを処理しなくても、これらのイベントを処理できます。逆に、イベントを処理するオブジェクトは、そのイベントを処理済みであるとマークして、そのイベントが親要素に到達しないようにすることができます。ルーティングイベントの概念と、それがルーティングイベントのハンドラーの作成方法に与える影響の詳細については、「イベントとルーティングイベントの概要」を参照してください。

重要

スクロール可能なビュー (ScrollViewer や ListView など) で UIElement のポインターイベントを処理する必要がある場合は、UIElement.CancelDirectmanipulation() を呼び出すことにより、ビュー内のこの要素に対する操作イベントのサポートを明示的に無効にする必要があります。ビューで操作イベントを再び有効にするには、UIElement.TryStartDirectManipulation() を呼び出します。

すべきこととやってはいけないこと

タッチ操作を主な入力方法として想定して、アプリケーションを設計してください。
あらゆる種類の操作 (タッチ、ペン、スタイラス、マウスなど) に対して視覚的フィードバックを提供してください。
タッチターゲットのサイズ、接触形状、スクラブ、ロッキングを調整することで、ターゲティングを最適化してください。
スナップポイントや方向「レール」を使用して正確さを最適化してください。
密集した UI アイテムのタッチの正確さを向上させるためのヒントやハンドルを提供してください。
可能な限り、時限操作を使用しないでください (タッチアンドホールドなどを推奨)。
可能な限り、操作を区別するために指の本数を使用しないでください。

次の方法で共有

タッチ操作開発者向けガイド

タッチ操作の要件を比較する

タッチ フィードバックを使用する

ターゲティング

正確さ

オクルージョン

タイミング

アプリ ビュー

カスタム タッチ操作

ジェスチャ イベント

ポインター イベント

操作イベント

ルーティング イベント

すべきこととやってはいけないこと

関連記事

サンプル

サンプルのアーカイブ

フィードバック