Partilhar via

Controles de texto

Os controles de texto consistem em caixas de entrada de texto, caixas de senha, caixas de sugestão automática e blocos de texto. A estrutura XAML fornece vários controles para renderizar, inserir e editar texto e um conjunto de propriedades para formatar o texto.

APIs importantes: classe TextBlock, classe RichTextBlock, classe TextBox, classe RichEditBox, classeAutoSuggestBox, classe PasswordBox

Será este o controlo correto?

O controle de texto que você usa depende do seu cenário. Use essas informações para escolher o controle de texto certo para usar em seu aplicativo.

Renderizar texto somente leitura

Use um TextBlock para exibir a maioria do texto de apenas leitura na sua aplicação. Você pode usá-lo para exibir texto de linha única ou multilinha, hiperlinks embutidos e texto com formatação como negrito, itálico ou sublinhado.

TextBlock é normalmente mais fácil de usar e fornece melhor desempenho de renderização de texto do que RichTextBlock, por isso é preferido para a maioria do texto da interface do usuário do aplicativo. Você pode acessar e usar facilmente o texto de um TextBlock em seu aplicativo obtendo o valor da propriedade Text .

Ele também fornece muitas das mesmas opções de formatação para personalizar como o texto é renderizado. Embora você possa colocar quebras de linha no texto, TextBlock foi projetado para exibir um único parágrafo e não oferece suporte a recuo de texto.

Use um RichTextBlock quando precisar de suporte para vários parágrafos, texto de várias colunas ou outros layouts de texto complexos, ou elementos de interface do usuário embutidos, como imagens. RichTextBlock fornece vários recursos para layout de texto avançado.

A propriedade de conteúdo de RichTextBlock é a propriedade Blocks, que oferece suporte a texto estruturado em parágrafos através do elemento Paragraph. Ele não tem uma propriedade Text que você possa usar para acessar facilmente o conteúdo de texto do controle em seu aplicativo.

Entrada de texto

Use um controlo de caixa de texto para permitir que um utilizador insira e edite texto não formatado, como num formulário. Você pode usar a propriedade Text para obter e definir o texto em um TextBox.

Você pode tornar uma caixa de texto somente leitura, mas isso deve ser um estado condicional temporário. Se o texto nunca for editável, considere usar um TextBlock.

Use um controle de PasswordBox para coletar uma senha ou outros dados privados, como um número de segurança social. Uma caixa de senha é uma caixa de entrada de texto que oculta os caracteres digitados nela por uma questão de privacidade. Uma caixa de senha é semelhante a uma caixa de entrada de texto, exceto que ela exibe asteriscos em vez do texto que foi inserido. O caractere marcador pode ser personalizado.

Use um controle AutoSuggestBox para mostrar ao usuário uma lista de sugestões para escolher enquanto digita. Uma caixa de sugestão automática é uma caixa de entrada de texto que aciona uma lista de sugestões básicas de pesquisa. Os termos sugeridos podem ser utilizados a partir de uma combinação de termos de pesquisa populares e termos históricos introduzidos pelo utilizador.

Você também deve usar um controle AutoSuggestBox para implementar uma caixa de pesquisa.

Use um RichEditBox para exibir e editar arquivos de texto. Você não usa um RichEditBox para inserir o usuário em seu aplicativo da mesma forma que usa outras caixas de entrada de texto padrão. Em vez disso, você o usa para trabalhar com arquivos de texto separados do seu aplicativo. Normalmente, você salva o texto inserido em um RichEditBox em um arquivo .rtf.

A entrada de texto é a melhor opção?

Há muitas maneiras de obter a entrada do usuário em seu aplicativo. Essas perguntas ajudarão a responder se uma das caixas de entrada de texto padrão ou outro controle é o mais adequado para obter a entrada do usuário.

  • É prático enumerar eficientemente todos os valores válidos? Em caso afirmativo, considere usar um dos controles de seleção, como uma caixa de seleção, lista suspensa, caixa de listagem, botão de opção, controle deslizante, interruptor de alternância, seletor de data ou seletor de hora.
  • Existe um conjunto relativamente pequeno de valores válidos? Em caso afirmativo, considere uma lista suspensa ou uma caixa de listagem, especialmente se os valores tiverem mais do que alguns caracteres.
  • Os dados válidos são completamente irrestritos? Ou os dados válidos são limitados apenas pelo formato (comprimento restrito ou tipos de caracteres)? Em caso afirmativo, use um controle de entrada de texto. Você pode limitar o número de caracteres que podem ser inseridos e validar o formato no código do aplicativo.
  • O valor representa um tipo de dados que tem um controle comum especializado? Em caso afirmativo, use o controle apropriado em vez de um controle de entrada de texto. Por exemplo, use um DatePicker em vez de um controle de entrada de texto para aceitar uma entrada de data.
  • Se os dados forem estritamente numéricos:
    • O valor que está sendo inserido é aproximado e/ou relativo a outra quantidade na mesma página? Em caso afirmativo, use um controle deslizante.
    • O usuário se beneficiaria do feedback instantâneo sobre o efeito das mudanças de configuração? Em caso afirmativo, use um controle deslizante, possivelmente com um controle de controle acompanhante.
    • É provável que o valor inserido seja ajustado após o resultado ser observado, como com volume ou brilho da tela? Em caso afirmativo, use um controle deslizante.

Examples

WinUI 2 Galeria
Galeria WinUI

Se você tiver o aplicativo WinUI 2 Gallery instalado, clique aqui para abrir o aplicativo e ver os controles de texto em ação.

Caixa de texto

Uma caixa de texto

Caixa de sugestão automática

Exemplo do controle de sugestão automática expandido

Caixa de palavra-passe

Estado de foco da caixa de senha ao digitar texto

Criar um controle de texto

Consulte estes artigos para obter informações e exemplos específicos para cada controle de texto.

Diretrizes de fonte e estilo

Consulte estes artigos para obter diretrizes de fontes:

Entrada de caneta

Aplica-se a: TextBox, RichEditBox, AutoSuggestBox (apenas UWP)

A partir do Windows 10, versão 1803, as caixas de entrada de texto XAML apresentam suporte incorporado para entrada por caneta usando o Windows Ink. Quando um usuário toca em uma caixa de entrada de texto usando uma caneta do Windows, a caixa de texto se transforma para permitir que o usuário escreva diretamente nela com uma caneta, em vez de abrir um painel de entrada separado.

Para saber mais, veja Entrada de texto com o modo de exibição manuscrito.

Escolha o teclado certo para o seu controlo de texto

Aplica-se a: TextBox, PasswordBox RichEditBox

Para ajudar os usuários a inserir dados usando o teclado virtual ou o SIP (Painel de Entrada Flexível), você pode definir o escopo de entrada do controle de texto para corresponder ao tipo de dados que o usuário deve inserir.

Dica Essas informações se aplicam somente ao SIP. Não se aplica a teclados de hardware ou ao teclado virtual disponível nas opções de Facilidade de Acesso do Windows.

O teclado virtual pode ser usado para entrada de texto quando seu aplicativo é executado em um dispositivo com tela sensível ao toque. O teclado virtual é invocado quando o usuário toca em um campo de entrada editável, como TextBox ou RichEditBox. Você pode tornar muito mais rápido e fácil para os usuários inserir dados em seu aplicativo definindo o escopo de entrada do controle de texto para corresponder ao tipo de dados que você espera que o usuário insira. O escopo de entrada fornece uma dica para o sistema sobre o tipo de entrada de texto esperado pelo controle para que o sistema possa fornecer um layout de teclado virtual especializado para o tipo de entrada.

Por exemplo, se uma caixa de texto for usada apenas para inserir um PIN de 4 dígitos, defina a propriedade InputScope como Number. Esta instrução ordena ao sistema para mostrar o layout do teclado numérico, o que torna mais fácil para o utilizador inserir o PIN.

Importante
O escopo de entrada não faz com que nenhuma validação de entrada seja executada e não impede que o usuário forneça qualquer entrada por meio de um teclado de hardware ou outro dispositivo de entrada. Você ainda é responsável por validar a entrada em seu código, conforme necessário.

Para saber mais, veja Usar escopo de entrada para alterar o teclado virtual.

Fontes coloridas

Aplica-se a: TextBlock, RichTextBlock, TextBox, RichEditBox

O Windows tem a capacidade de as fontes incluírem várias camadas coloridas para cada glifo. Por exemplo, a fonte Segoe UI Emoji define versões coloridas do Emoticon e outros caracteres Emoji.

Os controles padrão e rich text suportam fontes de cores de exibição. Por padrão, a propriedade IsColorFontEnabled é true e as fontes com essas camadas adicionais são renderizadas em cores. A fonte de cor padrão no sistema é Segoe UI Emoji e os controles retornarão a essa fonte para exibir os glifos em cores.

<TextBlock FontSize="30">Hello ☺⛄☂♨⛅</TextBlock>

O texto renderizado tem esta aparência:

Bloco de texto com fonte colorida

Para obter mais informações, consulte a propriedade IsColorFontEnabled .

Diretrizes para separadores de linhas e parágrafos

Aplica-se a: TextBlock, RichTextBlock, TextBox de várias linhas, RichEditBox

Use o caractere separador de linha (0x2028) e o caractere separador de parágrafo (0x2029) para dividir texto sem formatação. Uma nova linha é iniciada após cada separador de linha. Um novo parágrafo é iniciado após cada separador de parágrafo.

Não é necessário iniciar a primeira linha ou parágrafo em um arquivo com esses caracteres ou terminar a última linha ou parágrafo com eles; Isso indica que há uma linha ou parágrafo vazio nesse local.

Seu aplicativo pode usar o separador de linha para indicar um fim de linha incondicional. No entanto, os separadores de linha não correspondem aos caracteres separados de retorno de carro e alimentação de linha, ou a uma combinação desses caracteres. Os separadores de linha devem ser processados separadamente dos caracteres de retorno de carro e alimentação de linha.

Seu aplicativo pode inserir um separador de parágrafo entre parágrafos de texto. O uso deste separador permite a criação de arquivos de texto simples que podem ser formatados com diferentes larguras de linha em diferentes sistemas operacionais. O sistema de destino pode ignorar quaisquer separadores de linha e quebrar parágrafos apenas nos separadores de parágrafo.

Diretrizes para verificação ortográfica

Aplica-se a: TextBox, RichEditBox

Durante a entrada e edição de texto, a verificação ortográfica informa o usuário de que uma palavra está escrita incorretamente, destacando-a com um rabisco vermelho e fornece uma maneira para o usuário corrigir o erro ortográfico.

Eis um exemplo do verificador ortográfico incorporado:

O verificador ortográfico integrado

Use a verificação ortográfica com controles de entrada de texto para estas duas finalidades:

  • Para corrigir automaticamente erros ortográficos

    O mecanismo de verificação ortográfica corrige automaticamente palavras com erros ortográficos quando está confiante sobre a correção. Por exemplo, o mecanismo muda automaticamente de "o" para "o".

  • Para mostrar ortografias alternativas

    Quando o mecanismo de verificação ortográfica não está confiante sobre as correções, ele adiciona uma linha vermelha sob a palavra incorreta e exibe as alternativas em um menu de contexto quando você toca ou clica com o botão direito do mouse na palavra.

  • Use a verificação ortográfica para ajudar os usuários a inserir palavras ou frases nos controles de entrada de texto. A verificação ortográfica funciona com entradas por toque, rato e teclado.

  • Não use a verificação ortográfica quando não for provável que uma palavra esteja no dicionário ou se os usuários não valorizarem a verificação ortográfica. Por exemplo, não a ative se a caixa de texto se destinar a capturar um número de telefone ou nome.

  • Não desative a verificação ortográfica apenas porque o mecanismo de verificação ortográfica atual não suporta o idioma do seu aplicativo. Quando o corretor ortográfico não suporta um idioma, ele não faz nada, então não há mal em deixar a opção ativada. Além disso, alguns usuários podem usar um IME (Editor de Método de Entrada) para inserir outro idioma em seu aplicativo, e esse idioma pode ser suportado. Por exemplo, ao criar um aplicativo de idioma japonês, mesmo que o mecanismo de verificação ortográfica possa não reconhecer esse idioma no momento, não desative a verificação ortográfica. O usuário pode mudar para um IME em inglês e digitar inglês no aplicativo; se a verificação ortográfica estiver ativada, o inglês será verificado.

Para os controles TextBox e RichEditBox, a verificação ortográfica é ativada por padrão. Você pode desativá-lo definindo a propriedade IsSpellCheckEnabled como false.

Para os designers

Para desenvolvedores (XAML)

  • Last updated on