Procedura dettagliata: creazione della prima applicazione a tocco

Articolo
10/18/2023

WPF consente alle applicazioni di rispondere al tocco. Ad esempio, è possibile interagire con un'applicazione usando una o più dita su un dispositivo sensibile al tocco, ad esempio un touchscreen Questa procedura dettagliata crea un'applicazione che consente all'utente di spostare, ridimensionare o ruotare un singolo oggetto usando il tocco.

Prerequisiti

Per completare questa procedura dettagliata, è necessario disporre dei componenti seguenti:

Visual Studio.
Un dispositivo che accetta l'input tocco, ad esempio un touchscreen, che supporta Windows Touch.

Inoltre, è necessario avere una conoscenza di base di come creare un'applicazione in WPF, in particolare come sottoscrivere e gestire un evento. Per altre informazioni, vedere Procedura dettagliata: La prima applicazione desktop WPF.

Creare l'applicazione

Per creare l'applicazione

Creare un nuovo progetto di applicazione WPF in Visual Basic o Visual C# denominato BasicManipulation. Per altre informazioni, vedere Procedura dettagliata: La prima applicazione desktop WPF.

Sostituire il contenuto di MainWindow.xaml con il codice XAML seguente.

Questo markup crea una semplice applicazione che contiene un rosso Rectangle su un oggetto Canvas. La IsManipulationEnabled proprietà di Rectangle è impostata su true in modo che riceva eventi di manipolazione. L'applicazione sottoscrive gli ManipulationStartingeventi , ManipulationDeltae ManipulationInertiaStarting . Questi eventi contengono la logica per spostare l'oggetto Rectangle quando l'utente lo modifica.

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

Se si usa Visual Basic, nella prima riga di MainWindow.xaml sostituire x:Class="BasicManipulation.MainWindow" con x:Class="MainWindow".
MainWindow Nella classe aggiungere il gestore eventi seguenteManipulationStarting.

L'evento ManipulationStarting si verifica quando WPF rileva che l'input tocco inizia a modificare un oggetto. Il codice specifica che la posizione della manipolazione deve essere relativa a Window impostando la ManipulationContainer proprietà .
```
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
```

MainWindow Nella classe aggiungere il gestore eventi seguenteManipulationDelta.

L'evento ManipulationDelta si verifica quando l'input tocco cambia posizione e può verificarsi più volte durante una manipolazione. L'evento può verificarsi anche dopo la generazione di un dito. Ad esempio, se l'utente trascina un dito su uno schermo, l'evento ManipulationDelta si verifica più volte quando il dito si muove. Quando l'utente solleva un dito dallo schermo, l'evento continua a verificarsi per simulare l'inerzia ManipulationDelta .

Il codice si applica all'oggetto DeltaManipulation RenderTransform di Rectangle per spostarlo quando l'utente sposta l'input tocco. Controlla inoltre se l'oggetto Rectangle non rientra nei limiti di Window quando l'evento si verifica durante l'inerzia. In tal caso, l'applicazione chiama il ManipulationDeltaEventArgs.Complete metodo per terminare la manipolazione.

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

MainWindow Nella classe aggiungere il gestore eventi seguenteManipulationInertiaStarting.

L'evento ManipulationInertiaStarting si verifica quando l'utente genera tutte le dita dallo schermo. Il codice imposta la velocità iniziale e la decelerazione per il movimento, l'espansione e la rotazione del rettangolo.

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

Compilare ed eseguire il progetto.

Nella finestra dovrebbe essere visualizzato un quadrato rosso.

Test dell'applicazione

Per testare l'applicazione, provare le modifiche seguenti. Si noti che è possibile eseguire più di una delle operazioni seguenti contemporaneamente.

Per spostare , Rectangleposizionare un dito sull'oggetto Rectangle e spostare il dito sullo schermo.
Per ridimensionare , posizionare Rectangledue dita sull'oggetto Rectangle e spostare le dita più vicine o più lontane l'una dall'altra.
Per ruotare l'oggetto Rectangle, posizionare due dita sull'oggetto e ruotare le dita l'una attorno all'altra Rectangle .

Per causare inerzia, sollevare rapidamente le dita dallo schermo mentre si eseguono le manipolazioni precedenti. L'oggetto Rectangle continuerà a spostare, ridimensionare o ruotare per alcuni secondi prima dell'arresto.

Procedura dettagliata: creazione della prima applicazione a tocco

Prerequisiti

Creare l'applicazione

Per creare l'applicazione

Test dell'applicazione

Vedi anche

Commenti e suggerimenti

Risorse aggiuntive