Anleitung: Erstellen Ihrer ersten Touch-App

Artikel
12/18/2024

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 Anleitung: Meine erste WPF-Desktopanwendung.

Erstellen der Anwendung

So erstellen Sie die Anwendung

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.

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

Dieses Markup erstellt eine einfache Anwendung, die eine rote Rectangle auf einem Canvasenthält. Die IsManipulationEnabled Eigenschaft der Rectangle ist auf "true" festgelegt, sodass sie Manipulationsereignisse empfängt. Die Anwendung abonniert die Ereignisse ManipulationStarting, ManipulationDeltaund ManipulationInertiaStarting. Diese Ereignisse enthalten die Logik zum Verschieben der Rectangle, wenn der Benutzer sie 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>

Wenn Sie Visual Basic verwenden, ersetzen Sie in der ersten Zeile von "MainWindow.xaml" x:Class="BasicManipulation.MainWindow" durch x:Class="MainWindow".
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 zum Window sein soll, indem die eigenschaft ManipulationContainer festgelegt 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
```

Fügen Sie in der MainWindow-Klasse den folgenden ManipulationDelta Ereignishandler hinzu.

Das ManipulationDelta-Ereignis tritt auf, wenn sich die Position der Berührungseingabe ändert und kann während einer Manipulation mehrmals auftreten. 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 den Finger vom Bildschirm abhebt, tritt das ManipulationDelta-Ereignis weiterhin auf, um Trägheit zu simulieren.

Der Code wendet die DeltaManipulation auf die RenderTransform der Rectangle an, um sie zu verschieben, während der Benutzer die Toucheingabe bewegt. Es wird auch geprüft, ob sich die Rectangle außerhalb der Grenzen der Window befindet, wenn das Ereignis während der Trägheitsbewegung 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

Fügen Sie in der MainWindow-Klasse den folgenden ManipulationInertiaStarting-Ereignishandler hinzu.

Das ManipulationInertiaStarting-Ereignis tritt auf, wenn der Benutzer alle Finger vom Bildschirm hebt. 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

Erstellen sie das Projekt, und führen Sie es aus.

Im Fenster sollte ein rotes Quadrat angezeigt werden.

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 die Rectanglezu verschieben, setzen Sie einen Finger auf die Rectangle und bewegen ihn über den Bildschirm.
Um die Größe der Rectanglezu ändern, setzen Sie zwei Finger auf die Rectangle, und bewegen Sie die Finger näher zusammen oder weiter auseinander.
Um die Rectanglezu drehen, setzen Sie zwei Finger auf die Rectangle und bewegen Sie die Finger im Kreis umeinander.

Um Trägheit zu verursachen, heben Sie Ihre Finger schnell vom Bildschirm, während Sie die vorherigen Manipulationen ausführen. Die Rectangle wird weiterhin einige Sekunden lang verschoben, vergrößert oder gedreht, bevor sie angehalten wird.

Freigeben über

Anleitung: Erstellen Ihrer ersten Touch-App

Voraussetzungen

Erstellen der Anwendung

So erstellen Sie die Anwendung

Testen der Anwendung

Siehe auch

Zusätzliche Ressourcen