チュートリアル: 初めてのタッチアプリケーションの作成

[アーティクル]
05/04/2023

WPF を使用すると、タッチに応答するアプリケーションを作成できます。たとえば、タッチスクリーンなどのタッチ対応デバイスで、1 本以上の指を使用してアプリケーションを操作できます。このチュートリアルでは、ユーザーがタッチを使用して 1 つのオブジェクトの移動、サイズ変更、または回転を行うことができるアプリケーションを作成します。

必須コンポーネント

このチュートリアルを実行するには、次のコンポーネントが必要です。

Visual Studio
Windows Touch をサポートするタッチ入力を受け付けるデバイス (タッチスクリーンなど)。

さらに、WPF でアプリケーションを作成する方法、特にイベントをサブスクライブして処理する方法について基本的な知識が必要です。詳細については、「チュートリアル:初めての WPF デスクトップアプリケーション」を参照してください。

アプリケーションの作成

アプリケーションを作成するには

Visual Basic または Visual C# で、BasicManipulation という名前の WPF アプリケーションプロジェクトを作成します。詳細については、「チュートリアル:初めての WPF デスクトップアプリケーション」を参照してください。

MainWindow.XAML の内容を次の XAML に置き換えます。

このマークアップを使用して、Canvas に赤い Rectangle を含む単純なアプリケーションを作成します。 Rectangle の IsManipulationEnabled プロパティは、操作イベントを受け取るために true に設定されています。アプリケーションから、ManipulationStarting、ManipulationDelta、および ManipulationInertiaStarting イベントをサブスクライブします。これらのイベントには、ユーザーの操作時に Rectangle を移動するロジックが含まれています。

<Window x:Class="BasicManipulation.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Move, Size, and Rotate the Square"
        WindowState="Maximized"
        ManipulationStarting="Window_ManipulationStarting"
        ManipulationDelta="Window_ManipulationDelta"
        ManipulationInertiaStarting="Window_InertiaStarting">
  <Window.Resources>

    <!--The movement, rotation, and size of the Rectangle is 
        specified by its RenderTransform.-->
    <MatrixTransform x:Key="InitialMatrixTransform">
      <MatrixTransform.Matrix>
        <Matrix OffsetX="200" OffsetY="200"/>
      </MatrixTransform.Matrix>
    </MatrixTransform>

  </Window.Resources>

  <Canvas>
    <Rectangle Fill="Red" Name="manRect"
                 Width="200" Height="200" 
                 RenderTransform="{StaticResource InitialMatrixTransform}"
                 IsManipulationEnabled="true" />
  </Canvas>
</Window>

Visual Basic を使用する場合は、MainWindow.xaml の最初の行の x:Class="BasicManipulation.MainWindow" を x:Class="MainWindow" に置き換えます。
次の ManipulationStarting イベントハンドラーを MainWindow クラスに追加します。

ManipulationStarting イベントは、タッチ入力によりオブジェクトの操作が始まったことが WPF で検出されたときに発生します。このコードの場合、ManipulationContainer プロパティを設定することで、操作の位置が Window に対して相対的であることを指定しています。
```
void Window_ManipulationStarting(object sender, ManipulationStartingEventArgs e)
{
    e.ManipulationContainer = this;
    e.Handled = true;
}
```
```
Private Sub Window_ManipulationStarting(ByVal sender As Object, ByVal e As ManipulationStartingEventArgs)
    e.ManipulationContainer = Me
    e.Handled = True
End Sub
```

次の ManipulationDelta イベントハンドラーを MainWindow クラスに追加します。

ManipulationDelta イベントは、タッチ入力の位置が変わると発生し、1 回の操作中に複数回発生する可能性があります。このイベントは、指を上げた後にも発生する可能性があります。たとえば、ユーザーが画面上で指をドラッグすると、ManipulationDelta イベントは指の移動時に複数回発生します。ユーザーが画面から指を上げると、慣性をシミュレートするために ManipulationDelta イベントは発生し続けます。

このコードでは、ユーザーがタッチ入力を動かすのに合わせて移動されるように DeltaManipulation が Rectangle の RenderTransform に適用されます。また、慣性の発生中にこのイベントが発生したときに、Rectangle が Window の境界外にあるかどうかも確認されます。その場合、アプリケーションから ManipulationDeltaEventArgs.Complete メソッドが呼び出され、操作が終了します。

void Window_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{

    // Get the Rectangle and its RenderTransform matrix.
    Rectangle rectToMove = e.OriginalSource as Rectangle;
    Matrix rectsMatrix = ((MatrixTransform)rectToMove.RenderTransform).Matrix;

    // Rotate the Rectangle.
    rectsMatrix.RotateAt(e.DeltaManipulation.Rotation,
                         e.ManipulationOrigin.X,
                         e.ManipulationOrigin.Y);

    // Resize the Rectangle.  Keep it square
    // so use only the X value of Scale.
    rectsMatrix.ScaleAt(e.DeltaManipulation.Scale.X,
                        e.DeltaManipulation.Scale.X,
                        e.ManipulationOrigin.X,
                        e.ManipulationOrigin.Y);

    // Move the Rectangle.
    rectsMatrix.Translate(e.DeltaManipulation.Translation.X,
                          e.DeltaManipulation.Translation.Y);

    // Apply the changes to the Rectangle.
    rectToMove.RenderTransform = new MatrixTransform(rectsMatrix);

    Rect containingRect =
        new Rect(((FrameworkElement)e.ManipulationContainer).RenderSize);

    Rect shapeBounds =
        rectToMove.RenderTransform.TransformBounds(
            new Rect(rectToMove.RenderSize));

    // Check if the rectangle is completely in the window.
    // If it is not and intertia is occuring, stop the manipulation.
    if (e.IsInertial && !containingRect.Contains(shapeBounds))
    {
        e.Complete();
    }

    e.Handled = true;
}

Private Sub Window_ManipulationDelta(ByVal sender As Object, ByVal e As ManipulationDeltaEventArgs)

    ' Get the Rectangle and its RenderTransform matrix.
    Dim rectToMove As Rectangle = e.OriginalSource
    Dim rectTransform As MatrixTransform = rectToMove.RenderTransform
    Dim rectsMatrix As Matrix = rectTransform.Matrix


    ' Rotate the shape
    rectsMatrix.RotateAt(e.DeltaManipulation.Rotation,
                         e.ManipulationOrigin.X,
                         e.ManipulationOrigin.Y)

    ' Resize the Rectangle. Keep it square 
    ' so use only the X value of Scale.
    rectsMatrix.ScaleAt(e.DeltaManipulation.Scale.X,
                        e.DeltaManipulation.Scale.X,
                        e.ManipulationOrigin.X,
                        e.ManipulationOrigin.Y)

    'move the center
    rectsMatrix.Translate(e.DeltaManipulation.Translation.X,
                          e.DeltaManipulation.Translation.Y)

    ' Apply the changes to the Rectangle.
    rectTransform = New MatrixTransform(rectsMatrix)
    rectToMove.RenderTransform = rectTransform

    Dim container As FrameworkElement = e.ManipulationContainer
    Dim containingRect As New Rect(container.RenderSize)

    Dim shapeBounds As Rect = rectTransform.TransformBounds(
                                New Rect(rectToMove.RenderSize))

    ' Check if the rectangle is completely in the window.
    ' If it is not and intertia is occuring, stop the manipulation.
    If e.IsInertial AndAlso Not containingRect.Contains(shapeBounds) Then
        e.Complete()
    End If

    e.Handled = True
End Sub

次の ManipulationInertiaStarting イベントハンドラーを MainWindow クラスに追加します。

ManipulationInertiaStarting イベントは、ユーザーが画面からすべての指を上げたときに発生します。このコードにより、四角形の移動、拡大、および回転の初期速度と減速を設定します。

void Window_InertiaStarting(object sender, ManipulationInertiaStartingEventArgs e)
{

    // Decrease the velocity of the Rectangle's movement by
    // 10 inches per second every second.
    // (10 inches * 96 pixels per inch / 1000ms^2)
    e.TranslationBehavior.DesiredDeceleration = 10.0 * 96.0 / (1000.0 * 1000.0);

    // Decrease the velocity of the Rectangle's resizing by
    // 0.1 inches per second every second.
    // (0.1 inches * 96 pixels per inch / (1000ms^2)
    e.ExpansionBehavior.DesiredDeceleration = 0.1 * 96 / (1000.0 * 1000.0);

    // Decrease the velocity of the Rectangle's rotation rate by
    // 2 rotations per second every second.
    // (2 * 360 degrees / (1000ms^2)
    e.RotationBehavior.DesiredDeceleration = 720 / (1000.0 * 1000.0);

    e.Handled = true;
}

Private Sub Window_InertiaStarting(ByVal sender As Object,
                                   ByVal e As ManipulationInertiaStartingEventArgs)

    ' Decrease the velocity of the Rectangle's movement by 
    ' 10 inches per second every second.
    ' (10 inches * 96 pixels per inch / 1000ms^2)
    e.TranslationBehavior.DesiredDeceleration = 10.0 * 96.0 / (1000.0 * 1000.0)

    ' Decrease the velocity of the Rectangle's resizing by 
    ' 0.1 inches per second every second.
    ' (0.1 inches * 96 pixels per inch / (1000ms^2)
    e.ExpansionBehavior.DesiredDeceleration = 0.1 * 96 / (1000.0 * 1000.0)

    ' Decrease the velocity of the Rectangle's rotation rate by 
    ' 2 rotations per second every second.
    ' (2 * 360 degrees / (1000ms^2)
    e.RotationBehavior.DesiredDeceleration = 720 / (1000.0 * 1000.0)

    e.Handled = True
End Sub

プロジェクトをビルドして実行します。

ウィンドウに赤い四角形が表示されます。

アプリケーションのテスト

アプリケーションをテストするために、次の操作を試します。次のうち、複数の操作を同時に実行できることに注意してください。

Rectangle を移動するには、Rectangle に指を置き、画面上で指を動かします。
Rectangle のサイズを変更するには、Rectangle に 2 本の指を置き、指を近づけたり離したりします。
Rectangle を回転させるには、Rectangle に 2 本の指を置き、一方の指を軸にしてもう一方の指を回転させます。

慣性を発生させるには、前の操作を実行するときに画面から指をすばやく上げます。 Rectangle の移動、サイズ変更、または回転が数秒間続いてから停止します。

チュートリアル: 初めてのタッチアプリケーションの作成

必須コンポーネント

アプリケーションの作成

アプリケーションを作成するには

アプリケーションのテスト

関連項目

フィードバック

その他のリソース

チュートリアル: 初めてのタッチ アプリケーションの作成

必須コンポーネント

アプリケーションの作成

アプリケーションを作成するには

アプリケーションのテスト

関連項目

フィードバック

その他のリソース

チュートリアル: 初めてのタッチアプリケーションの作成