Compartilhar via

Guia do desenvolvedor de interações por toque

Projete seu aplicativo com a expectativa de que o touch será o principal método de entrada de seus usuários. Se você usar controles WinUI, o suporte para touchpad, mouse e caneta ou stylus não exigirá programação adicional, pois os aplicativos WinUI fornecem isso sem custo adicional.

No entanto, lembre-se de que uma interface do usuário otimizada para touch nem sempre é superior a uma interface do usuário tradicional. Ambos oferecem vantagens e desvantagens que são exclusivas de uma tecnologia e aplicativo. Ao passar para uma interface do usuário focada no toque, é importante entender as principais diferenças entre toque, touchpad, caneta/stylus, mouse e entrada por teclado.

APIs importantes: Windows.UI.Xaml.Input, Windows.UI.Core, Windows.Devices.Input

Muitos dispositivos têm telas multitoque que dão suporte ao uso de um ou mais dedos (ou contatos de touch) como entrada. Os contatos de toque, e seu movimento, são interpretados como sendo gestos de toque e manipulações para dar suporte a várias interações do usuário.

O Windows app inclui vários mecanismos diferentes para lidar com a entrada por toque, permitindo que você crie uma experiência imersiva que seus usuários possam explorar com confiança. Aqui, abordamos as noções básicas de como usar a entrada por toque em um Windows app.

As interações por touch exigem três coisas:

  • Uma tela sensível ao toque.
  • O contato direto (ou proximidade com, se o monitor tiver sensores de proximidade e suporte para detecção de foco) de um ou mais dedos nesse monitor.
  • Movimento dos contatos de toque (ou falta deles, com base em um limiar de tempo).

Os dados de entrada fornecidos pelo sensor de touch podem ser:

  • Interpretados como um gesto físico para manipulação direta de um ou mais elementos da interface do usuário (como movimento panorâmico, rotação, redimensionamento ou movimentação). (Por outro lado, interagir com um elemento por meio de sua janela de propriedades, uma caixa de diálogo ou uma outra ferramenta da interface do usuário é considerada uma manipulação indireta.)
  • Reconhecido como um método de entrada alternativo, como mouse ou caneta.
  • Usado para complementar ou modificar aspectos de outros métodos de entrada, como borrar um traço de tinta desenhado com uma caneta.

A entrada touch normalmente envolve a manipulação direta de um elemento na tela. O elemento responde imediatamente a qualquer toque dentro de sua área de hit test e reage adequadamente a qualquer movimento posterior dos toques, incluindo a remoção.

Interações e gestos touch personalizados devem ser projetados com cuidado. Eles devem ser intuitivos, responsivos e detectáveis, e devem permitir que os usuários explorem seu aplicativo com confiança.

Verifique se a funcionalidade do aplicativo é exposta de modo consistente em todos os tipos de dispositivos de entrada compatíveis. Se necessário, use alguma forma de modo de entrada indireta, como entrada de texto para interações com o teclado ou recursos de interface do usuário para mouse e caneta.

Lembre-se de que os dispositivos de entrada tradicionais (como mouse e teclado), são familiares e atraentes para muitos usuários. Eles podem oferecer velocidade, precisão e feedback tátil que o toque não consegue.

Fornecer experiências interativas únicas e distintas para todos os dispositivos de entrada dará suporte à mais ampla gama de recursos e preferências, atrairá o público-alvo mais amplo possível e atrairá mais clientes para seu aplicativo.

Comparar os requisitos de interação por toque

A tabela a seguir mostra algumas das diferenças entre dispositivos de entrada que você deve considerar ao criar aplicativos do Windows otimizados para touch.

Fator Interações por toque Interações com mouse, teclado, caneta/stylus Touchpad
Precisão A área de contato de uma ponta do dedo é maior do que uma única coordenada x-y, o que aumenta as chances de ativações de comando inadvertidas. O mouse e a caneta/stylus fornecem uma coordenada x-y precisa. O mesmo que mouse.
A forma da área de contato muda ao longo do movimento. Os movimentos do mouse e os traços da caneta/stylus fornecem coordenadas x-y precisas. O foco do teclado é explícito. O mesmo que mouse.
Não há cursor do mouse para ajudar no direcionamento. O cursor do mouse, o cursor da caneta/stylus e o foco no teclado ajudam na focalização. O mesmo que mouse.
Anatomia humana Os movimentos da ponta dos dedos são imprecisos, porque um movimento em linha reta com um ou mais dedos é difícil. Isso se deve à curvatura das articulações da mão e ao número de articulações envolvidas no movimento. É mais fácil executar um movimento em linha reta com o mouse ou caneta/stylus porque a mão que os controla percorre uma distância física menor do que o cursor na tela. O mesmo que mouse.
Algumas áreas na superfície de toque de um dispositivo de tela podem ser difíceis de alcançar devido à postura do dedo e ao modo como o usuário segura o dispositivo. O mouse e a caneta/stylus podem alcançar qualquer parte da tela; qualquer controle deve ser acessível pelo teclado na ordem de tabulação. A posição dos dedos e a pegada podem ser um problema.
Os objetos podem ser obscurecidos por uma ou mais pontas dos dedos ou pela mão do usuário. Isso é conhecido como oclusão. Os dispositivos de entrada indireta não causam oclusão. O mesmo que mouse.
Estado do objeto O touch usa um modelo de dois estados: a superfície de toque de um dispositivo de tela é tocada (ativada) ou não (desativada). Não há nenhum estado de 'hover' que possa acionar feedback visual adicional. Um mouse, caneta e teclado expõem um modelo de três estados: levantado (desligado), pressionado (ligado) e flutuando (foco).
Passar o mouse permite que os usuários explorem e aprendam por meio de dicas de ferramentas associadas a elementos da UI. Os efeitos de hover e foco podem indicar quais objetos são interativos e também ajudar no direcionamento.		 O mesmo que mouse.
Interação rica Suporta multitoque: vários pontos de entrada (pontas dos dedos) em uma superfície de toque. Dá suporte a um único ponto de entrada. O mesmo que touch.
Dá suporte para manipulação direta de objetos por meio de gestos como tocar, arrastar, deslizar, apertar e girar. Não há suporte para manipulação direta, pois mouse, caneta/stylus e teclado são dispositivos de entrada indireta. O mesmo que mouse.

Observação

A entrada indireta teve o benefício de mais de 25 anos de refinamento. Recursos como dicas de ferramentas acionadas por foco foram projetados para resolver a exploração da interface do usuário especificamente para touchpad, mouse, caneta/stylus e entrada de teclado. Funcionalidades da interface do usuário como essa foram reprojetadas para a experiência aprimorada proporcionada pela entrada por toque, sem comprometer a experiência do usuário para esses outros dispositivos.

Usar feedback por touch

Feedback visual apropriado durante as interações com seu aplicativo ajudam os usuários a reconhecer, aprender e se adaptar à forma como suas interações são interpretadas pelo aplicativo e pela plataforma Windows. O feedback visual pode indicar interações bem-sucedidas, retransmitir o status do sistema, melhorar a sensação de controle, reduzir erros, ajudar os usuários a entender o sistema e o dispositivo de entrada e incentivar a interação.

O feedback visual é fundamental quando o usuário confia na entrada touch para atividades que exigem precisão e exatidão com base na localização. Exiba feedback sempre e onde a entrada touch for detectada para ajudar o usuário a entender todas as regras de direcionamento personalizadas definidas pelo seu aplicativo e seus controles.

Direcionamento

O direcionamento é otimizado por meio de:

  • Tamanhos de alvo por toque

    Diretrizes de tamanho claras garantem que os aplicativos forneçam uma interface do usuário confortável que contenha objetos e controles fáceis e seguros de direcionar.

  • Geometria de contato

    Toda a área de contato do dedo determina o objeto alvo mais provável.

  • Raspagem de dados

    Os itens dentro de um grupo são redirecionados com facilidade arrastando o dedo entre eles (por exemplo, botões de opção). O item atual é ativado quando o touch é liberado.

  • Oscilação

    Itens empacotados de modo denso (por exemplo, hiperlinks) são redirecionados com facilidade pressionando o dedo para baixo e, sem deslizar, balançando-o para frente e para trás sobre os itens. Devido à oclusão, o item atual é identificado por meio de uma dica de ferramenta ou da barra de status e é ativado quando o toque é liberado.

Exatidão

Projete para interações imprecisas usando:

  • Pontos de alinhamento que podem facilitar a parada nos locais desejados quando os usuários interagem com o conteúdo.
  • "Trilhos" direcionais que podem auxiliar com movimento panorâmico vertical ou horizontal, mesmo quando a mão se move em um leve arco. Para obter mais informações, consulte Diretrizes para movimento panorâmico.

Oclusão

A oclusão dos dedos e das mãos é evitada:

  • Tamanho e posicionamento da interface do usuário

    Tornando os elementos da interface do usuário grandes o suficiente para que não possam ser completamente cobertos por uma área de contato na ponta do dedo.

    Posicione menus e pop-ups acima da área de contato sempre que possível.

  • Dicas de ferramentas

    Mostre dicas de ferramentas quando um usuário mantém o contato com o dedo em um objeto. Isso é útil para descrever a funcionalidade do objeto. O usuário pode remover o dedo do objeto para evitar invocar o tooltip.

    Para objetos pequenos, desloque as dicas de ferramentas para que não sejam cobertas pela área de contato da ponta do dedo. Isso é útil para direcionamento de alvo.

  • Manípulos para precisão

    Quando a precisão é necessária (por exemplo, na seleção de texto), forneça alças de seleção deslocadas para aumentar a exatidão. Para obter mais informações, consulte Guidelines para selecionar texto e imagens (Windows Runtime aplicativos).

Cronometragem

Evite mudanças de modo cronometrado em favor da manipulação direta. A manipulação direta simula o manuseio físico direto e em tempo real de um objeto. O objeto responde à medida que os dedos são movidos.

Uma interação cronometrada, por outro lado, ocorre após uma interação por touch. As interações cronometradas geralmente dependem de limites invisíveis, como tempo, distância ou velocidade, para determinar qual comando executar. As interações cronometradas não têm feedback visual até que o sistema execute a ação.

A manipulação direta oferece uma série de benefícios em relação às interações cronometradas:

  • O feedback visual instantâneo durante as interações faz com que os usuários se sintam mais engajados, confiantes e no controle.
  • As manipulações diretas tornam mais seguro explorar um sistema porque são reversíveis — os usuários podem recuar com facilidade em suas ações de maneira lógica e intuitiva.
  • As interações que afetam diretamente os objetos e imitam as interações do mundo real são mais intuitivas, detectáveis e memoráveis. Eles não dependem de interações obscuras ou abstratas.
  • Interações temporizadas podem ser difíceis de executar, pois os usuários devem alcançar limites arbitrários e invisíveis.

Além disso, recomendamos enfaticamente o seguinte:

  • As manipulações não devem ser distinguidas pelo número de dedos usados.
  • As interações devem dar suporte para manipulações compostas. Por exemplo, faça um gesto de pinça para aplicar zoom enquanto arrasta os dedos para fazer movimento panorâmico.
  • As interações não devem ser distinguidas pelo tempo. A mesma interação deve ter o mesmo resultado final, não importa do tempo necessário para realizá-la. As ativações baseadas no tempo introduzem atrasos obrigatórios para os usuários e diminuem tanto a natureza imersiva da manipulação direta quanto a percepção da capacidade de resposta do sistema.

    Observação

    Uma exceção a isso é quando você usa interações cronometradas específicas para ajudar no aprendizado e na exploração (por exemplo, pressionar e segurar).

  • Descrições apropriadas e pistas visuais têm um grande efeito no uso de interações avançadas.

Visualizações do aplicativo

Ajuste a experiência do usuário por meio das configurações de navegação e zoom das exibições do aplicativo. Uma exibição de aplicativo determina como um usuário acessa e manipula seu aplicativo e seu conteúdo. As exibições também fornecem comportamentos como inércia, rebote de limite de conteúdo e pontos de encaixe.

As configurações de deslocamento panorâmico e rolagem do controle ScrollViewer determinam como os usuários navegam dentro de uma única exibição, quando o conteúdo da exibição não cabe na área de visualização. Uma única exibição, por exemplo, pode ser uma página de uma revista ou livro, a estrutura de pastas de um computador, uma biblioteca de documentos ou um álbum de fotos.

As configurações de zoom se aplicam ao zoom óptico (compatível com o controle ScrollViewer) e ao controle Zoom Semântico. O Zoom Semântico é uma técnica otimizada para toque para apresentar e navegar em grandes conjuntos de dados ou conteúdo relacionados em uma única visualização. Ele funciona usando dois modos distintos de classificação, ou níveis de zoom. Isso é análogo ao movimento panorâmico e à rolagem em uma só visualização. A navegação panorâmica e a rolagem podem ser usadas em conjunto com o Zoom Semântico.

Use modos de exibição e eventos do aplicativo para modificar os comportamentos de movimento panorâmico/rolar e zoom. Isso pode proporcionar uma experiência interativa mais suave do que é possível por meio da manipulação de eventos de ponteiro e gesto.

Para saber mais sobre modos de exibição de aplicativo, veja Controles, layouts e texto.

Interações por toque personalizadas

Se você implementar seu próprio suporte de interação, os usuários esperam uma experiência intuitiva envolvendo interação direta com os elementos da interface do usuário em seu aplicativo. Recomendamos que você modele suas interações personalizadas nas bibliotecas de controle de plataforma para manter tudo consistente e detectável. Os controles nessas bibliotecas fornecem a experiência completa de interação do usuário, incluindo interações padrão, efeitos físicos animados, feedback visual e acessibilidade. Crie interações personalizadas somente se houver um requisito claro e bem definido e as interações básicas não oferecerem suporte ao seu cenário.

Importante

Windows 11 e mais recente

Algumas interações por touch com três e quatro dedos não funcionarão mais em aplicativos do Windows por padrão.

Por padrão, as interações por touch com três e quatro dedos agora são consumidas pelo sistema para operações como alternar ou minimizar janelas e alterar áreas de trabalho virtuais. Como essas interações agora são tratadas no nível do sistema, a funcionalidade do seu aplicativo pode ser afetada por essa alteração.

Para dar suporte a interações de três ou quatro dedos em um aplicativo, foi introduzida uma configuração de usuário que especifica se o sistema manipula ou não essas interações:

Dispositivos & Bluetooth > Touch > "Gestos de toque de três e quatro dedos"

Quando definido como "Ativado" (padrão), o sistema lida com todas as interações de três e quatro dedos (talvez os aplicativos não tenham suporte para elas).

Quando definido como "Desativado", pode haver suporte para as interações de três e quatro dedos em aplicativos (elas não serão processadas pelo sistema).

Se o aplicativo precisar dar suporte a essas interações, recomendamos que você informe os usuários sobre essa configuração e forneça um link que inicie as Configurações do Windows para a página relevante (ms-settings:devices-touch). Para obter mais detalhes, consulte Iniciar Configurações do Windows.

Para fornecer suporte a toque personalizado, você pode manipular vários eventos UIElement. Esses eventos são agrupados em três níveis de abstração.

  • Os eventos de gestos estáticos são disparados quando uma interação termina. Os eventos de gesto incluem Tapped, DoubleTapped, RightTapped e Holding.

    Você pode desabilitar eventos de gesto em elementos específicos definindo IsTapEnabled, IsDoubleTapEnabled, IsRightTapEnabled e IsHoldingEnabled como false.

  • Eventos de ponteiro como PointerPressed e PointerMoved fornecem detalhes de baixo nível para cada contato de toque, incluindo o movimento do ponteiro e a capacidade de distinguir eventos de pressionar e liberar.

    Um ponteiro é um tipo de entrada genérico, com um mecanismo de eventos unificado. Ele expõe informações básicas, como a posição da tela, na fonte de entrada ativa, que pode ser touch, touchpad, mouse ou caneta.

  • Eventos de gesto de manipulação, como ManipulationStarted, indicam uma interação contínua. Eles começam a disparar quando o usuário toca em um elemento e continuam até que o usuário levante o(s) dedo(s) ou a manipulação seja cancelada.

    Os eventos de manipulação incluem interações multitoque, como zoom, movimento panorâmico ou rotação, bem como interações que usam dados de inércia e velocidade, como arrastar. As informações fornecidas pelos eventos de manipulação não identificam a forma da interação que foi realizada, mas incluem dados como posição, delta de translação e velocidade. Você pode usar esses dados de touch para determinar o tipo de interação que deve ser executada.

Aqui está o conjunto básico de gestos de toque suportados pela UWP.

Nome Tipo Description
Toque Gesto estático Um dedo toca a tela e se levanta.
Pressionar e segurar Gesto estático Um dedo toca na tela e permanece no lugar.
Deslizar Gesto de manipulação Um ou mais dedos tocam a tela e se movem na mesma direção.
Swipe Gesto de manipulação Um ou mais dedos tocam a tela e se movem a uma curta distância na mesma direção.
Virar Gesto de manipulação Dois ou mais dedos tocam a tela e se movem em um arco no sentido horário ou anti-horário.
Pinçar Gesto de manipulação Dois ou mais dedos tocam a tela e se aproximam.
Alongar Gesto de manipulação Dois ou mais dedos tocam a tela e se afastam mais.

Eventos gestuais

Para obter detalhes sobre controles individuais, consulte Lista de controles.

Eventos de ponteiro

Os eventos de ponteiro são gerados por várias fontes de entrada ativas, como toque, touchpad, caneta e mouse, substituindo os eventos tradicionais do mouse.

Os eventos de ponteiro são baseados em um só ponto de entrada (dedo, ponta da caneta, cursor do mouse) e não oferecem suporte a interações baseadas em velocidade.

Aqui está uma lista de eventos de ponteiro e o respectivo argumento de evento relacionado.

Evento ou classe Description
PointerPressed Ocorre quando um só dedo toca na tela.
Liberação do Ponteiro Ocorre quando esse mesmo contato de touch é removido.
PointerMoved Ocorre quando o ponteiro é arrastado pela tela.
PointerEntered Ocorre quando um ponteiro entra na área de teste de colisão de um elemento.
PointerExited Ocorre quando um ponteiro sai da área de teste de clique de um elemento.
PointerCanceled Ocorre quando um toque é perdido de forma anormal.
PerdaDeCapturaDoPonteiro Ocorre quando uma captura de ponteiro é tomada por outro elemento.
PointerWheelChanged Ocorre quando o valor delta da roda do mouse muda e quando o touchpad é pinçado.
PointerRoutedEventArgs Fornece dados para todos os eventos de ponteiro.

O exemplo a seguir mostra como usar os eventos PointerPressed, PointerReleased e PointerExited para manipular uma interação por toque em um objeto Rectangle.

Primeiro, um retângulo chamado touchRectangle é criado em XAML (Extensible Application Markup Language).

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Name="touchRectangle"
           Height="100" Width="200" Fill="Blue" />
</Grid>

Em seguida, os ouvintes dos eventos PointerPressed, PointerReleased e PointerExited são especificados.

MainPage::MainPage()
{
    InitializeComponent();

    // Pointer event listeners.
    touchRectangle->PointerPressed += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerPressed);
    touchRectangle->PointerReleased += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerReleased);
    touchRectangle->PointerExited += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerExited);
}

public MainPage()
{
    this.InitializeComponent();

    // Pointer event listeners.
    touchRectangle.PointerPressed += touchRectangle_PointerPressed;
    touchRectangle.PointerReleased += touchRectangle_PointerReleased;
    touchRectangle.PointerExited += touchRectangle_PointerExited;
}

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Pointer event listeners.
    AddHandler touchRectangle.PointerPressed, AddressOf touchRectangle_PointerPressed
    AddHandler touchRectangle.PointerReleased, AddressOf Me.touchRectangle_PointerReleased
    AddHandler touchRectangle.PointerExited, AddressOf touchRectangle_PointerExited

End Sub

Por fim, o manipulador de eventos PointerPressed aumenta a Altura e a Largura do Retângulo, enquanto os manipuladores de eventos PointerReleased e PointerExited definem a Altura e a Largura de volta aos seus valores iniciais.

// Handler for pointer exited event.
void MainPage::touchRectangle_PointerExited(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Pointer moved outside Rectangle hit test area.
    // Reset the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 200;
        rect->Height = 100;
    }
}

// Handler for pointer released event.
void MainPage::touchRectangle_PointerReleased(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Reset the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 200;
        rect->Height = 100;
    }
}

// Handler for pointer pressed event.
void MainPage::touchRectangle_PointerPressed(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Change the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 250;
        rect->Height = 150;
    }
}

// Handler for pointer exited event.
private void touchRectangle_PointerExited(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Pointer moved outside Rectangle hit test area.
    // Reset the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}
// Handler for pointer released event.
private void touchRectangle_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Reset the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}

// Handler for pointer pressed event.
private void touchRectangle_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Change the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 250;
        rect.Height = 150;
    }
}

' Handler for pointer exited event.
Private Sub touchRectangle_PointerExited(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Pointer moved outside Rectangle hit test area.
    ' Reset the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 200
        rect.Height = 100
    End If
End Sub

' Handler for pointer released event.
Private Sub touchRectangle_PointerReleased(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Reset the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 200
        rect.Height = 100
    End If
End Sub

' Handler for pointer pressed event.
Private Sub touchRectangle_PointerPressed(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Change the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 250
        rect.Height = 150
    End If
End Sub

Eventos de manipulação

Use eventos de manipulação em seu aplicativo se precisar oferecer suporte a várias interações com os dedos ou que exijam dados de velocidade.

Você pode usar eventos de manipulação para detectar interações como arrastar, ampliar e segurar.

Observação

O touchpad não gera eventos de manipulação. Em vez disso, os eventos de ponteiro serão gerados para a entrada do touchpad.

Aqui está uma lista de eventos de manipulação e argumentos de evento relacionados.

Evento ou classe Description
Evento ManipulationStarting Ocorre quando o processador de manipulação é inicialmente criado.
Evento ManipulationStarted Ocorre quando um dispositivo de entrada começa uma manipulação no UIElement.
Evento ManipulationDelta Ocorre quando o dispositivo de entrada muda de posição durante uma manipulação.
Evento ManipulationInertiaStarting Ocorre quando o dispositivo de entrada perde o contato com o objeto UIElement durante uma manipulação e a inércia começa.
Evento ManipulationCompleted Ocorre quando uma manipulação e inércia no objeto UIElement são concluídas.
ManipulationStartingRoutedEventArgs Fornece dados para o evento ManipulationStarting.
ManipulationStartedRoutedEventArgs Fornece dados para o evento ManipulationStarted.
ManipulationDeltaRoutedEventArgs Fornece dados para o evento ManipulationDelta.
ManipulationInertiaStartingRoutedEventArgs Fornece dados para o evento ManipulationInertiaStarting.
ManipulationVelocities Descreve a velocidade à qual as manipulações ocorrem.
ManipulationCompletedRoutedEventArgs Fornece dados para o evento ManipulationCompleted.

Um gesto consiste em uma série de eventos de manipulação. Cada gesto começa com um evento ManipulationStarted, como quando um usuário toca na tela.

Em seguida, um ou mais eventos ManipulationDelta são acionados. Por exemplo, se você tocar na tela e depois arrastar o dedo pela tela. Por fim, um evento ManipulationCompleted é gerado quando a interação termina.

Observação

Se você não tiver um monitor de tela touch, poderá testar seu código de evento de manipulação no simulador usando uma interface de mouse e botão de rolagem do mouse.

O exemplo a seguir mostra como usar os eventos ManipulationDelta para lidar com uma interação de deslizar o dedo em um Retângulo e movê-lo pela tela.

Primeiro, um Retângulo chamado touchRectangle é criado em XAML com uma Altura e uma Largura de 200.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Name="touchRectangle"
               Width="200" Height="200" Fill="Blue" 
               ManipulationMode="All"/>
</Grid>

Em seguida, um TranslateTransform global chamado dragTranslation é criado para traduzir o Retângulo. Um ouvinte de eventos ManipulationDelta é especificado no Retângulo e dragTranslation é adicionado à RenderTransform do Retângulo.

// Global translation transform used for changing the position of 
// the Rectangle based on input data from the touch contact.
Windows::UI::Xaml::Media::TranslateTransform^ dragTranslation;

// Global translation transform used for changing the position of 
// the Rectangle based on input data from the touch contact.
private TranslateTransform dragTranslation;

' Global translation transform used for changing the position of 
' the Rectangle based on input data from the touch contact.
Private dragTranslation As TranslateTransform

MainPage::MainPage()
{
    InitializeComponent();

    // Listener for the ManipulationDelta event.
    touchRectangle->ManipulationDelta += 
        ref new ManipulationDeltaEventHandler(
            this, 
            &MainPage::touchRectangle_ManipulationDelta);
    // New translation transform populated in 
    // the ManipulationDelta handler.
    dragTranslation = ref new TranslateTransform();
    // Apply the translation to the Rectangle.
    touchRectangle->RenderTransform = dragTranslation;
}

public MainPage()
{
    this.InitializeComponent();

    // Listener for the ManipulationDelta event.
    touchRectangle.ManipulationDelta += touchRectangle_ManipulationDelta;
    // New translation transform populated in 
    // the ManipulationDelta handler.
    dragTranslation = new TranslateTransform();
    // Apply the translation to the Rectangle.
    touchRectangle.RenderTransform = this.dragTranslation;
}

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Listener for the ManipulationDelta event.
    AddHandler touchRectangle.ManipulationDelta,
        AddressOf testRectangle_ManipulationDelta
    ' New translation transform populated in 
    ' the ManipulationDelta handler.
    dragTranslation = New TranslateTransform()
    ' Apply the translation to the Rectangle.
    touchRectangle.RenderTransform = dragTranslation

End Sub

Por fim, no manipulador de eventos ManipulationDelta, a posição do Retângulo é atualizada usando a TranslateTransform na propriedade Delta.

// Handler for the ManipulationDelta event.
// ManipulationDelta data is loaded into the
// translation transform and applied to the Rectangle.
void MainPage::touchRectangle_ManipulationDelta(Object^ sender,
    ManipulationDeltaRoutedEventArgs^ e)
{
    // Move the rectangle.
    dragTranslation->X += e->Delta.Translation.X;
    dragTranslation->Y += e->Delta.Translation.Y;
    
}

// Handler for the ManipulationDelta event.
// ManipulationDelta data is loaded into the
// translation transform and applied to the Rectangle.
void touchRectangle_ManipulationDelta(object sender,
    ManipulationDeltaRoutedEventArgs e)
{
    // Move the rectangle.
    dragTranslation.X += e.Delta.Translation.X;
    dragTranslation.Y += e.Delta.Translation.Y;
}

' Handler for the ManipulationDelta event.
' ManipulationDelta data Is loaded into the
' translation transform And applied to the Rectangle.
Private Sub testRectangle_ManipulationDelta(
    sender As Object,
    e As ManipulationDeltaRoutedEventArgs)

    ' Move the rectangle.
    dragTranslation.X = (dragTranslation.X + e.Delta.Translation.X)
    dragTranslation.Y = (dragTranslation.Y + e.Delta.Translation.Y)

End Sub

Eventos roteados

Todos os eventos de ponteiro, eventos de gesto e eventos de manipulação mencionados aqui são implementados como eventos roteados. Isso significa que o evento pode ser manipulado por objetos diferentes daquele que gerou o evento originalmente. Os pais sucessivos em uma árvore de objetos, como os contêineres pai de um UIElement ou a Página raiz do seu aplicativo, podem optar por manipular esses eventos mesmo que o elemento original não o faça. Por outro lado, qualquer objeto que manipule o evento pode marcar o evento manipulado para que ele não atinja mais nenhum elemento pai. Para obter mais informações sobre o conceito de evento roteado e como ele afeta como você escreve manipuladores para eventos roteados, consulte Visão geral de eventos e eventos roteados.

Importante

Se você precisar manipular eventos de ponteiro para um UIElement em uma exibição rolável (como um ScrollViewer ou ListView), precisará desabilitar explicitamente o suporte para eventos de manipulação no elemento na exibição chamando UIElement.CancelDirectmanipulation(). Para reabilitar os eventos de manipulação na exibição, chame UIElement.TryStartDirectManipulation().

O que fazer e o que não fazer

  • Projete aplicativos com interação por touch como o principal método de entrada esperado.
  • Forneça feedback visual para interações de todos os tipos (toque, caneta, stylus, mouse, etc.)
  • Otimização do direcionamento ajustando o tamanho do alvo de toque, a geometria do contato, a navegação e o balançar.
  • Otimize a precisão através do uso de pontos de fixação e "trilhos" direcionais.
  • Forneça dicas de ferramentas e controles para ajudar a melhorar a precisão de toque para itens de interface do usuário bem compactados.
  • Não use interações cronometradas sempre que possível (exemplo de uso apropriado: tocar e segurar).
  • Não use o número de dedos usado para distinguir a manipulação sempre que possível.

Samples

Exemplos de arquivos

  • Last updated on