Bloque de texto enriquecido

  • Artículo

Los bloques de texto enriquecido proporcionan varias características para el diseño avanzado de texto que puedes usar cuando necesitas admitir párrafos, elementos de interfaz de usuario en línea o diseños de texto complejos.

¿Es este el control adecuado?

Usa un RichTextBlock si necesitas admitir varios párrafos, varias columnas u otros diseños de texto complejos, o elementos de interfaz de usuario en línea, como imágenes.

Usa un TextBlock para mostrar la mayor parte del texto de solo lectura en la aplicación. Puedes usarlo para mostrar texto de una o varias líneas, hipervínculos en línea y texto con formato como, por ejemplo, negrita, cursiva o subrayado. TextBlock proporciona un modelo de contenido más sencillo, por lo que normalmente es más fácil de usar y puede proporcionar un mejor rendimiento de representación de texto que RichTextBlock. Se prefiere para la mayoría del texto de la interfaz de usuario de la aplicación. Aunque puede colocar saltos de línea en el texto, TextBlock está diseñado para mostrar un solo párrafo y no admite sangría de texto.

Para obtener más información sobre cómo elegir el control de texto correcto, consulta el artículo Controles de texto.

Recomendaciones

Consulta las directrices para texto y tipografía.

UWP y WinUI 2

Importante

La información y los ejemplos de este artículo están optimizados para aplicaciones que usan el SDK de Aplicaciones para Windows y WinUI 3, pero generalmente son aplicables a las aplicaciones para UWP que usan WinUI 2. Consulte el material de referencia de las API de UWP para obtener información y ejemplos específicos de la plataforma.

Esta sección contiene información que necesita para usar el control en una aplicación para UWP o WinUI 2.

Las API de este control existen en el espacio de nombres Windows.UI.Xaml.Controls .

Se recomienda usar la versión más reciente de WinUI 2 para obtener los estilos y plantillas más actuales para todos los controles. WinUI 2.2 o posterior incluye una nueva plantilla para este control que usa esquinas redondeadas. Para obtener más información, consulta Radio de redondeo.

Crear un bloque de texto enriquecido

Abra la aplicación WinUI 3 Gallery y vea RichTextBlock en acción.

La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, las características y la funcionalidad de WinUI 3. Obtenga la aplicación en Microsoft Store o el código fuente en GitHub.

La propiedad de contenido de RichTextBlock es la propiedad Blocks, que admite el texto basado en párrafos a través del elemento Paragraph. No tiene una propiedad Text que puedas usar para obtener acceso con facilidad a contenido de texto del control en la aplicación. Sin embargo, RichTextBlock proporciona varias características únicas que TextBlock no proporciona.

RichTextBlock admite:

  • Varios párrafos. Configura la propiedad TextIndent para establecer la sangría de los párrafos.
  • Elementos de la interfaz de usuario en línea. Usa un InlineUIContainer para visualizar los elementos de la interfaz de usuario, tales como las imágenes, en línea con el texto.
  • Contenedores de desbordamiento. Usa elementos RichTextBlockOverflow para crear diseños de texto de varias columnas.

Párrafos

Los elementos Paragraph se usan para definir los bloques de texto que se muestran dentro de un control RichTextBlock. Cada RichTextBlock debe incluir al menos un Paragraph.

Para definir la cantidad de sangría de todos los párrafos de un RichTextBlock, se puede establecer la propiedad RichTextBlock.TextIndent. Para invalidar esta configuración para párrafos específicos de un RichTextBlock, puedes establecer la propiedad Paragraph.TextIndent en un 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 la interfaz de usuario en línea

La clase InlineUIContainer permite insertar cualquier UIElement en línea con el texto. Un escenario común es colocar un objeto Image en línea con el texto, pero también puedes usar elementos interactivos, como un objeto Button o CheckBox.

Si quieres integrar más de un elemento en línea en la misma posición, considera usar un panel como el único elemento secundario InlineUIContainer y luego colocar los diversos elementos dentro de ese panel.

En este ejemplo se muestra cómo usar un InlineUIContainer para insertar una imagen en un 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>

Contenedores de desbordamiento

Puedes usar RichTextBlock con elementos de RichTextBlockOverflow para crear diseños de página con varias columnas u otros diseños avanzados. El contenido de un elemento RichTextBlockOverflow siempre procede de un elemento RichTextBlock. Para vincular los elementos RichTextBlockOverflow, estos se establecen como el OverflowContentTarget de un RichTextBlock u otro RichTextBlockOverflow.

Este es un ejemplo simple que crea un diseño de dos columnas. Consulta la sección de ejemplos para conocer un ejemplo más complejo.

<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>

Formato de texto

Aunque el RichTextBlock almacena texto sin formato, puedes aplicar diversas opciones de formato para personalizar la representación del texto en la aplicación. Puedes establecer las propiedades de control estándar, como FontFamily, FontSize, FontStyle, Foreground y CharacterSpacing, para cambiar el aspecto del texto. También puedes usar elementos de texto en línea y propiedades adjuntas a Typography para dar formato al texto. Estas opciones solo afectan al modo en que el RichTextBlock muestra el texto localmente, por lo que si copias y pegas el texto en un control de texto enriquecido, por ejemplo, no se aplica ningún formato.

Elementos en línea

El espacio de nombres Microsoft.UI.Xaml.Documents proporciona una variedad de elementos de texto insertados que puedes usar para dar formato al texto, como Bold, Italic, Run, Span y LineBreak. Una forma habitual para aplicar formato a las secciones de texto es colocar el texto en un elemento Run o Span y luego establecer las propiedades en ese elemento.

Este es un Paragraph con la primera frase en texto azul de 16 pt y negrita.

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

Tipografía

Las propiedades adjuntas de la clase Typography otorgan acceso a un conjunto de propiedades de tipografía de Microsoft OpenType. Puedes establecer estas propiedades adjuntas tanto en el RichTextBlock como en los elementos de texto en línea individuales, como aquí se muestra.

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

Obtención del código de ejemplo

Controles de texto

Para diseñadores

Para desarrolladores (XAML)

Para desarrolladores (otros)