Procedura dettagliata: Creazione della prima applicazione touch

Articolo
12/19/2024

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 sono necessari i componenti seguenti:

Visual Studio.
Un dispositivo che accetta input tattili, come ad esempio un touchscreen, 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 ulteriori informazioni, consultare Procedura dettagliata: la mia prima applicazione desktop WPF.

Creazione dell'applicazione

Per creare l'applicazione

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

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

Questo markup crea una semplice applicazione che contiene un Rectangle rosso su un Canvas. La proprietà IsManipulationEnabled del Rectangle è impostata su true in modo che riceva eventi di manipolazione. L'applicazione si iscrive agli eventi ManipulationStarting, ManipulationDeltae ManipulationInertiaStarting. Questi eventi contengono la logica per spostare il 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".
Nella classe MainWindow aggiungere il gestore eventi ManipulationStarting seguente.

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

Nella classe MainWindow aggiungere il gestore eventi ManipulationDelta seguente.

L'evento ManipulationDelta si verifica quando il tocco cambia posizione e può accadere più volte durante una manipolazione. L'evento può verificarsi anche dopo che un dito è stato sollevato. 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 ManipulationDelta continua a verificarsi per simulare l'inerzia.

Il codice applica il DeltaManipulation a RenderTransform di Rectangle per spostarlo mentre l'utente muove l'input touch. Controlla inoltre se il Rectangle non rientra nei limiti del Window quando l'evento si verifica durante l'inerzia. In tal caso, l'applicazione chiama il metodo ManipulationDeltaEventArgs.Complete 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

Nella classe MainWindow aggiungere il gestore eventi ManipulationInertiaStarting seguente.

L'evento ManipulationInertiaStarting si verifica quando l'utente solleva 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 il Rectangle, posizionare un dito sulla Rectangle e spostare il dito sullo schermo.
Per ridimensionare il Rectangle, posizionare due dita sulla Rectangle e spostare le dita più vicine o più lontane l'una dall'altra.
Per ruotare il Rectangle, posizionare due dita sulla Rectangle e ruotare le dita l'una attorno all'altra.

Per causare inerzia, sollevare rapidamente le dita dallo schermo mentre si eseguono le manipolazioni precedenti. Il Rectangle continuerà a spostarsi, ridimensionare o ruotare per alcuni secondi prima che si arresti.

Condividi tramite

Procedura dettagliata: Creazione della prima applicazione touch

Prerequisiti

Creazione dell'applicazione

Per creare l'applicazione

Test dell'applicazione

Vedere anche

Risorse aggiuntive