Passo a passo: Criando seu aplicativo First Touch

Artigo
12/17/2024

O WPF permite que os aplicativos respondam ao toque. Por exemplo, você pode interagir com um aplicativo usando um ou mais dedos em um dispositivo sensível ao toque, como uma tela sensível ao toque Este passo a passo cria um aplicativo que permite ao usuário mover, redimensionar ou girar um único objeto usando o toque.

Pré-requisitos

Você precisa dos seguintes componentes para concluir este passo a passo:

Visual Studio.
Um dispositivo que aceita entrada por toque, como um ecrã tátil, que suporta o Windows Touch.

Além disso, você deve ter uma compreensão básica de como criar um aplicativo no WPF, especialmente como se inscrever e manipular um evento. Para obter mais informações, consulte Passo a passo: Meu primeiro aplicativo de desktop WPF.

Criando o aplicativo

Para criar o aplicativo

Crie um novo projeto de aplicativo WPF em Visual Basic ou Visual C# chamado BasicManipulation. Para obter mais informações, consulte Passo a passo: Meu primeiro aplicativo de desktop WPF.

Substitua o conteúdo de MainWindow.xaml pelo seguinte XAML.

Esta marcação cria uma aplicação simples que contém um Rectangle vermelho em um Canvas. A propriedade IsManipulationEnabled do Rectangle é definida como true para que receba eventos de manipulação. A aplicação subscreve os eventos ManipulationStarting, ManipulationDeltae ManipulationInertiaStarting. Esses eventos contêm a lógica para mover o Rectangle quando o usuário o manipula.

<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 você estiver usando o Visual Basic, na primeira linha de MainWindow.xaml, substitua x:Class="BasicManipulation.MainWindow" por x:Class="MainWindow".
Na classe MainWindow, adicione o seguinte manipulador de eventos ManipulationStarting.

O evento ManipulationStarting ocorre quando o WPF deteta que a entrada por toque começa a manipular um objeto. O código especifica que a posição da manipulação deve ser relativa ao Window definindo a propriedade 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
```

Na classe MainWindow, adicione o seguinte manipulador de eventos ManipulationDelta.

O evento ManipulationDelta ocorre quando a entrada por toque muda de posição e pode ocorrer várias vezes durante uma manipulação. O evento também pode ocorrer depois que um dedo é levantado. Por exemplo, se o usuário arrasta um dedo por uma tela, o evento ManipulationDelta ocorre várias vezes à medida que o dedo se move. Quando o usuário levanta um dedo da tela, o evento ManipulationDelta continua ocorrendo para simular a inércia.

O código aplica o DeltaManipulation ao RenderTransform do Rectangle para movê-lo à medida que o usuário move a entrada por toque. Também verifica se o Rectangle está fora dos limites do Window quando o evento ocorre durante a inércia. Em caso afirmativo, o aplicativo chama o método ManipulationDeltaEventArgs.Complete para encerrar a manipulação.

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

Na classe MainWindow, adicione o seguinte manipulador de eventos ManipulationInertiaStarting.

O evento ManipulationInertiaStarting ocorre quando o usuário levanta todos os dedos da tela. O código define a velocidade inicial e a desaceleração para o movimento, expansão e rotação do retângulo.

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

Crie e execute o projeto.

Você verá um quadrado vermelho aparecer na janela.

Testando o aplicativo

Para testar o aplicativo, tente as seguintes manipulações. Observe que você pode fazer mais de um dos seguintes procedimentos ao mesmo tempo.

Para mover a Rectangle, coloque um dedo na Rectangle e mova o dedo pela tela.
Para redimensionar a Rectangle, coloque dois dedos na Rectangle e aproxime-os ou afaste-os um do outro.
Para girar o Rectangle, coloque dois dedos na Rectangle e gire os dedos um ao redor do outro.

Para causar inércia, levante rapidamente os dedos da tela enquanto realiza as manipulações anteriores. O Rectangle continuará a mover-se, redimensionar-se ou rodar durante alguns segundos antes de parar.

Partilhar via

Passo a passo: Criando seu aplicativo First Touch

Pré-requisitos

Criando o aplicativo

Para criar o aplicativo

Testando o aplicativo

Ver também

Recursos adicionais