Bloque de texto enriquecido

  • Artículo

Los bloques de texto enriquecido proporcionan varias características para el diseño de texto avanzado que puede usar cuando necesita compatibilidad con párrafos, elementos de interfaz de usuario insertados o diseños de texto complejos.

¿Es este el control adecuado?

Use un RichTextBlock cuando necesite compatibilidad con varios párrafos, varias columnas u otros diseños de texto complejos o elementos de interfaz de usuario insertados como imágenes.

Usa un TextBlock para mostrar la mayoría del texto de solo lectura en la aplicación. Puede usarlo para mostrar texto de una sola línea o de varias líneas, hipervínculos en línea y texto con formato como negrita, cursiva o subrayado. TextBlock proporciona un modelo de contenido más simple, por lo que normalmente es más fácil de usar, y puede ofrecer un mejor rendimiento de representación de texto que RichTextBlock. Es preferible para la mayoría del texto de la interfaz de usuario de la aplicación. Aunque puedes incluir saltos de línea en el texto, TextBlock está diseñado para mostrar un único párrafo y no admite la sangría del texto.

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

Recomendaciones

Consulte Tipografía e instrucciones para obtener fuentes.

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.

Existen API para este control 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, las plantillas y las características más actuales de todos los controles. WinUI 2.2 o de versiones posteriores incluye una nueva plantilla para este control que usa esquinas redondeadas. Para obtener más información, consulta Radio de redondeo.

Creación de un bloque de texto enriquecido

Abra la aplicación Galería de WinUI 3 y vea RichTextBlock en acción.

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

La propiedad content de RichTextBlock es la propiedad Blocks , que admite texto basado en párrafos a través del elemento Paragraph . No tiene una propiedad Text que puedes usar para acceder fácilmente al contenido de texto del control en la aplicación. Sin embargo, RichTextBlock proporciona varias características únicas que TextBlock no ofrece.

RichTextBlock admite:

  • Varios párrafos. Establezca la sangría para párrafos estableciendo la propiedad TextIndent .
  • Elementos de la interfaz de usuario insertados. Use un inlineUIContainer para mostrar elementos de la interfaz de usuario, como imágenes, en línea con el texto.
  • Contenedores de desbordamiento. Use 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 párrafo.

Puede establecer la cantidad de sangría para todos los párrafos de un RichTextBlock estableciendo la propiedad RichTextBlock.TextIndent . Puede invalidar esta configuración para párrafos específicos en un RichTextBlock estableciendo 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 insertados

La clase InlineUIContainer permite insertar cualquier UIElement en línea con el texto. Un escenario común es colocar una imagen en línea con el texto, pero también puede usar elementos interactivos, como un botón o checkBox.

Si desea insertar más de un elemento insertado en la misma posición, considere la posibilidad de usar un panel como el único elemento secundario InlineUIContainer y, a continuación, coloque los varios 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. Puede vincular elementos RichTextBlockOverflow estableciendolos como OverflowContentTarget de richTextBlock u otro RichTextBlockOverflow.

Este es un ejemplo sencillo que crea un diseño de dos columnas. Consulte la sección Ejemplos para obtener 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 RichTextBlock almacena texto sin formato, puedes aplicar varias opciones de formato para personalizar cómo se representa el texto en la aplicación. Puede establecer propiedades de control estándar como FontFamily, FontSize, FontStyle, Foreground y CharacterSpacing para cambiar el aspecto del texto. También puede usar elementos de texto insertados y propiedades adjuntas tipográficas para dar formato al texto. Estas opciones afectan solo a cómo RichTextBlock muestra el texto localmente, por lo que si copia y pega el texto en un control de texto enriquecido, por ejemplo, no se aplica ningún formato.

Elementos insertados

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 manera típica de aplicar formato a secciones de texto es colocar el texto en un elemento Run o Span y, a continuación, establecer propiedades en ese elemento.

Este es un párrafo con la primera frase que se muestra en negrita, azul, texto 16pt.

<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 proporcionan acceso a un conjunto de propiedades tipográficas de Microsoft OpenType. Puede establecer estas propiedades adjuntas en RichTextBlock o en elementos de texto insertados individuales, como se muestra aquí.

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

Obtener el código de ejemplo

Controles de texto

Para diseñadores

Para desarrolladores (XAML)

Para desarrolladores (otros)