Idioma: HTML | XAML

Respondendo à interação do usuário (XAML)

Applies to Windows and Windows Phone

Saiba mais sobre a plataforma de interação do usuário, as fontes de entrada (incluindo toque, touchpad, mouse, caneta e teclado), modos (teclado sensível ao toque, esfera do mouse, apagador de caneta e assim por diante), e as interações do usuário suportadas.

Explicamos como a funcionalidade básica de interação e entrada é fornecida gratuitamente, como personalizar a experiência de interação do usuário e como os padrões de interação são compartilhados entre estruturas linguísticas.

Usando as diretrizes, práticas recomendadas e exemplos, nós lhe mostramos como tirar total proveito das funcionalidades de interação para criar aplicativos com experiências do usuário intuitivas, envolventes e imersivas.

Dica  As informações deste tópico são específicas para o desenvolvimento de aplicativos usando C++, C# ou Visual Basic.

Veja Respondendo à interação do usuário (HTML) para aplicativos usando JavaScript.

Veja Respondendo à interação do usuário (DirectX e C++) para aplicativos que usam DirectX com C++.

Pré-requisitos:  Se você for novo no desenvolvimento de aplicativos, veja esses tópicos para se familiarizar com as tecnologias discutidas aqui.

Crie seu primeiro aplicativo da Windows Store que usa C# ou Visual Basic

Crie seu primeiro aplicativo da Windows Store que usa C++

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

Roteiro para aplicativos da Windows Store que usam C++

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

Recursos de aplicativos, do início ao fim:  Explore esse recurso mais profundamente como parte da nossa série sobre Recursos para 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 do Windows, incluindo interações padrão, efeitos físicos animados e comentário visual. Se não precisar de suporte para interação personalizada, use esses controles internos.

Se os controles de plataforma não forem suficientes, as diretrizes a seguir 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 relevantes para entrada por touchpad, mouse, teclado e de caneta.

Exemplos:  Veja essa funcionalidade em ação em nossos exemplos de aplicativos.

Entrada: exemplo de recursos de dispositivo

Exemplo de entrada

Entrada: gestos e manipulações com o GestureRecognizer

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

Entrada: exemplo de tinta

Visão geral da plataforma de interação do usuário

Crie os seus aplicativos com interações de toque em mente: o toque é suportado por um número cada vez mais amplo e variado de dispositivos e as interações de toque são um aspecto fundamental da experiência do usuário.

Como o toque é uma forma primária de interação para os usuários, o Windows 8 e o Windows Phone são otimizados para a entrada de toque para torná-lo responsivo, preciso e fácil de usar. E não se preocupe, os modos de entrada (como mouse, caneta e teclado) são totalmente compatíveis e funcionalmente consistentes com o recurso de toque (veja Gestos, manipulações e interações). A velocidade, precisão e comentário tátil que os modos de entrada tradicionais oferecem são conhecidas e atraentes para muitos usuários. Essas experiências de interação exclusivas e diferenciadas não foram comprometidas.

A incorporação de interações por toque ao design dos seus aplicativos pode aprimorar dramaticamente a experiência do usuário. Seja criativo com o projeto dessa experiência, dê suporte à mais ampla gama de recursos e preferências, atraia o público mais amplo possível e atraia mais clientes para o seu aplicativo.

A plataforma de interação do usuário é baseada em camadas de funcionalidade que adicionam progressivamente flexibilidade e eficiência:

Controles incorporados

Aproveite as vantagens dos controles internos fornecidos pelas estruturas de linguagem para oferecer uma experiência completa de interação do usuário da plataforma. Essa funcionalidade funciona bem para a maioria dos aplicativos.

Os controles internos foram totalmente projetados para serem otimizados para toque e, ao mesmo tempo, fornecer experiências de interação consistentes e envolventes em todos os modos de entrada. Eles suportam um conjunto abrangente de gestos (pressione e segure, tocar, deslizar, percorrer, recolher, ampliar, girar), que, juntamente com manipulações diretas (movimento panorâmico, zoom, girar, arrastar) e comportamento de inércia realista, permitem uma experiência de interação atraente e envolvente que segue as práticas recomendadas de forma consistente em toda a plataforma Windows.

Para obter mais informações sobre as bibliotecas de controle, veja Adicionando controles e conteúdo (aplicativos da Windows Store que usam C#/VB/C++ e XAML).

Exibições

Ajuste a experiência de interação do usuário através das configurações de movimento panorâmico/rolagem e zoom dos modos de exibição do aplicativo. O modo de exibição do aplicativo indica como o usuário acessa e manipula o aplicativo e seu conteúdo. Exibições também fornecem comportamentos, como a inércia, o salto de limite de conteúdo e pontos de ajuste.

As configurações de movimento panorâmico/rolagem controlam a maneira como os usuários navegam em um único modo de exibição (como a página de uma revista ou livro, a estrutura de pastas de um computador, uma biblioteca de documentos ou um álbum de fotos) quando o conteúdo do modo de exibição não se adapta ao visor.

  • Applies to Windows

As configurações de zoom referem-se ao zoom ótico e ao controle SemanticZoom. O Zoom Semântico é uma técnica otimizada para toque de apresentar e navegar em grandes conjuntos de dados ou conteúdo relacionados em um único modo de exibição usando dois modos distintos de classificação (ou níveis de zoom). Essa funcionalidade é análoga ao movimento panorâmico e à rolagem (que podem ser usados junto com o Zoom Semântico) em um único modo de exibição.

O uso de modos de exibição de aplicativo para modificar os comportamentos de movimento panorâmico/rolagem e zoom pode proporcionar uma experiência de interação mais eficaz do que a resultante de eventos de ponteiro e gesto, conforme descrito posteriormente.

Para saber mais sobre modos de exibição de aplicativos, veja Definindo layouts e modos de exibição.

Para saber mais sobre zoom, veja Diretrizes de zoom ótimo e redimensionamento ou Diretrizes de zoom semântico.

Para saber mais sobre movimento panorâmico/rolagem, veja Diretrizes para movimento panorâmico.

Eventos de ponteiro, gesto e manipulação

Um ponteiro é um tipo genérico de entrada com um mecanismo de eventos unificado, que expõe informações básicas (como, por exemplo, posição na tela) na fonte de entrada ativa (toque, touchpad, mouse ou caneta). Os gestos variam desde interações estáticas simples, como toque, até manipulações mais complexas, como zoom, movimento panorâmico e rotação. Para saber mais detalhes, veja Gestos, manipulações e interações.

Observação  

Os eventos de gesto estático são acionados depois que uma interação é concluída. Os eventos de gestos de manipulação indicam uma interação contínua. Os eventos de gesto de manipulação começam a acionar quando o usuário toque no elemento e continua até o usuário retirar o dedo ou a manipulação ser cancelada.

O acesso aos eventos de ponteiro e gesto permitem que você use o Design de interação de toque com idioma para jogos, controles personalizados e comentário visual, gestos de extensão, processamento de dados brutos de entrada e outras interações personalizadas.

Eventos de ponteiro

Os eventos a seguir correspondem a gestos de nível mais baixo. Eventos neste nível são semelhantes a eventos tradicionais de entrada por mouse, mas fornecem mais informações sobre o gesto e o dispositivo de entrada do usuário.

EventoDescrição
PointerCaptureLost Ocorre quando um elemento perde contato com o ponteiro.
PointerEntered Ocorre após o ponteiro entrar nos limites de um elemento.
PointerExited Ocorre após o ponteiro sair dos limites de um elemento.
PointerMoved Ocorre quando o ponteiro se move dentro dos limites de um elemento.
PointerPressed Ocorre quando há um gesto de pressionar dentro dos limites de um elemento.
PointerReleased Ocorre quando há um gesto de soltar dentro dos limites de um elemento.
PointerWheelChanged Ocorre quando o usuário muda a posição da roda do mouse.

 

Usando PointerRoutedEventArgs

Todos os eventos de ponteiro usam PointerRoutedEventArgs para dados de evento. Além das conhecidas propriedades Handled e OriginalSource, esta classe fornece os seguintes membros:

MembroDescrição
Pointer property Obtém um objeto Pointer que identifica o dispositivo de entrada e o tipo de dispositivo.
GetCurrentPoint method Obtém um objeto PointerPoint que fornece informações amplas sobre a localização do ponteiro e o estado do dispositivo no momento do evento.
GetIntermediatePoints method Obtém uma lista de objetos PointerPoint que representam as localizações e os estados de dispositivo do ponteiro entre os eventos de entrada atuais e anteriores. Isso é útil para determinar se uma série de ações de ponteiro representa um gesto mais complexo.
KeyModifiers property Indica se uma tecla modificadora como CTRL ou Shift é pressionada ao mesmo tempo do evento de ponteiro.

 

Captura do ponteiro

Em alguns casos, você quer que um elemento continue recebendo eventos PointerMoved inclusive quando o ponteiro não está mais acima do elemento. Esse recurso é chamado de captura de ponteiro. Ele é útil, por exemplo, quando o usuário executa uma operação de arrastar que não deveria ser interrompida simplesmente porque o usuário temporariamente move o ponteiro para fora dos limites de um elemento. Quando um elemento tem captura de ponteiro, o evento PointerMoved não ocorre para nenhum outro elemento sobre o qual o ponteiro se move.

Você pode usar os métodos CapturePointer, ReleasePointerCapture e ReleasePointerCaptures para habilitar ou desabilitar a captura de ponteiro. Isso funciona até com vários dispositivos de entrada ou pontos de toque. Enquanto a captura de ponteiro está ativa, você pode usar a propriedade PointerCaptures para recuperar objetos Pointer que representam cada ponteiro capturado.

A captura de ponteiro exige que o botão esquerdo do mouse, o dedo ou o botão da caneta sejam mantidos pressionados durante o movimento. Assim que o botão for solto ou o dedo for levantado, a captura de ponteiro será perdida, e o evento PointerCaptureLost ocorrerá.

Eventos de gesto

Os eventos a seguir correspondem a gestos de alto nível. Esses eventos ocorrem além dos eventos de nível mais baixo que ocorrem para as mesmas ações do usuário. Por exemplo, o evento Tapped ocorre depois dos eventos PointerPressed e PointerReleased. Em geral, você deve usar um dos eventos de nível mais alto, a menos que precise responder a uma parte específica do gesto. Por exemplo, talvez seja necessário executar diferentes ações para pressionar e soltar.

EventoDescrição
Tapped Ocorre ao clicar ou tocar em um elemento, a menos que sua propriedade IsTapEnabled seja definida como false.
RightTapped Ocorre ao clicar com o botão direito do mouse em um elemento ou após um evento Holding, a menos que a propriedade IsRightTapEnabled do elemento seja definida como false.
DoubleTapped Ocorre ao clicar ou tocar duas vezes seguidas em um elemento, a menos que sua propriedade IsDoubleTapEnabled seja definida como false.
Holding Ocorre ao pressionar e manter pressionado o ponteiro em um elemento, a menos que a propriedade IsHoldingEnabled do elemento seja definida como false. Esse evento não ocorre para entrada por mouse. Para entrada por mouse equivalente, use RightTapped.

 

Cada um desses eventos tem seu próprio tipo de argumentos de evento, mas todos compartilham alguns membros comuns. Em um manipulador desses eventos, você pode determinar se a entrada veio por mouse, toque ou caneta verificando a propriedade PointerDeviceType do argumento do evento. Também pode determinar as coordenadas do evento em relação à tela ou a um elemento especificado chamando o método GetPosition do argumento do evento.

Eventos de manipulação

Os eventos a seguir correspondem a gestos de nível mais baixo ainda. Eventos neste nível fornecem o máximo de informações sobre o gesto de entrada do usuário.

EventoDescrição
ManipulationStarting Ocorre quando o processador de manipulação é criado.
ManipulationStarted Ocorre quando um dispositivo de entrada inicia uma manipulação no UIElement.
ManipulationDelta Ocorre quando o dispositivo de entrada muda de posição durante a manipulação.
ManipulationInertiaStarting Ocorre quando o dispositivo de entrada perde contato com o objeto UIElement durante a manipulação e a inércia começa.
ManipulationCompleted Ocorre quando uma manipulação e inércia no UIElement são concluídas.

 

Como sugerem os nomes, esses eventos são adequados para usar entrada por mouse, toque e caneta para manipular elementos em sua interface do usuário. Por exemplo, você pode usar esses eventos para permitir que os usuários arrastem elementos ao redor da tela e para proporcionar efeitos inerciais realistas. As várias classes de argumento de evento fornecem informações detalhadas sobre posição, alteração e velocidade do ponteiro, além de propriedades comuns como PointerDeviceType, Handled e OriginalSource.

Para obter um exemplo simples sobre como usar os eventos de manipulação, veja Início rápido: Entrada por toque.

Teste de hit

Quando um gesto de entrada do usuário ocorre sobre um UIElement, os eventos correspondentes ocorrem para esse elemento somente se ele está visível para a entrada. Caso contrário, o gesto passa pelo elemento em direção a quaisquer elementos subjacentes ou elementos pai na árvore visual.

Determinar se um elemento está visível para a entrada por mouse, toque e caneta é chamado de teste de hit. Há vários fatores que influenciam o teste de hit, mas é possível determinar se um determinado elemento pode emitir eventos de entrada verificando sua propriedade IsHitTestVisible. Essa propriedade retorna true somente se o elemento atende aos seguintes critérios:

  • Seu valor de propriedade Visibility é Visible.
  • Seu valor de propriedade Background ou Fill não é null (Nothing no Visual Basic), o que resulta em transparência e invisibilidade do teste de hit. Para tornar um elemento transparente e passível de teste de hit, verifique se a propriedade relevante está definida como Transparent em vez de null.
  • Se o elemento for um controle, seu valor de propriedade IsEnabled será true.

Alguns controles têm regras especiais para teste de hit. Por exemplo, TextBlock e controles relacionados não têm nenhuma propriedade Background, mas ainda assim são passíveis de teste de hit em toda a região de sua área de layout. Os controles Image e MediaElement são passíveis de teste de hit sobre seu retângulo definido, independentemente do conteúdo transparente. Além disso, a maioria das classes Panel não é passível de teste de hit, mas ainda assim pode manipular eventos de entrada do usuário roteados dos elementos que eles contêm.

Você pode determinar quais elementos estão localizados na mesma posição de um evento de entrada do usuário, independentemente de se os elementos são passíveis de teste de hit. Para fazer isso, chame o método FindElementsInHostCoordinates. Como o nome sugere, esse método localiza os elementos em um local em relação a um elemento host especificado. Entretanto, esteja ciente de que as transformações aplicadas e as alterações de layout podem influenciar o sistema de coordenadas de um elemento e, portanto, influenciar quais elementos são encontrados em um determinado local.

Personalizar sua experiência no aplicativos

Para personalizar e controlar ainda mais a experiência de interação do aplicativo, use as APIs da plataforma de Tempo de Execução do Windows. Por exemplo, você pode desejar manipular opções de configuração adicionais e recursos de hardware como dispositivos de mouse com um botão correto, botão de roda, roda de inclinação ou botões X e dispositivos de caneta com botões de botões do cilindro e pontas de borracha.

A maioria das APIs de interação estão nos namespaces Windows.UI.Xaml e Windows.UI.Xaml.Input, com a funcionalidade de ink exposta por meio do Windows.UI.Input.Inking e dados de dispositivo de entrada expostos por meio do Windows.Devices.Input.

Antes de fornecer experiências de interação personalizadas por meio de manipulações e gestos novos ou modificados, leve o seguinte em consideração:

  • Um gesto existente fornece a experiência que o seu aplicativo precisa? Não forneça um gesto personalizado para zoom ou movimento panorâmico quando você puder simplesmente adaptar seu aplicativo para dar suporte ou interpretar um gesto existente.
  • O gesto personalizado ocasiona uma possível inconsistência entre os aplicativos?
  • O gesto requer suporte específico de hardware, como número de contatos?
  • Há um controle (como ScrollViewer) que proporciona a experiência de interação que você precisa? Se um controle puder manipular intrinsecamente a entrada do usuário, é realmente necessário personalizar um gesto ou manipulação?
  • Seu gesto ou manipulação personalizado resulta em uma experiência de interação eficaz e natural?
  • A experiência de interação faz sentido? Se a interação depender de coisas como o número de contatos, velocidade, tempo (não recomendado) e inércia, certifique-se de que essas restrições e dependências sejam consistentes e detectáveis. Por exemplo, a forma como os usuários interpretam movimentos rápidos e lentos pode influenciar diretamente a funcionalidade do seu aplicativo e a satisfação dos usuários em relação à experiência.
  • O gesto ou manipulação é afetado pelas características físicas do seu usuário? Ele é acessível?
  • Um comando da barra de aplicativos ou algum outro comando de IU será suficiente?

Resumindo, crie gestos e manipulações personalizados apenas se houver uma necessidade clara e bem definida e se nenhum gesto básico der suporte ao seu cenário.

Tópicos relacionados

Conceitual
Desenvolvendo aplicativos da Windows Store (VB/C#/C++ e XAML)
Design de interação por toque

 

 

Mostrar:
© 2014 Microsoft