Demonstra Passo a passo: Criando seu primeiro aplicativo de toque

Artigo
08/04/2011

WPFpermite que aplicativos responder ao toque. Por exemplo, você pode interagir com um aplicativo usando um ou mais dedos em um dispositivo de sensíveis ao toque, como, por exemplo, uma tela sensível ao toque nesta explicação passo a passo cria um aplicativo que permite ao usuário mover, redimensionar ou girar um único objeto usando o toque.

Prerequisites

You need the following components to complete this walkthrough:

Microsoft Visual Studio 2010.
O Windows 7.
Um dispositivo que aceita a entrada por toque, como, por exemplo, uma tela de toque, que oferece suporte a toque do Windows.

Além disso, você deve ter uma compreensão básica de como criar um aplicativo em WPF, especialmente como se inscrever e manipular um evento. For more information, see Demonstra Passo a passo: Guia de Introdução do WPF.

Creating the Application

To create the application

Criar um novo projeto de aplicativo WPF no Visual Basic ou no Visual C# chamado BasicManipulation. For more information, see Como: Criar um novo projeto de aplicativo WPF.

Substitua o conteúdo de MainWindow. XAML com o seguinte XAML.

Essa marcação cria um aplicativo simples que contém um red Rectangle em um Canvas. O IsManipulationEnabled propriedade da Rectangle é definida como true para que ele receberá a manipulação de eventos. O aplicativo assina o ManipulationStarting, ManipulationDelta, e ManipulationInertiaStarting eventos. Esses eventos contêm a lógica para mover a Rectangle quando o usuário manipula o proprietário.

<Window x:Class="BasicManipulation.MainWindow"
        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="https://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" com x:Class="MainWindow".
No MainWindow classe, adicione o seguinte ManipulationStarting manipulador de eventos.

O ManipulationStarting evento ocorre quando WPF detecta esse toque começa a entrada manipular um objeto. O código especifica que a posição da manipulação de deve ser relativo ao Window , definindo a ManipulationContainer propriedade.
```
Private Sub Window_ManipulationStarting(ByVal sender As Object, ByVal e As ManipulationStartingEventArgs)
    e.ManipulationContainer = Me
    e.Handled = True
End Sub
```
```
void Window_ManipulationStarting(object sender, ManipulationStartingEventArgs e)
{
    e.ManipulationContainer = this;
    e.Handled = true;
}
```

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

O ManipulationDelta evento ocorre quando a entrada por toque muda de posição e pode ocorrer várias vezes durante a manipulação. O evento também pode ocorrer após um dedo é gerado. Por exemplo, se o usuário arrasta um dedo através da tela, o ManipulationDelta evento ocorre várias vezes como move o dedo. Quando o usuário retira um dedo na tela, o ManipulationDelta evento mantém ocorrendo simular inércia.

O código se aplica a DeltaManipulation para o RenderTransform da Rectangle para movê-lo como o usuário move a entrada por toque. Ele também verifica se o Rectangle está fora dos limites da Window quando o evento ocorre durante inércia. Se assim, o aplicativo chama o ManipulationDeltaEventArgs.Complete método para finalizar a manipulação.

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

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

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

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

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

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

Build and run the project.

Você deve ver um quadrado vermelho que aparecem na janela.

Testing the Application

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

Para mover a Rectangle, coloque um dedo na Rectangle e move o dedo na tela.
Para redimensionar o Rectangle, coloque dois dedos na Rectangle e mover os dedos, perto juntos ou futuramente do outro.
Para girar o Rectangle, coloque dois dedos na Rectangle e girar os dedos ao redor de si.

Para causar inércia, aumente rapidamente os dedos na tela de como executar manipulações de anteriores. O Rectangle continuarão a mover, redimensionar ou girar por alguns segundos antes que ele pára.

Consulte também

Referência

UIElement.ManipulationStarting

UIElement.ManipulationDelta

UIElement.ManipulationInertiaStarting

Partilhar via