Bloco de texto rico

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.

Será este o controlo correto?

Utilize um RichTextBlock quando precisar de suporte para vários parágrafos, multi-coluna ou outros layouts de texto complexos, ou elementos de interface do usuário incorporados, como imagens.

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. O TextBlock fornece um modelo de conteúdo mais simples, por isso normalmente é mais fácil de usar e pode fornecer um melhor desempenho de renderização de texto do que o RichTextBlock. É preferível para a maioria dos textos da interface do usuário do aplicativo. 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.

Para saber mais sobre como escolher o controle de texto correto, veja o artigo Controles de texto .

Recommendations

Consulte Tipografia e Diretrizes para fontes.

Criar um bloco de texto rico

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

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. 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 de utilizador integrados. Use um InlineUIContainer para exibir elementos da interface do usuário, como imagens, embutidos com seu texto.
• Contentores de transbordamento. Use elementos RichTextBlockOverflow para criar layouts de texto com várias colunas.

Parágrafos

Você usa os elementos de Parágrafo para definir os blocos de texto a serem exibidos em um controlo 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 para 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 da interface do usuário em linha

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

Se pretender incorporar mais de um elemento embutido na mesma posição, considere usar um painel como o único filho de 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>

Contentores para excedente

Você pode usar um RichTextBlock com elementos de RichTextBlockOverflow para criar vários layouts de página 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 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>

Formatação de 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 o texto. Essas opções afetam apenas como o RichTextBlock exibe o texto localmente, portanto, se você copiar e colar o texto em um controle de 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 o/a utilizador pode usar para formatar o texto, como Negrito, Itálico, Run, Span e LineBreak. 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 16pt.

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

Typography

As propriedades anexadas da classe Typography fornecem acesso a um conjunto de propriedades de tipografia do 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>

UWP e WinUI 2

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

Recomendamos 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 este controle que usa cantos arredondados. Consulte Raio de cantopara obter mais informações.

Artigos relacionados

Controles de texto

Para os designers

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

Para desenvolvedores (XAML)

• Classe TextBox
• Classe PasswordBox

Para desenvolvedores (outros)

• Propriedade String.Length