Compartir a través de

Bloque de texto enriquecido

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.

Recommendations

Consulte Tipografía e instrucciones para obtener fuentes.

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. Obtén la aplicación desde la Microsoft Store o consigue 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. Configura la propiedad TextIndent para establecer la sangría de los párrafos.
  • Elementos de la interfaz de usuario insertados. Use un InlineUIContainer para mostrar elementos de interfaz de usuario, como imágenes, en línea con tu texto.
  • Contenedores de desbordamiento. Use elementos RichTextBlockOverflow para crear diseños de texto de varias columnas.

Paragraphs

Los elementos Paragraph se usan para definir los bloques de texto que se van a mostrar dentro de un control RichTextBlock. Cada RichTextBlock debe incluir al menos un párrafo.

Para definir la cantidad de sangría de todos los párrafos de un RichTextBlock, se puede establecer 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

Puede usar un RichTextBlock con elementos RichTextBlockOverflow para crear diseños de columnas múltiples u otros diseños de página 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>

Aplicar formato al texto

Aunque RichTextBlock almacena texto sin formato, puede 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 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 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>

Typography

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>

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. Consulta la referencia de la API de UWP para obtener información y ejemplos específicos de la plataforma.

Esta sección contiene la información que necesitas para utilizar el control en una aplicación 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 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.

Controles de texto

Para diseñadores

Para desarrolladores (XAML)

Para desarrolladores (otros)

  • Last updated on