次の方法で共有


チュートリアル: ファースト タッチ アプリケーションの作成

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

前提 条件

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

  • Visual Studio。

  • Windows Touch をサポートするタッチスクリーンなどのタッチ入力を受け入れるデバイス。

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

アプリケーションの作成

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

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

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

    このマークアップは、Canvasに赤い Rectangle を含む単純なアプリケーションを作成します。 操作イベントを受信できるように、RectangleIsManipulationEnabled プロパティが true に設定されています。 アプリケーションは、ManipulationStartingManipulationDelta、および 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>
    
    
  3. Visual Basic を使用している場合は、MainWindow.xaml の最初の行で、x:Class="BasicManipulation.MainWindow"x:Class="MainWindow"に置き換えます。

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

    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
    
  5. MainWindow クラスに、次の ManipulationDelta イベント ハンドラーを追加します。

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

    ユーザーがタッチ入力を移動すると、コードは RectangleRenderTransformDeltaManipulation を適用します。 また、慣性中にイベントが発生したときに、RectangleWindow の境界外にあるかどうかも確認します。 その場合、アプリケーションは 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
    
  6. MainWindow クラスに、次の ManipulationInertiaStarting イベント ハンドラーを追加します。

    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
    
  7. プロジェクトをビルドして実行します。

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

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

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

  • Rectangleを移動するには、Rectangle に指を置き、画面上で指を移動します。

  • Rectangleのサイズを変更するには、Rectangle に 2 本の指を置き、指を互いに近づけたり離したりします。

  • Rectangleを回転するには、Rectangle に 2 本の指を置き、指を互いに回転させます。

慣性を引き起こすには、前の操作を実行するときに、画面から指をすばやく上げます。 Rectangle は、停止するまで数秒間、移動、サイズ変更、または回転を続けます。

関連項目