Bloque de texto

  • Artículo

El bloque de texto es el control principal para mostrar texto de solo lectura en las aplicaciones. 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.

¿Es este el control adecuado?

Un bloque de texto suele ser más fácil de usar y proporciona mejor rendimiento de representación de texto que un bloque de texto enriquecido, por lo que es preferible para gran parte del texto de la interfaz de usuario de la aplicación. Puedes acceder fácilmente y usar texto de un bloque de texto en tu aplicación obteniendo el valor de la propiedad Text. También proporciona muchas de las mismas opciones de formato para personalizar la representación del texto.

Aunque puedes incluir saltos de línea en el texto, el bloque de texto está diseñado para mostrar un único párrafo y no admite la sangría del texto. Usa un RichTextBlock si necesitas admitir varios párrafos, texto de varias columnas u otros diseños de texto complejos, o elementos de interfaz de usuario en línea, como imágenes.

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

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, las plantillas y las características más actuales de todos los controles.

Crear un bloque de texto

Abra la aplicación Galería de WinUI 3 y vea TextBlock 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.

Aquí te mostramos cómo definir un control TextBlock sencillo y establecer su propiedad Text en una cadena.

<TextBlock Text="Hello, world!" />

TextBlock textBlock1 = new TextBlock();
textBlock1.Text = "Hello, world!";

Modelo de contenido

Existen dos propiedades que puedes usar para agregar contenido a un TextBlock: Text e Inlines.

La manera más común de mostrar texto es establecer la propiedad Text en un valor de cadena, como se muestra en el ejemplo anterior.

También puedes agregar contenido mediante la colocación de elementos de contenido de flujo en línea en la propiedad TextBox.Inlines, como este.

<TextBlock>Text can be <Bold>bold</Bold>, <Underline>underlined</Underline>, 
    <Italic>italic</Italic>, or a <Bold><Italic>combination</Italic></Bold>.</TextBlock>

Los elementos que se derivan de la clase Inline, como Bold, Italic, Run, Span y LineBreak, habilitan un formato diferente para las distintas partes del texto. Para obtener más información, consulta la sección Formato de texto. El elemento Hyperlink en línea te permite agregar un hipervínculo al texto. Sin embargo, al usar Inlines también se deshabilita la representación de texto de la ruta de acceso rápido, lo que se describe en la siguiente sección.

Consideraciones de rendimiento

Siempre que sea posible, XAML usa una ruta de acceso de código más eficiente para el diseño del texto. Esta ruta de acceso rápido tanto disminuye el uso de memoria general como reduce en gran medida el tiempo de CPU para realizar una medición de texto y organización. Esta ruta de acceso rápido se aplica solo a TextBlock, por lo que es preferible cuando sea posible sobre RichTextBlock.

Ciertas condiciones requieren TextBlock para volver a una ruta de acceso más enriquecida de código intensivo de CPU para la representación de texto. Para mantener la representación de texto en la ruta de acceso rápido, asegúrate de seguir estas directrices al establecer las propiedades enumeradas aquí.

  • Text: la condición más importante es que la ruta de acceso rápido solo se use cuando se establece texto; para ello, debes establecer explícitamente la propiedad Text en XAML o en el código (como se muestra en los ejemplos anteriores). Establecer el texto a través de la colección Inlines de TextBlock (como <TextBlock>Inline text</TextBlock>), deshabilitará la ruta de acceso rápido debido a la posible complejidad de varios formatos.
  • CharacterSpacing: solo el valor predeterminado de 0 es la ruta de acceso rápido.
  • TextTrimming: solo los valores None, CharacterEllipsis y WordEllipsis son la ruta de acceso rápido. El valor Clip deshabilita la ruta de acceso rápido.

Nota Antes de Windows 10, versión 1607, las propiedades adicionales también afectan a la ruta de acceso rápida. Si la aplicación se ejecuta en una versión anterior de Windows, estas condiciones provocarán que el texto se represente en la ruta de acceso lento. Para obtener más información sobre las versiones, consulte Código adaptativo para versiones.

  • Tipografía: solo los valores predeterminados de las diversas propiedades Typography son considerados ruta de acceso rápido.
  • LineStackingStrategy: si LineHeight no es 0, los valores BaselineToBaseline y MaxHeight deshabilitan la ruta de acceso rápido.
  • IsTextSelectionEnabled: solo false es la ruta de acceso rápido. Establecer esta propiedad en true deshabilita la ruta de acceso rápido.

Puedes establecer la propiedad DebugSettings.IsTextPerformanceVisualizationEnabled en true durante la depuración para determinar si el texto usa representación de la ruta de acceso rápido. Cuando se establece esta propiedad en true, el texto que se encuentra en la ruta de acceso rápido se muestra en un color verde claro.

Propina Esta característica se explica en profundidad en esta sesión de compilación 2015- Rendimiento xaml: Técnicas para maximizar experiencias de aplicaciones universales de Windows compiladas con XAML.

Normalmente se establece la configuración de depuración en el reemplazo del método OnLaunched en la página de código subyacente de App.xaml, como este.

protected override void OnLaunched(LaunchActivatedEventArgs e)
{
#if DEBUG
    if (System.Diagnostics.Debugger.IsAttached)
    {
        this.DebugSettings.IsTextPerformanceVisualizationEnabled = true;
    }
#endif

// ...

}

En este ejemplo, el primer TextBlock se representa con la ruta de acceso rápido, mientras que el segundo no lo es.

<StackPanel>
    <TextBlock Text="This text is on the fast path."/>
    <TextBlock>This text is NOT on the fast path.</TextBlock>
<StackPanel/>

Al ejecutar este XAML en modo de depuración con la propiedad IsTextPerformanceVisualizationEnabled establecida en true, el resultado tiene este aspecto.

Texto representado en modo de depuración

Precaución

El color del texto que no está en la ruta de acceso rápida no cambia. Si hay texto en la aplicación con el color especificado como verde claro, se sigue mostrando en verde claro cuando se encuentra en la ruta de acceso de representación más lenta. Ten cuidado de no confundir el texto establecido en verde en la aplicación con el texto que se encuentra en la ruta de acceso rápido y está establecido en verde debido a la configuración de depuración.

Formato de texto

Aunque la propiedad Text almacena texto sin formato, puedes aplicar diversas opciones de formato al control TextBlock 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 objeto TextBlock 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.

Nota

Recuerde que, como se indicó en la sección anterior, los elementos de texto insertados y los valores de tipografía no predeterminados no se representan en la ruta de acceso rápida.

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.

Puedes mostrar una serie de cadenas en un TextBlock, donde cada cadena tiene formatos distintos. Para hacerlo, usa un elemento Run para mostrar cada cadena con su formato y separa cada elemento Run con un elemento LineBreak.

Estos son los pasos para definir varias cadenas de texto con formato distinto en un TextBlock mediante objetos Run separados con LineBreak.

<TextBlock FontFamily="Segoe UI" Width="400" Text="Sample text formatting runs">
    <LineBreak/>
    <Run Foreground="Gray" FontFamily="Segoe UI Light" FontSize="24">
        Segoe UI Light 24
    </Run>
    <LineBreak/>
    <Run Foreground="Teal" FontFamily="Georgia" FontSize="18" FontStyle="Italic">
        Georgia Italic 18
    </Run>
    <LineBreak/>
    <Run Foreground="Black" FontFamily="Arial" FontSize="14" FontWeight="Bold">
        Arial Bold 14
    </Run>
</TextBlock>

Este es el resultado.

Texto con formato con elementos de ejecución

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 objeto TextBlock como en los elementos de texto en línea individuales. En estos ejemplos se muestran ambas opciones.

<TextBlock Text="Hello, world!"
           Typography.Capitals="SmallCaps"
           Typography.StylisticSet4="True"/>

TextBlock textBlock1 = new TextBlock();
textBlock1.Text = "Hello, world!";
Typography.SetCapitals(textBlock1, FontCapitals.SmallCaps);
Typography.SetStylisticSet4(textBlock1, true);

<TextBlock>12 x <Run Typography.Fraction="Slashed">1/3</Run> = 4.</TextBlock>

Obtención del código de ejemplo