Guia de início rápido: entrada por toque (XAML)

Applies to Windows and Windows Phone

Os dispositivos costumam ter telas multitoque que permitem que os usuários usem vários dedos simultaneamente para produzirem diferentes interações de entrada, como tocar, arrastar ou apertar. O Tempo de Execução do Windows tem diversos mecanismos diferentes para manipulação de entrada por toque, permitindo criar uma experiência imersiva que os usuários podem explorar com confiança. Este Guia de início rápido aborda as noções básicas do uso da entrada por toque em um aplicativo do Tempo de Execução do Windows em C++, C# ou Visual Basic. Para obter mais exemplos de código, consulte Exemplo de entrada.

Se você for iniciante no desenvolvimento de aplicativos do Tempo de Execução do Windows em C++, C# ou Visual Basic:  Leia estes tópicos para se familiarizar com as tecnologias discutidas aqui.

Criar seu primeiro aplicativo da Windows Store em C# ou Visual Basic

Criar seu primeiro aplicativo da Windows Store em C++

Mapa de aplicativos do Tempo de Execução do Windows em C# ou Visual Basic

Mapa de aplicativos do Tempo de Execução do Windows em C++

Saiba mais sobre eventos em Visão geral de eventos e eventos roteados

Recursos de aplicativos, do início ao fim:  Explore essa funcionalidade mais profundamente como parte da nossa série Recursos de aplicativos, do início ao fim

Interação do usuário, do início ao fim (XAML)

Personalização da interação do usuário, do início ao fim (XAML)

Diretrizes de experiência do usuário:  

As bibliotecas de controle de plataforma ( (HTML e XAML) fornecem a experiência de total interação do usuário, incluindo interações padrão, efeitos físicos animados e comentários visuais. Se não precisar de suporte para interação personalizada, use esses controles internos.

Se os controles de plataforma não forem suficientes, as seguintes diretrizes para interação do usuário podem ajudá-lo a proporcionar uma experiência de interação envolvente e imersiva, consistente entre os modos de entrada. Essas diretrizes têm como foco principal a entrada por toque, mas elas ainda são relevante para entrada por touchpad, mouse, teclado e caneta.

Exemplos:  Veja esta funcionalidade em ação em nossos Exemplos de aplicativos da Windows Store.

Entrada: exemplo de eventos de entrada do usuário XAML

Entrada: exemplo de recursos de dispositivo

Entrada: amostra de manipulações e gestos (C++)

Entrada: exemplo de teste de hit de toque

Exemplo de rolagem, movimento panorâmico e aplicação de zoom em XAML

Pré-requisitos

Nós supomos que você possa criar um aplicativo do Tempo de Execução do Windows básico em C++, C# ou Visual Basic.

Para completar este tutorial, você precisa:

Diretrizes de experiência do usuário (melhores práticas)

As bibliotecas de controle de plataforma (HTML e XAML) fornecem a experiência de total interação do usuário, incluindo interações padrão, efeitos físicos animados e comentários visuais. Se não precisar de suporte para interação personalizada, use esses controles internos.

Se os controles de plataforma não forem suficientes, as seguintes diretrizes para interação do usuário podem ajudá-lo a proporcionar uma experiência de interação envolvente e imersiva, consistente entre os modos de entrada. Essas diretrizes têm como foco principal a entrada por toque, mas elas ainda são relevante para entrada por touchpad, mouse, teclado e caneta.

Introdução à entrada por toque

Muitos dispositivos usam o toque para a maioria das entradas do usuário. Telas multitoque permitem que os usuários interajam com o dispositivo de formas naturais. A adição de suporte a toque e a interação aos seus aplicativos pode melhorar muito a experiência do usuário. Contudo, você deve desenvolver o seu suporte ao toque cuidadosamente para garantir que os seus usuários conseguirão explorar o seu aplicativo com confiança. Além disso, você também deve se certificar de que o seu aplicativo acomoda entrada tradicional com mouse e teclado mesmo que seja otimizado para toque.

Há vários métodos diferentes para manipulação de entrada por toque no seu aplicativo do Tempo de Execução do Windows em C++, C# ou Visual Basic. A biblioteca de controles incorporados oferecem suporte a toque padrão usando interações, efeitos físicos animados e feedback visual padronizados.

Caso você não precise de suporte a toque personalizado, você pode usar o padrão fornecido pela estrutura e seguir algumas diretrizes simples para otimização de toque, descritas mais adiantes neste Guia de início rápido.

Você pode implementar o seu próprio suporte a toque e interação, mas tenha em mente que os usuários esperam uma interação direta e envolvente com os elementos do seu aplicativo. Você deve modelar o seu suporte a toque padrão no suporte incorporado para manter as coisas simples e detectáveis. Além disso, você deve fornecer feedback visual imediato a todas as interações para evitar incertezas do usuário e encorajar a exploração.

Para dar suporte toque personalizado, você pode manipular eventos de UIElement que são agrupados em três diferentes níveis de abstração. Eventos de alto nível como Tapped permitem-lhe responder a interações simples. Eventos de ponteiro oferecem menor nível de detalhes, como o movimento do ponteiro e distinguir impressora e liberar gestos. Eventos de manipulação oferecem até mesmo detalhes de baixo nível, como a velocidade de gestos e dados de inércia e multitoque. Estes eventos automaticamente suportam tanto toque como entrada do mouse, e também fornece informação para que você possa distinguir o dispositivo de entrada real, se necessário.

Gestos

Interações são uma maneira de alto nível de interpretar dados de entrada por toque em um conjunto de movimentos comuns como tocar, arrastar e pinçar. Alguns gestos comuns usados no Windows 8 são:

InteraçãoDescrição
ToqueUm dedo encosta na tela e levanta.
Pressionar e manterUm dedo encosta na tela e permanece imóvel.
DeslizarUm ou mais dedos tocam na tela e se movem na mesma direção.
Passar o dedoUm ou mais dedos tocam a tela e movem-se por uma curta distância na mesma direção.
PinçarDois ou mais dedos tocam na tela e se afastam ou aproximam um do outro.
GirarDois ou mais dedos tocam na tela e se movem em um arco no sentido horário ou anti-horário.
Ampliar Dois ou mais dedos tocam a tela e distanciam-se.

 

Você pode responder a um simples toque e gestos do mouse, manipulando eventos de alto nível, como Tapped, DoubleTapped, RightTapped e Holding. Você também pode desabilitar esses gestos para determinados elementos definindo IsTapEnabled, IsDoubleTapEnabled, IsRightTapEnabled e IsHoldingEnabled como false.

Os eventos de ponteiro como PointerMoved podem ser usados para dar suporte a interações simples com um dedo como deslizamentos.

Para interações multitoque como pinçar e interações que usam dados de inércia e velocidade como arrastar, você deve usar os eventos de manipulação. As informações fornecidas pelos eventos de manipulação não consistem em como a interação foi realizada, mas em dados de toque como posição, delta de translação e velocidade. Você pode usar esses dados de toque para determinar o tipo de interação que foi realizado. Contudo, é sua responsabilidade converter essas informações na interação equivalente.

Usando eventos de ponteiro

Eventos de ponteiro automaticamente suportam toque e entrada do mouse, e substituem eventos de mouse mais tradicionais.

Eventos de ponteiro são limitados a interações com um único dedo como, por exemplo, toque e deslizamento, e não suportam interações baseadas em velocidade. Toques com um único dedo na tela são convertidos em um ponteiro equivalente do Tempo de Execução do Windows como PointerPressed quando você coloca o dedo na tela, PointerReleased quando você levanta o seu dedo e PointerMoved quando você arrasta o seu dedo pela tela. Outros eventos de ponteiro usados por um aplicativo do Tempo de Execução do Windows em C++, C# ou Visual Basic são PointerExited e PointerEntered. Os argumentos de eventos para os eventos de ponteiro são PointerRoutedEventArgs.

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

Primeiro, um Rectangle nomeado TestRectangle é criado em XAML e manipuladores de eventos são adicionados aos eventos PointerPressed, PointerReleased e PointerExited.



<Rectangle Name="TestRectangle"
  Height="100" Width="200" Fill="Blue"
  PointerPressed="TestRectangle_PointerPressed"
  PointerReleased="TestRectangle_PointerReleased"
  PointerExited="TestRectangle_PointerExited" />

Em seguida, são criados os manipuladores de eventos para os eventos de ponteiro. O manipulador de eventos PointerPressed aumenta a Height e a Width do Rectangle. O manipulador de eventos PointerReleased define a Height e a Width de volta a seus valores iniciais. Finalmente, o manipulador de eventos PointerExited também define a Height e a Width de volta para seus valores iniciais.



private void TestRectangle_PointerPressed(object sender, 
    PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

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

private void TestRectangle_PointerReleased(object sender, 
    PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

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

private void TestRectangle_PointerExited(object sender, 
    PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Finger moved out of Rectangle before the pointer exited event
    // Reset the dimensions on the Rectangle
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}

Usando eventos de manipulação

Se você precisa de suporte a interações com vários dedos no seu aplicativo, ou de interações que usam dados de velocidade, você terá que usar os eventos de manipulação. Você pode usar eventos de manipulação para detectar interações como arrastar, pinçar e pressionar. Aqui está uma lista dos eventos de manipulação e tipos relacionados para aplicativos do Tempo de Execução do Windows em C++, C# ou Visual Basic.

Evento ou classeDescrição
ManipulationStarting event Ocorre quando o processador de manipulação é criado.
ManipulationStarted event Ocorre quando um dispositivo de entrada inicia uma manipulação no UIElement.
ManipulationDelta event Ocorre quando o dispositivo de entrada muda de posição durante a manipulação.
ManipulationInertiaStarting event Ocorre quando o dispositivo de entrada perde contato com o objeto UIElement durante a manipulação e a inércia começa.
ManipulationCompleted event Ocorre quando uma manipulação e inércia no UIElement são concluídas.
ManipulationStartingRoutedEventArgs Fornece dados ao evento ManipulationStarting.
ManipulationStartedRoutedEventArgs Fornece dados ao evento ManipulationStarted.
ManipulationDeltaRoutedEventArgs Fornece dados ao evento ManipulationDelta.
ManipulationInertiaStartingRoutedEventArgs Fornece dados ao evento ManipulationInertiaStarting.
ManipulationVelocities Descreve a velocidade de ocorrência de manipuladores.
ManipulationCompletedRoutedEventArgs Fornece dados ao 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 a tela. Em seguida, um ou mais eventos ManipulationDelta são disparados. Por exemplo, se você toca a tela e, então, arrasta o seu dedo ao longo da tela, um número de eventos ManipulationDelta é disparado. Finalmente, um evento ManipulationCompleted é acionado quando a interação é concluída.

Observação  Caso você não possua um monitor com tela sensível ao toque, você pode testar o código de eventos de manipulação no simulador usando uma interface com o mouse e a roda do mouse.

O exemplo a seguir mostra como usar os eventos ManipulationDelta para manipular uma interação de arrastar. A amostra cria um Rectangle que pode ser arrastado pela tela.

Primeiro, um Rectangle nomeado TestRectangle é criado em XAML com uma Height e uma Width de 200.



<Rectangle Name="TestRectangle"
  Width="200" Height="200" Fill="Blue" 
  ManipulationMode="All"/>

Em seguida, uma TranslateTransform global nomeada dragTranslation é criada para mover o Rectangle. Um manipulador de eventos é adicionado ao Rectangle para manipular o evento ManipulationDelta, e dragTranslation é adicionada à RenderTransform do Rectangle. Finalmente, no manipulador de eventos ManipulationDelta, a posição do Rectangle é atualizada usando a TranslateTransform na propriedade Delta.



// Global Transform used to change the position of the Rectangle.
private TranslateTransform dragTranslation;

// Constructor
public MainPage()
{
    InitializeComponent();

    // Add handler for the ManipulationDelta event
    TestRectangle.ManipulationDelta += Drag_ManipulationDelta;
    dragTranslation = new TranslateTransform();
    TestRectangle.RenderTransform = this.dragTranslation;
}

void Drag_ManipulationDelta(object sender, 
    ManipulationDeltaRoutedEventArgs e)
{
    // Move the rectangle.
    dragTranslation.X += e.Delta.Translation.X;
    dragTranslation.Y += e.Delta.Translation.Y;
}

Design da interface do usuário e entrada por toque

Se você implementar seu próprio suporte para interação, tenha em mente que os usuários esperam uma experiência intuitiva que envolva a interação direta com os elementos de interface do usuário do seu aplicativo. Recomendamos que você modele as interações personalizadas nas bibliotecas de controles de plataforma (HTML e XAML) para manter tudo consistente e detectável. Os controles nessas bibliotecas fornecem a experiência de interação completa para o usuário, incluindo interações padrão, efeitos físicos animados, comentários visuais e acessibilidade. Crie interações personalizadas somente se houver uma exigência clara e bem definida e se nenhuma das interações básicas for permitida no seu cenário.

O design da sua interface do usuário pode influenciar a facilidade do uso do seu aplicativo com entrada por toque. Para garantir que o seu aplicativo está otimizado para entrada por toque, siga estas diretrizes:

  • Certifique-se de acomodar a diferença de tamanho que há entre o ponteiro do mouse e as pontas dos dedos. O toque exige elementos de IU maiores para garantir a precisão e impedir que as pontas dos dedos ocultem informações importantes.
  • Sempre forneça feedback imediato, direto e visual para interações por toque. Por exemplo, você pode usar realce ou dicas de ferramentas para indicar o destino atual do toque e impedir a ativação acidental de outros destinos.
  • Use efeitos físicos tais como aceleração e inércia para dar um aspecto natural a interações como, por exemplo, movimento panorâmico.
  • Use pontos de ajuste e outras restrições para ajudar a guiar os usuários aos estados mais úteis.

Para diretrizes adicionais de design da experiência do usuário relacionadas ao toque, consulte Diretrizes para interação do usuário.

Eventos roteados

Todos os eventos de ponteiro, de gesto e de manipulação mencionados aqui são implementados como eventos roteados. Isso significa que o evento provavelmente pode ser manipulado por objetos que não sejam o que originalmente disparou o evento. Pais sucessivos em uma árvore de objetos, como os contêineres pai de um elemento da interface do usuário ou Page raiz, podem optar por manipular esses eventos mesmo que o elemento original não faça isso. Reciprocamente, qualquer objeto que manipule o evento pode marcar o evento como manipulado para que ele não atinja mais nenhum elemento pai. Para saber mais sobre o conceito de evento roteado e como ele influencia na forma como você grava os manipuladores para eventos roteados, veja Visão geral de eventos e eventos roteados.

Tópicos relacionados

Desenvolvedores
Respondendo à interação do usuário
Desenvolvendo aplicativos do Tempo de Execução do Windows (XAML)
Guia de início rápido: entrada por toque
Designers
Design de interação por toque

 

 

Mostrar:
© 2014 Microsoft