Selecionando texto e imagens

Este artigo descreve a seleção e a manipulação de texto, imagens e controles e fornece diretrizes de experiência do usuário que devem ser consideradas ao usar esses mecanismos em seus aplicativos.

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

O que fazer e o que não fazer

• Utilize símbolos de fonte ao implementar sua própria interface de controle. O gripper é uma combinação de duas fontes Segoe UI que estão disponíveis em todo o sistema. O uso de recursos de fonte simplifica problemas de renderização em diferentes dpis e funciona bem com os vários níveis de escala da interface do usuário. Ao implementar dispositivos de preensão próprios, eles devem compartilhar as seguintes características da interface do usuário:

  • Forma circular
  • Visível em qualquer plano de fundo
  • Tamanho consistente

• Forneça uma margem em torno do conteúdo selecionável para acomodar a interface do usuário do gripper. Se seu aplicativo habilitar a seleção de texto em uma região que não faça pan/scroll, permita uma margem de garra 1/2 nos lados esquerdo e direito da área de texto e 1 altura de garra nos lados superior e inferior da área de texto (conforme mostrado nas imagens a seguir). Isso assegura que toda a interface do usuário do gripper seja visível para o usuário e minimize interações não intencionais com outras interfaces de usuário baseadas nas bordas.

  

• Ocultar a IU das alças durante a interação. Elimina a oclusão pelas pinças durante a interação. Isso é útil quando um controle não está completamente obscurecido pelo dedo ou há vários controles de seleção de texto. Isso elimina artefatos visuais ao exibir janelas filho.

• Não permita a seleção de elementos de interface do usuário, como controles, rótulos, imagens, conteúdo proprietário e assim por diante. Normalmente, os aplicativos do Windows permitem a seleção somente em controles específicos. Controles como botões, rótulos e logotipos não são selecionáveis. Avalie se a seleção é um problema para seu aplicativo e, nesse caso, identifique as áreas da interface do usuário em que a seleção deve ser proibida.

Diretrizes de uso adicionais

A seleção e a manipulação de texto são particularmente suscetíveis a desafios de experiência do usuário introduzidos por interações por toque. A entrada de mouse, caneta/stylus e teclado é altamente detalhada: um clique do mouse ou um contato com a caneta/stylus normalmente é mapeado para um único pixel, e uma tecla é pressionada ou não. A entrada por toque não é granular; é difícil mapear toda a superfície de uma ponta de dedo para um local x-y específico na tela para colocar um cursor de texto com precisão.

Considerações e recomendações

Use os controles internos expostos por meio das estruturas de linguagem no Windows para criar aplicativos que fornecem a experiência completa de interação do usuário da plataforma, incluindo comportamentos de seleção e manipulação. Você encontrará a funcionalidade de interação dos controles internos suficiente para a maioria dos aplicativos do Windows.

Ao usar controles de texto padrão do Windows, os comportamentos de seleção e visuais descritos neste tópico não podem ser personalizados.

Seleção de texto

Se o aplicativo exigir uma interface do usuário personalizada que dê suporte à seleção de texto, recomendamos que você siga os comportamentos de seleção do Windows descritos aqui.

Conteúdo editável e não editável

Com o toque, as interações de seleção são executadas principalmente por meio de gestos como um toque para definir um cursor de inserção ou selecionar uma palavra e um slide para modificar uma seleção. Assim como acontece com outras interações de toque do Windows, as interações cronometradas são limitadas ao gesto de pressionar e segurar para exibir a interface do usuário informativa. Para obter mais informações, consulte Diretrizes para comentários visuais.

O Windows reconhece dois estados possíveis para interações de seleção, editáveis e não editáveis e ajusta a interface do usuário de seleção, os comentários e a funcionalidade adequadamente.

Conteúdo editável

Tocar na metade esquerda de uma palavra coloca o cursor imediatamente à esquerda da palavra, enquanto tocar na metade direita coloca o cursor imediatamente à direita da palavra.

A imagem a seguir demonstra como colocar um cursor de inserção inicial com agarra tocando próximo ao início ou ao fim de uma palavra.

A imagem a seguir demonstra como ajustar uma seleção arrastando a alça.

As imagens a seguir demonstram como invocar o menu de contexto tocando dentro da seleção ou em um controlador (manter pressionado também pode ser usado).

Nota Essas interações variam um pouco no caso de uma palavra incorreta. Tocar em uma palavra marcada como incorreta realçará a palavra inteira e invocará o menu de contexto ortográfico sugerido.

 

Conteúdo não editável

A imagem a seguir demonstra como selecionar uma palavra tocando dentro da palavra (nenhum espaço está incluído na seleção inicial).

Siga os mesmos procedimentos que o texto editável para ajustar a seleção e exibir o menu de contexto.

Manipulação de objeto

Sempre que possível, use os mesmos recursos de "gripper" (ou similares) que a seleção de texto ao implementar a manipulação de objetos personalizada em um aplicativo Windows. Isso ajuda a fornecer uma experiência de interação consistente em toda a plataforma.

Por exemplo, controladores também podem ser usados em aplicativos de processamento de imagens que dão suporte ao redimensionamento e corte, ou em reprodutores de mídia que oferecem barras de progresso ajustáveis, conforme mostrado nas imagens a seguir.

Player de mídia com barra de progresso ajustável.

Editor de imagem com garras de corte.

Artigos relacionados

Para desenvolvedores

• Interações personalizadas do usuário

Samples

• Exemplo básico de entrada
• Exemplo de entrada de baixa latência
• Exemplo de modo de interação do usuário
• Exemplo de elementos visuais de foco

Amostras de arquivo

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

• Entrada: exemplo de funcionalidades do dispositivo

• Entrada: exemplo de teste de clique por toque

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

• Entrada: amostra de tinta simplificada

• Entrada: exemplo de manipulações e gestos

• Exemplo de entrada por toque do DirectX