El control TextBlock - Formato en línea

En el último artículo vimos la funcionalidad principal del control TextBlock: mostrar una cadena de texto sencilla introduciendo saltos de línea si son necesarios. Incluso empleamos otro color que el predefinido para generar el texto, pero ¿y si usted quisiera hacer algo más que definir un color estático para todo el texto en el TextBlock?

Afortunadamente, el control TextBlock admite contenido en línea. Estas pequeñas construcciones, similares a controles, derivan de la clase Inline, lo que significa que pueden ser generadas en línea, como parte de un texto mayor. En el momento de escribir este artículo, los elementos soportados incluyen AnchoredBlock (bloque anclado), Bold (negrita), Hyperlink (hipervínculo), InlineUIContainer (contenedor de controles), Italic (cursiva), LineBreak (salto de línea), Run (texto con formato), Span (texto y elementos con formato) y Underline (subrayado). En los siguientes ejemplos veremos la mayor parte de ellos.

Bold, Italic y Underline

Estos son, probablemente, los elementos en línea más simples. Sus nombres en inglés dicen mucho sobre lo que hacen, pero aun así veamos cómo utilizarlos con un rápido ejemplo:

<Window x:Class="WpfTutorialSamples.Basic_controls.TextBlockInlineSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextBlockInlineSample" Height="100" Width="300">
    <Grid>
		<TextBlock Margin="10" TextWrapping="Wrap">
			TextBlock with <Bold>bold</Bold>, <Italic>italic</Italic> and <Underline>underlined</Underline> text.
		</TextBlock>
    </Grid>
</Window>

De forma similar al HTML, simplemente encierre el texto deseado con una etiqueta Bold para obtener texto en negrita, y así con el resto de etiquetas. Eso hace que sea muy sencillo crear y mostrar diversos textos en sus aplicaciones.

Estas tres etiquetas son especializaciones del elemento Span, cada una estableciendo una propiedad concreta del elemento Span para obtener el efecto deseado. Por ejemplo, la etiqueta Bold simplemente establece la propiedad FontWeight del elemento Span subyaciente, la etiqueta Italic establece la propiedad FontStyle y así sucesivamente.

LineBreak

Introduce un salto de línea forzado en un punto del texto. Vea el capítulo anterior para obtener un ejemplo de dónde usar el elemento LineBreak.

Hyperlink

El elemento Hyperlink le permite introducir enlaces en sus textos, con un aspecto visual acorde con el tema de Windows activo, lo que suele ser alguna tonalidad de color azul cambiando a rojo cuando el cursor se coloca encima y teniendo éste último forma de mano. Puede usar la propiedad NavigateUri para definir la URL a la que desea navegar. Por ejemplo:

<Window x:Class="WpfTutorialSamples.Basic_controls.TextBlockHyperlinkSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextBlockHyperlinkSample" Height="100" Width="300">
	<Grid>
		<TextBlock Margin="10" TextWrapping="Wrap">
			This text has a <Hyperlink RequestNavigate="Hyperlink_RequestNavigate" NavigateUri="https://www.google.com">link</Hyperlink> in it.
		</TextBlock>
	</Grid>
</Window>

El Hyperlink también puede ser usado en páginas WPF, donde permite navegar entre diferentes páginas. En ese caso, no será necesario gestionar explícitamente el evento RequestNavigate, como hacemos en el ejemplo, pero para poder abrir URLs externas desde una aplicación de escritorio WPF, es necesario implementar este evento y hacer uso de la clase Process. Nos suscribimos al evento RequestNavigate, lo que nos permite abrir la URL enlazada en el navegador predefinido del usuario con un simple manejador de evento como este en el archivo de código subyaciente:

private void Hyperlink_RequestNavigate(object sender, System.Windows.Navigation.RequestNavigateEventArgs e)
{
	System.Diagnostics.Process.Start(e.Uri.AbsoluteUri);
}

Run

El elemento Run le permite dar formato a una cadena de texto utilizando todas las propiedades disponibles en el elemento Span, pero mientras que éste puede contener en su interior otros elementos en línea, un elemento Run solo puede contener texto. Eso hace del elemento Span más flexible y, por tanto, la elección más lógica en la mayor parte de los casos.

Span

El elemento Span no tiene un formato específico predefinido, pero le permite especificar casi cualquier tipo de formato, incluyendo el tamaño, estilo y grosor de la fuente, los colores de fondo y del texto, etc. Lo mejor del elemento Span es que permite contener otros elementos en línea en su interior, facilitando la construcción de combinaciones avanzadas de textos y estilos. En el siguiente ejemplo, he utilizado muchos elementos Span para mostrarle muchas de las posibilidades disponibles al usar elementos Span en línea:

<Window x:Class="WpfTutorialSamples.Basic_controls.TextBlockSpanSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextBlockSpanSample" Height="100" Width="300">
    <Grid>
		<TextBlock Margin="10" TextWrapping="Wrap">
			This <Span FontWeight="Bold">is</Span> a
			<Span Background="Silver" Foreground="Maroon">TextBlock</Span>
			with <Span TextDecorations="Underline">several</Span>
			<Span FontStyle="Italic">Span</Span> elements,
			<Span Foreground="Blue">
				using a <Bold>variety</Bold> of <Italic>styles</Italic>
			</Span>.
		</TextBlock>
	</Grid>
</Window>

De modo que, como puede ver, si ninguno de los otros elementos tiene sentido en sus circunstancias, o si solo quiere un lienzo en blanco donde empezar a definir sus estilos, el elemento Span es una muy buena elección.

Formatear texto desde C#/Code-Behind

Como puede ver, formatear texto mediante XAML es muy fácil, pero hay casos en los que podría preferir, o incluso necesitar, hacerlo desde un archivo de código subyaciente en C#. Aquello es algo más tedioso, pero a continuación se ilustra un modo posible para hacerlo:

<Window x:Class="WpfTutorialSamples.Basic_controls.TextBlockCodeBehindSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextBlockCodeBehindSample" Height="100" Width="300">
    <Grid></Grid>
</Window>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Media;

namespace WpfTutorialSamples.Basic_controls
{
	public partial class TextBlockCodeBehindSample : Window
	{
		public TextBlockCodeBehindSample()
		{
			InitializeComponent();
			TextBlock tb = new TextBlock();
			tb.TextWrapping = TextWrapping.Wrap;
			tb.Margin = new Thickness(10);
			tb.Inlines.Add("An example on ");
			tb.Inlines.Add(new Run("the TextBlock control ") { FontWeight = FontWeights.Bold });
			tb.Inlines.Add("using ");
			tb.Inlines.Add(new Run("inline ") { FontStyle = FontStyles.Italic });
			tb.Inlines.Add(new Run("text formatting ") { Foreground = Brushes.Blue });
			tb.Inlines.Add("from ");
			tb.Inlines.Add(new Run("Code-Behind") { TextDecorations = TextDecorations.Underline });
			tb.Inlines.Add(".");
			this.Content = tb;
		}
	}
}

Es estupendo tener la posibilidad, incluso puede ser necesario hacerlo así en algunos casos, pero el ejemplo anterior probablemente le haga apreciar aún más el XAML.