チュートリアル: 初めてのタッチ アプリケーションの作成Walkthrough: Creating Your First Touch Application

WPFWPF タッチに応答するアプリケーションを有効にします。 enables applications to respond to touch. たとえば、1 つを使用して、アプリケーションと対話できます。 または多くを指でタッチ スクリーンがこのチュートリアルにより、ユーザーに移動するアプリケーションを作成するなどのタッチ依存型デバイスのサイズ変更、またはタッチを使用して、1 つのオブジェクトを回転します。For example, you can interact with an application by using one or more fingers on a touch-sensitive device, such as a touchscreen This walkthrough creates an application that enables the user to move, resize, or rotate a single object by using touch.

必須コンポーネントPrerequisites

このチュートリアルを実行するには、次のコンポーネントが必要です。You need the following components to complete this walkthrough:

  • Microsoft Visual Studio 2010Microsoft Visual Studio 2010.

  • Windows 7。Windows 7.

  • Windows タッチをサポートするタッチ スクリーンなど、タッチ入力を受け付けるデバイス。A device that accepts touch input, such as a touchscreen, that supports Windows Touch.

さらでアプリケーションを作成する方法の基本的な知識を持つ必要がありますWPFWPFにサブスクライブし、イベントを処理する方法に特にです。Additionally, you should have a basic understanding of how to create an application in WPFWPF, especially how to subscribe to and handle an event. 詳細については、次を参照してください。チュートリアル: 最初の WPF デスクトップ アプリケーションです。For more information, see Walkthrough: My first WPF desktop application.

アプリケーションの作成Creating the Application

アプリケーションを作成するにはTo create the application

  1. Visual Basic または Visual c# のという名前の新しい WPF アプリケーション プロジェクトを作成するBasicManipulationです。Create a new WPF Application project in Visual Basic or Visual C# named BasicManipulation. 詳細については、次を参照してください。する方法: 新しい WPF アプリケーション プロジェクトを作成するです。For more information, see How to: Create a New WPF Application Project.

  2. MainWindow.xaml の内容を次の XAML に置き換えます。Replace the contents of MainWindow.xaml with the following XAML.

    このマークアップを含む赤い簡単なアプリケーションを作成するRectangle上、Canvasです。This markup creates a simple application that contains a red Rectangle on a Canvas. IsManipulationEnabledのプロパティ、Rectangle操作イベントを受信するために true に設定されています。The IsManipulationEnabled property of the Rectangle is set to true so that it will receive manipulation events. サブスクライブするアプリケーション、 ManipulationStartingManipulationDelta、およびManipulationInertiaStartingイベント。The application subscribes to the ManipulationStarting, ManipulationDelta, and ManipulationInertiaStarting events. これらのイベントに移動するためのロジックが含まれて、Rectangleユーザーからの操作をすることです。These events contain the logic to move the Rectangle when the user manipulates it.

    <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"です。If you are using Visual Basic, in the first line of MainWindow.xaml, replace x:Class="BasicManipulation.MainWindow" with x:Class="MainWindow".

  4. MainWindowクラス、次の追加ManipulationStartingイベント ハンドラー。In the MainWindow class, add the following ManipulationStarting event handler.

    ManipulationStartingイベントが発生したときにWPFWPFそのタッチを検出したオブジェクトを操作する入力を開始します。The ManipulationStarting event occurs when WPFWPF detects that touch input begins to manipulate an object. コードでは、操作の位置が基準にする必要がありますを指定します、Windowを設定して、ManipulationContainerプロパティです。The code specifies that the position of the manipulation should be relative to the Window by setting the ManipulationContainer property.

    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イベント ハンドラー。In the MainWindow class, add the following ManipulationDelta event handler.

    ManipulationDeltaイベント、タッチ入力の位置を変更および操作中に複数回発生する可能性がときに発生します。The ManipulationDelta event occurs when the touch input changes position and can occur multiple times during a manipulation. イベントは、指が発生した後にも発生することができます。The event can also occur after a finger is raised. たとえば、ユーザーが、画面上で指をドラッグする場合、ManipulationDeltaイベントは、複数回を指移動するときに発生します。For example, if the user drags a finger across a screen, the ManipulationDelta event occurs multiple times as the finger moves. ユーザーが画面で、指を発生させた、ManipulationDelta慣性をシミュレートするためにイベントが発生し続けます。When the user raises a finger from the screen, the ManipulationDelta event keeps occurring to simulate inertia.

    コードが適用されます、DeltaManipulationRenderTransformRectangleユーザーは、タッチを移動すると移動する入力します。The code applies the DeltaManipulation to the RenderTransform of the Rectangle to move it as the user moves the touch input. またを確認するかどうか、Rectangleの境界外または、Window慣性中に、イベントの発生します。It also checks whether the Rectangle is outside the bounds of the Window when the event occurs during inertia. そのため、アプリケーションを呼び出す場合、ManipulationDeltaEventArgs.Completeメソッドを操作を終了します。If so, the application calls the ManipulationDeltaEventArgs.Complete method to end the manipulation.

    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イベント ハンドラー。In the MainWindow class, add the following ManipulationInertiaStarting event handler.

    ManipulationInertiaStartingイベント、ユーザーが画面からのすべての指を発生させるときに発生します。The ManipulationInertiaStarting event occurs when the user raises all fingers from the screen. コードでは、初期速度と、移動、拡張、および四角形の回転の減速を設定します。The code sets the initial velocity and deceleration for the movement, expansion, and rotation of the rectangle.

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

    ウィンドウに表示される赤い四角形が表示されます。You should see a red square appear in the window.

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

アプリケーションをテストするには、次の操作を再試行してください。To test the application, try the following manipulations. 複数の次のいずれか、同時に実行できることに注意してください。Note that you can do more than one of the following at the same time.

  • 移動する、 Rectangle、に指を置き、Rectangleし、画面上で指を移動します。To move the Rectangle, put a finger on the Rectangle and move the finger across the screen.

  • サイズを変更する、 Rectangle、2 本の指の電源を入れます、Rectangleして近い一緒にまたは遠く互いとは別に、指を移動します。To resize the Rectangle, put two fingers on the Rectangle and move the fingers closer together or farther apart from each other.

  • 回転する、 Rectangle、2 本の指の電源を入れます、Rectangle指が互いの周りの回転とします。To rotate the Rectangle, put two fingers on the Rectangle and rotate the fingers around each other.

慣性の直前の操作を実行するとは、指を画面からすばやくを発生させます。To cause inertia, quickly raise your fingers from the screen as you perform the previous manipulations. Rectangle移動、サイズ変更、または停止する前に、数秒回転し続けます。The Rectangle will continue to move, resize, or rotate for a few seconds before it stops.

関連項目See Also

UIElement.ManipulationStarting
UIElement.ManipulationDelta
UIElement.ManipulationInertiaStarting