Bloco rich text

Os blocos de rich text fornecem vários recursos para layout de texto avançado que você pode usar quando precisar de suporte para parágrafos, elementos de interface do usuário embutidos ou layouts de texto complexos.

Esse é o controle correto?

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

Use um TextBlock para exibir a maioria dos textos somente leitura em seu aplicativo. Você pode usá-lo para exibir texto de linha única ou de várias linhas, hiperlinks embutidos e texto com formatação como negrito, itálico ou sublinhado. O TextBlock fornece um modelo de conteúdo mais simples e, portanto, é mais fácil de usar e pode oferecer melhor desempenho na renderização de texto do que RichTextBlock. É preferível para a maioria dos textos da interface do usuário do aplicativo. Embora você possa colocar quebras de linha no texto, o TextBlock é projetado para exibir um único parágrafo e não é compatível com recuo de texto.

Para obter mais informações sobre como escolher o controle de texto certo, consulte o artigo Controles de texto.

Recomendações

Consulte Tipografia e Diretrizes para fontes.

UWP e WinUI 2

As APIs para esse controle existem no namespace Windows.UI.Xaml.Controls.

É recomendável usar a WinUI 2 mais recente para obter os estilos e modelos mais atuais para todos os controles. WinUI 2.2 ou posterior inclui um novo modelo para esse controle que usa cantos arredondados. Para obter mais informações, confira Raio de canto.

Criar um bloco de rich text

O aplicativo Galeria da WinUI 3 inclui exemplos interativos da maioria dos controles, recursos e funcionalidades da WinUI 3. Obtenha o aplicativo na Microsoft Store ou o código-fonte no GitHub

A propriedade content de RichTextBlock é a propriedade Blocks , que dá suporte a texto baseado em parágrafo por meio 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. No entanto, RichTextBlock fornece vários recursos exclusivos que TextBlock não fornece.

RichTextBlock suporta:

• Vários parágrafos. Defina o recuo para parágrafos definindo a propriedade TextIndent .
• Elementos de interface do usuário embutidos. Use um InlineUIContainer para exibir elementos da interface do usuário, como imagens, embutidos no texto.
• Contêineres de transbordamento. Use elementos RichTextBlockOverflow para criar layouts de texto de várias colunas.

Parágrafos

Use elementos Paragraph para definir os blocos de texto a serem exibidos dentro de um controle RichTextBlock. Cada RichTextBlock deve incluir pelo menos um parágrafo.

Você pode definir o valor de recuo para todos os parágrafos em um RichTextBlock definindo a propriedade RichTextBlock.TextIndent . Você pode substituir essa configuração para parágrafos específicos em um RichTextBlock definindo a propriedade Paragraph.TextIndent como um valor diferente.

<RichTextBlock TextIndent="12">
  <Paragraph TextIndent="24">First paragraph.</Paragraph>
  <Paragraph>Second paragraph.</Paragraph>
  <Paragraph>Third paragraph. <Bold>With an inline.</Bold></Paragraph>
</RichTextBlock>

Elementos de interface do usuário embutidos

A classe InlineUIContainer permite inserir qualquer UIElement embutido no seu texto. Um cenário comum é colocar uma imagem embutida no texto, mas você também pode usar elementos interativos, como um botão ou uma caixa de seleção.

Se você quiser inserir mais de um elemento embutido na mesma posição, considere usar um painel como o único filho InlineUIContainer e, em seguida, coloque os vários elementos dentro desse painel.

Este exemplo mostra como usar um InlineUIContainer para inserir uma imagem em um RichTextBlock.

<RichTextBlock>
    <Paragraph>
        <Italic>This is an inline image.</Italic>
        <InlineUIContainer>
            <Image Source="Assets/Square44x44Logo.png" Height="30" Width="30"/>
        </InlineUIContainer>
        Mauris auctor tincidunt auctor.
    </Paragraph>
</RichTextBlock>

Contêineres de transbordamento

Você pode usar RichTextBlock com elementos RichTextBlockOverflow para criar layouts de várias colunas ou outros layouts de página avançados. O conteúdo de um elemento RichTextBlockOverflow sempre vem de um elemento RichTextBlock. Você vincula elementos RichTextBlockOverflow definindo-os como o OverflowContentTarget de um RichTextBlock ou outro RichTextBlockOverflow.

Aqui está um exemplo simples que cria um layout de duas colunas. Consulte a seção Exemplos para obter um exemplo mais complexo.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <RichTextBlock Grid.Column="0" 
                   OverflowContentTarget="{Binding ElementName=overflowContainer}" >
        <Paragraph>
            Proin ac metus at quam luctus ultricies.
        </Paragraph>
    </RichTextBlock>
    <RichTextBlockOverflow x:Name="overflowContainer" Grid.Column="1"/>
</Grid>

Formatando o texto

Embora o RichTextBlock armazene texto sem formatação, você pode aplicar várias opções de formatação para personalizar como o texto é renderizado em seu aplicativo. Você pode definir propriedades de controle padrão como FontFamily, FontSize, FontStyle, Foreground e CharacterSpacing para alterar a aparência do texto. Você também pode usar elementos de texto embutidos e propriedades anexadas de tipografia para formatar seu texto. Essas opções afetam apenas como o RichTextBlock exibe o texto localmente, portanto, se você copiar e colar o texto em um controle rich text, por exemplo, nenhuma formatação será aplicada.

Elementos embutidos

O namespace Microsoft.UI.Xaml.Documents fornece uma variedade de elementos de texto embutidos que você pode usar para formatar seu texto, como Negrito, Itálico, Executar, Span e Quebra de Linha. Uma maneira típica de aplicar formatação a seções de texto é colocar o texto em um elemento Run ou Span e, em seguida, definir propriedades nesse elemento.

Aqui está um parágrafo com a primeira frase mostrada em negrito, azul, texto de 16 pontos.

<Paragraph>
    <Bold><Span Foreground="DarkSlateBlue" FontSize="16">Lorem ipsum dolor sit amet</Span></Bold>
    , consectetur adipiscing elit.
</Paragraph>

Tipografia

As propriedades anexadas da classe Typography fornecem acesso a um conjunto de propriedades de tipografia Microsoft OpenType. Você pode definir essas propriedades anexadas no RichTextBlock ou em elementos de texto embutidos individuais, conforme mostrado aqui.

<RichTextBlock Typography.StylisticSet4="True">
    <Paragraph>
        <Span Typography.Capitals="SmallCaps">Lorem ipsum dolor sit amet</Span>
        , consectetur adipiscing elit.
    </Paragraph>
</RichTextBlock>

Obter o código de exemplo

• Exemplo de Galeria da WinUI: veja todos os controles XAML em um formato interativo.

Artigos relacionados

Controles de texto

Para designers

• Diretrizes para verificação ortográfica
• Como adicionar pesquisa
• Diretrizes para entrada de texto

Para desenvolvedores (XAML)

• Classe TextBox
• Classe PasswordBox

Para desenvolvedores (outros)

• Propriedade String.Length