Freigeben über

Exemplarische Vorgehensweise: Erstellen Ihrer ersten Touchanwendung

WPF ermöglicht Anwendungen, auf Toucheingaben zu reagieren. Sie können beispielsweise mit einer Anwendung interagieren, indem Sie einen oder mehrere Finger auf einem gerät mit Toucheingabe verwenden, z. B. einen Touchscreen. In dieser exemplarischen Vorgehensweise wird eine Anwendung erstellt, die es dem Benutzer ermöglicht, ein einzelnes Objekt mithilfe der Toucheingabe zu verschieben, zu ändern oder zu drehen.

Voraussetzungen

Sie benötigen die folgenden Komponenten, um diese Schritt-für-Schritt-Anleitung abzuschließen.

  • Visual Studio.

  • Ein Gerät, das Toucheingaben akzeptiert, z. B. einen Touchscreen, der Windows Touch unterstützt.

Darüber hinaus sollten Sie grundlegende Kenntnisse darüber haben, wie Sie eine Anwendung in WPF erstellen, insbesondere darüber, wie Sie ein Ereignis abonnieren und behandeln. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Meine erste WPF-Desktopanwendung.

Erstellen der Anwendung

So erstellen Sie die Anwendung

  1. Erstellen Sie ein neues WPF-Anwendungsprojekt in Visual Basic oder Visual C# mit dem Namen BasicManipulation. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Meine erste WPF-Desktopanwendung.

  2. Ersetzen Sie den Inhalt von "MainWindow.xaml" durch den folgenden XAML-Code.

    Mit diesem Markup wird eine einfache Anwendung erstellt, die ein rotes Rectangle auf einem Canvas enthält. Die IsManipulationEnabled Eigenschaft des Rectangle ist auf "true" festgelegt, sodass sie Manipulationsereignisse empfängt. Die Anwendung abonniert die ManipulationStarting-, ManipulationDelta- und ManipulationInertiaStarting-Ereignisse. Diese Ereignisse enthalten die Logik, um das Rectangle zu bewegen, wenn der Benutzer es manipuliert.

    <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. Wenn Sie Visual Basic verwenden, ersetzen Sie in der ersten Zeile von "MainWindow.xaml" x:Class="BasicManipulation.MainWindow" durch x:Class="MainWindow".

  4. Fügen Sie in der MainWindow Klasse den folgenden ManipulationStarting Ereignishandler hinzu.

    Das ManipulationStarting Ereignis tritt auf, wenn WPF erkennt, dass die Toucheingabe mit der Bearbeitung eines Objekts beginnt. Der Code gibt an, dass die Position der Manipulation relativ zu Window festgelegt werden soll, indem die ManipulationContainer-Eigenschaft gesetzt wird.

    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. Fügen Sie in der MainWindow Klasse den folgenden ManipulationDelta Ereignishandler hinzu.

    Das ManipulationDelta Ereignis tritt auf, wenn die Toucheingabe die Position ändert und während einer Manipulation mehrmals auftreten kann. Das Ereignis kann auch auftreten, nachdem ein Finger gehoben wird. Wenn der Benutzer beispielsweise einen Finger über einen Bildschirm zieht, tritt das ManipulationDelta Ereignis mehrmals auf, während der Finger bewegt wird. Wenn der Benutzer einen Finger vom Bildschirm nimmt, tritt das ManipulationDelta Ereignis weiterhin auf, um Trägheit zu simulieren.

    Der Code wendet den DeltaManipulation auf den RenderTransform des Rectangle an, um ihn zu verschieben, während der Benutzer die Toucheingabe bewegt. Außerdem wird überprüft, ob sich der Rectangle außerhalb der Grenzen des Window befindet, wenn das Ereignis während der Trägheit auftritt. Wenn ja, ruft die Anwendung die ManipulationDeltaEventArgs.Complete Methode auf, um die Manipulation zu beenden.

    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. Fügen Sie in der MainWindow Klasse den folgenden ManipulationInertiaStarting Ereignishandler hinzu.

    Das ManipulationInertiaStarting Ereignis tritt auf, wenn der Benutzer alle Finger vom Bildschirm nimmt. Der Code legt die anfängliche Geschwindigkeit und Verzögerung für die Bewegung, Erweiterung und Drehung des Rechtecks fest.

    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. Erstellen Sie das Projekt, und führen Sie es aus.

    Sie sollten ein rotes Quadrat im Fenster sehen.

Testen der Anwendung

Um die Anwendung zu testen, probieren Sie die folgenden Manipulationen aus. Beachten Sie, dass Sie mehrere der folgenden Aktionen gleichzeitig ausführen können.

  • Um den Rectangle zu bewegen, legen Sie einen Finger auf Rectangle und bewegen Sie den Finger über den Bildschirm.

  • Um die Rectangle Größe zu ändern, platzieren Sie zwei Finger auf dem Rectangle und bewegen Sie die Finger zusammen oder auseinander.

  • Um den Rectangle zu drehen, platzieren Sie zwei Finger auf dem Rectangle und drehen Sie die Finger umeinander.

Um die Trägheit zu verursachen, heben Sie Ihre Finger schnell vom Bildschirm ab, wenn Sie die vorherigen Manipulationen ausführen. Das Rectangle wird weiterhin einige Sekunden lang bewegt, die Größe geändert oder gedreht, bevor es angehalten wird.

Siehe auch