Doorloop: Uw eerste aanraaktoepassing maken

Artikel
12/19/2024

WPF stelt toepassingen in staat om te reageren op aanraking. U kunt bijvoorbeeld communiceren met een toepassing met behulp van een of meer vingers op een aanraakgevoelig apparaat, zoals een touchscreen. Met deze procedure maakt u een toepassing waarmee de gebruiker één object kan verplaatsen, vergroten of draaien met behulp van aanraking.

Voorwaarden

U hebt de volgende onderdelen nodig om dit scenario te voltooien:

Visual Studio.
Een apparaat dat aanraakinvoer accepteert, zoals een touchscreen, dat Ondersteuning biedt voor Windows Touch.

Daarnaast moet u basiskennis hebben van het maken van een toepassing in WPF, met name hoe u zich abonneert op een gebeurtenis en hoe u een gebeurtenis afhandelt. Zie Walkthrough: Mijn eerste WPF-bureaubladtoepassingvoor meer informatie.

De toepassing maken

Maak een nieuw WPF-toepassingsproject in Visual Basic of Visual C# met de naam BasicManipulation. Zie Walkthrough: Mijn eerste WPF-bureaubladtoepassingvoor meer informatie.

Vervang de inhoud van MainWindow.xaml door de volgende XAML.

Met deze markering maakt u een eenvoudige toepassing die een rode Rectangle op een Canvasbevat. De eigenschap IsManipulationEnabled van de Rectangle is ingesteld op 'true', zodat deze manipulatie-gebeurtenissen ontvangt. De toepassing abonneert zich op de gebeurtenissen ManipulationStarting, ManipulationDeltaen ManipulationInertiaStarting. Deze gebeurtenissen bevatten de logica om de Rectangle te verplaatsen wanneer de gebruiker deze bewerkt.

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

Als u Visual Basic gebruikt, vervangt u in de eerste regel van MainWindow.xaml x:Class="BasicManipulation.MainWindow" door x:Class="MainWindow".
Voeg in de klasse MainWindow de volgende ManipulationStarting gebeurtenis-handler toe.

De ManipulationStarting gebeurtenis treedt op wanneer WPF detecteert dat aanraakinvoer een object begint te manipuleren. De code geeft aan dat de positie van de manipulatie ten opzichte van de Window moet zijn door de eigenschap ManipulationContainer in te stellen.
```
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
```

Voeg in de klasse MainWindow de volgende ManipulationDelta eventhandler toe.

De gebeurtenis ManipulationDelta treedt op wanneer de positie van de aanraakinvoer verandert en meerdere keren kan optreden tijdens een manipulatie. De gebeurtenis kan ook optreden nadat een vinger is opgetild. Als de gebruiker bijvoorbeeld een vinger over een scherm sleept, treedt de gebeurtenis ManipulationDelta meerdere keren op wanneer de vinger wordt verplaatst. Wanneer de gebruiker een vinger van het scherm haalt, blijft de ManipulationDelta gebeurtenis optreden om traagheid te simuleren.

De code past de DeltaManipulation toe op de RenderTransform van de Rectangle om deze te verplaatsen wanneer de gebruiker de aanraakinvoer verplaatst. Ook wordt gecontroleerd of de Rectangle buiten de grenzen van de Window valt wanneer de gebeurtenis plaatsvindt tijdens traagheid. Zo ja, dan roept de toepassing de ManipulationDeltaEventArgs.Complete methode aan om de manipulatie te beëindigen.

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

Voeg in de klasse MainWindow de volgende ManipulationInertiaStarting gebeurtenis-handler toe.

De ManipulationInertiaStarting gebeurtenis treedt op wanneer de gebruiker alle vingers van het scherm omhoog werpt. De code stelt de initiële snelheid en vertraging in voor de verplaatsing, uitbreiding en rotatie van de rechthoek.

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

Bouw het project en voer het uit.

Je zou een rood vierkant in het venster moeten zien verschijnen.

De toepassing testen

Voer de volgende bewerkingen uit om de toepassing te testen. Houd er rekening mee dat u meer dan één van de volgende handelingen tegelijk kunt uitvoeren.

Als u de Rectanglewilt verplaatsen, plaatst u een vinger op de Rectangle en beweegt u de vinger over het scherm.
Als u het formaat van de Rectanglewilt wijzigen, plaatst u twee vingers op de Rectangle en beweegt u de vingers dichter bij elkaar of verder van elkaar af.
Als u de Rectanglewilt draaien, plaatst u twee vingers op de Rectangle en draait u de vingers om elkaar heen.

Als u traagheid wilt veroorzaken, verheft u snel uw vingers van het scherm terwijl u de vorige manipulaties uitvoert. Het Rectangle zal enkele seconden blijven bewegen, van formaat veranderen of roteren voordat het stopt.

Delen via

Doorloop: Uw eerste aanraaktoepassing maken

Voorwaarden

De toepassing maken

De toepassing maken

De toepassing testen

Zie ook

Aanvullende resources