Genomgång: Skapa ditt first Touch-program

Artikel
12/19/2024

WPF gör det möjligt för program att svara på beröring. Du kan till exempel interagera med ett program med hjälp av en eller flera fingrar på en beröringskänslig enhet, till exempel en pekskärm Den här genomgången skapar ett program som gör att användaren kan flytta, ändra storlek på eller rotera ett enda objekt med hjälp av touch.

Förutsättningar

Du behöver följande komponenter för att slutföra den här genomgången:

Visual Studio.
En enhet som accepterar pekindata, till exempel en pekskärm, som stöder Windows Touch.

Dessutom bör du ha en grundläggande förståelse för hur du skapar ett program i WPF, särskilt hur du prenumererar på och hanterar en händelse. Mer information finns i Genomgång: Mitt första WPF-skrivbordsprogram.

Skapa programmet

Så här skapar du programmet

Skapa ett nytt WPF-programprojekt i Visual Basic eller Visual C# med namnet BasicManipulation. Mer information finns i Genomgång: Mitt första WPF-skrivbordsprogram.

Ersätt innehållet i MainWindow.xaml med följande XAML.

Den här markeringen skapar en enkel applikation som innehåller en röd Rectangle på en Canvas. Egenskapen IsManipulationEnabled för Rectangle är inställd på sant så att den kan ta emot manipulationshändelser. Programmet prenumererar på händelserna ManipulationStarting, ManipulationDeltaoch ManipulationInertiaStarting. Dessa händelser innehåller logiken för att flytta Rectangle när användaren manipulerar den.

<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>

Om du använder Visual Basic ersätter du x:Class="BasicManipulation.MainWindow" med x:Class="MainWindow"på den första raden i MainWindow.xaml.

I klassen MainWindow lägger du till följande ManipulationStarting händelsehanterare.

Den ManipulationStarting händelsen inträffar när WPF identifierar att pekindata börjar manipulera ett objekt. Koden anger att manipuleringens position ska vara relativ till Window genom att ange egenskapen ManipulationContainer.

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

I klassen MainWindow lägger du till följande ManipulationDelta händelsehanterare.

Den ManipulationDelta händelsen inträffar när touch-indata ändrar position och kan inträffa flera gånger under en manipulering. Händelsen kan också inträffa när ett finger har lyfts upp. Om användaren till exempel drar ett finger över en skärm inträffar den ManipulationDelta händelsen flera gånger när fingret rör sig. När användaren höjer ett finger från skärmen fortsätter den ManipulationDelta händelsen att inträffa för att simulera tröghet.

Koden tillämpar DeltaManipulation till RenderTransform i Rectangle för att flytta den samtidigt som användaren flyttar pekskärmen. Den kontrollerar också om Rectangle ligger utanför gränserna för Window när händelsen inträffar under tröghet. I så fall anropar programmet metoden ManipulationDeltaEventArgs.Complete för att avsluta manipulationen.

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

I klassen MainWindow lägger du till följande ManipulationInertiaStarting händelsehanterare.

Händelsen ManipulationInertiaStarting inträffar när användaren höjer alla fingrar från skärmen. Koden anger den initiala hastigheten och inbromsningen för rektangelns rörelse, expansion och rotation.

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

Skapa och kör projektet.

Du bör se en röd fyrkant i fönstret.

Testa programmet

Testa programmet genom att prova följande manipulationer. Observera att du kan göra mer än något av följande samtidigt.

Om du vill flytta Rectanglesätter du ett finger på Rectangle och flyttar fingret över skärmen.
Om du vill ändra storlek på Rectanglelägger du två fingrar på Rectangle och flyttar fingrarna närmare varandra eller längre ifrån varandra.
Om du vill rotera Rectanglelägger du två fingrar på Rectangle och roterar fingrarna runt varandra.

För att orsaka tröghet, lyft snabbt fingrarna från skärmen när du utför de tidigare manipuleringarna. Rectangle kommer fortsätta att flytta, ändra storlek eller rotera i några sekunder innan den stannar.

Dela via

Genomgång: Skapa ditt first Touch-program

Förutsättningar

Skapa programmet

Så här skapar du programmet

Testa programmet

Se även

Ytterligare resurser