El control TextBlock

Como el control TextBlock no hereda de la clase Control, no debería considerarse un control, pero como su uso en el framework WPF es similar al de cualquier otro control y por razones de simplicidad lo trataremos como a un control.

Aunque el control TextBlock es uno de los más básicos de WPF, es uno de mucha utilidad. Te permite colocar texto en la pantalla, de manera similar a como lo hace el control Label, pero más simple y consumiendo menos recursos. Normalmente se usa Label para textos cortos de una línea (que pueden contener, por ejemplo, una imágen), por otra parte, TextBlock trabaja muy bien con cadenas de texto de varias líneas, pero solo puede contener texto(strings). Tanto el Label como el TextBlock ofrecen cada uno ventajas únicas, por lo que su uso depende mucho de la situación.

Ya usamos un control TextBlock en el artículo "Hello, WPF!" , pero por ahora, veamos el TextBlock en su forma más sencilla:

<Window x:Class="WpfTutorialSamples.Basic_controls.TextBlockSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextBlockSample" Height="100" Width="200">
    <Grid>
		<TextBlock>This is a TextBlock</TextBlock>
    </Grid>
</Window>

Esto es lo más sencillo y si has leído los artículos anteriores, no debería haber nada nuevo aquí. El texto dentro del TextBlock es tan solo un atajo para colocar la propiedad Text del TextBlock.

Para el siguiente ejemplo, probemos un texto más largo para mostrar como el TextBlock lidia con eso. También agregué un pequeño margen, para que quede un poco mejor.

<Window x:Class="WpfTutorialSamples.Basic_controls.TextBlockSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextBlockSample" Height="100" Width="200">
    <Grid>
		<TextBlock Margin="10">This is a TextBlock control and it comes with a very long text</TextBlock>
    </Grid>
</Window>

Lidiando con textos largos

Como notarás enseguida de la captura de pantalla, el TextBlock es perfectamente capaz de lidiar con textos largos y de múltiples líneas, pero no hace nada por defecto. En este caso el texto es demasiado largo para ser mostrado dentro de la ventana, entonces WPF muestra todo el texto que puede y luego solamente para.

Afortunadamente, hay varias maneras de lidiar con esto. En el siguiente ejemplo te mostraré todas ellas, y luego explicaré cada una:

<Window x:Class="WpfTutorialSamples.Basic_controls.TextBlockSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextBlockSample" Height="200" Width="250">
    <StackPanel>
		<TextBlock Margin="10" Foreground="Red">
			This is a TextBlock control<LineBreak />
			with multiple lines of text.
		</TextBlock>
		<TextBlock Margin="10" TextTrimming="CharacterEllipsis" Foreground="Green">
			This is a TextBlock control with text that may not be rendered completely, which will be indicated with an ellipsis.
		</TextBlock>
		<TextBlock Margin="10" TextWrapping="Wrap" Foreground="Blue">
			This is a TextBlock control with automatically wrapped text, using the TextWrapping property.
		</TextBlock>
	</StackPanel>
</Window>

Ahora, tenemos tres controles TextBlock, cada uno con un color diferente (usando la propiedad Foreground) para una mejor visualización. Todos ellos controlan el hecho de que su contenido de texto es demasiado largo de formas diferentes:

El TextBlock rojo usa una etiqueta LineBreak para manualmente dividir la línea en un determinada posición. Ésto da absoluto control sobre dónde quieres dividir el texto en una nueva línea, pero no es muy flexible para la mayoría de situaciones. Si el usuario hace más grande la ventana, el texto se ajustará en la misma posición, aunque ahora puede haber espacio suficiente para ajustar el texto entero en una línea.

El TextBlock verde usa la propiedad TextTrimming con el valor CharacterEllipsis para hacer que el TextBlock muestre elipsis (...) al final cuando no puede ajustar más texto dentro del control. Esto es una manera común de mostrar que hay más texto, pero no suficiente sitio para mostrarlo. Esto es genial cuando tienes texto que podría ser demasiado largo pero tú no quieres usar más de una línea. Como alternativa a CharacterEllipsis tú puedes usar WordEllipsis, el cual corta el texto al final de la última palabra posible en vez del último carácter posible, previniendo que una sola palabra sea mostrada solo en parte.

El TextBlock azul usa la propiedad TextWrapping con el valor Wrap, para hacer que el texto del TextBlock salte a la siguiente línea cuando no pueda ajustar más texto dentro de la línea anterior. Contrario al primer TextBlock, donde nosotros manualmente definimos donde salta el texto, esto sucede automáticamente e incluso mejor: Es automáticamente ajustado tan pronto como el TextBlock obtenga más o se quede con menos espacio disponible. Intenta hacer la ventana del ejemplo más grande o más pequeña y verás como el ajuste del texto se actualiza según la situación.

Esto fue todo sobre el manejo de cadenas simples en el TextBlock. En el próximo capítulo, veremos alguna funcionalidad más avanzada del TextBlock, el cual nos permite crear texto con varios estilos dentro del TextBlock y mucho más.