Het TextBlock besturingselement

TextBlock is geen besturingselement, per se, aangezien het niet erft van de Control klasse, maar het wordt gebruikt zoals elk ander besturingselement in het WPF framework. Daarom beschouwen we het als een besturingselement om het eenvoudig te houden.

De TextBlock control is één van de meest fundamentele controls in WPF en is erg nuttig. Hij stelt je in staat tekst op het scherm te plaatsen, ongeveer zoals een Label control doet, maar op een eenvoudigere manier, die minder resources nodig heeft. Gebruikelijk is om een Label toe te passen voor korte éénregelige tekst (die bijvoorbeeld wel een Image mag bevatten), terwijl het TextBlock ook goed werkt voor meerdere regels tekst, maar een TextBlock kan alleen tekst bevatten. Zowel het Label als het TextBlock bieden hun eigen unieke voordelen, dus wat je gebruikt hangt erg af van de situatie.

We hebben een TextBlock-besturingselement al gebruikt in het "Hallo, WPF" artikel, maar voor nu, laten we kijken naar het TextBlock in de eenvoudigste vorm:

<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>

Dit is zo eenvoudig als het maar kan zijn en als je de vorige hoofdstukken van deze tutorial hebt gelezen, is er hier niets nieuws. De tekst in het TextBlock plaatsen is simpelweg een snellere manier om de Text-eigenschap (en: property) van het TextBlock te definiëren.

Laten we voor het volgende voorbeeld een langere tekst proberen om te tonen hoe het TextBlock daar mee omgaat. Ik heb ook wat marge toegevoegd, om het er net iets beter te laten uitzien.

<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>

Omgaan met lange teksten

Zoals spoedig uit de screenshot zal blijken, is het TextBlock perfect in staat om met lange teksten van meerdere regels om te gaan, maar het doet niets uit zichzelf. In dit geval is de tekst te lang om in het venster te worden weergegeven, dus geeft WPF zoveel mogelijk tekst weer en stopt dan.

Gelukkig zijn er meerdere methoden om hiermee om te gaan. In het volgende voorbeeld laat ik ze allemaal zien en zal ik elk voorbeeld daarna toelichten:

<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>

We hebben drie TextBlock-besturingselementen, elk met een verschillende kleur (gebruikmakend van de Foreground-eigenschap) om het overzichtelijk te houden. Elk voorbeeld behandelt de te lange tekstinhoud op een andere manier:

Het rode TextBlock gebruikt een LineBreak tag om handmatig de regel af te breken op de gewenste plaats. Dit geeft absolute controle over waar de tekst overgaat naar een nieuwe regel, maar het is in veel omstandigheden niet erg flexibel. Als de gebruiker het venster groter maakt, zal de tekst nog op dezelfde plaats een regelovergang hebben, zelfs als er nu genoeg ruimte is, zodat de hele tekst op één regel past.

Het groene TextBlock gebruikt de TextTrimming-eigenschap met de waarde CharacterEllipsis om het TextBlock een ellipsis (...) te laten tonen als niet alle tekst in het element past. Dit is een gangbare werkwijze om te laten zien dat er meer tekst is, maar niet genoeg ruimte om deze te laten zien. Dit is prima wanneer je tekst hebt die misschien te lang is, maar als je absoluut niet meer dan één regel wilt gebruiken. Als alternatief voor CharacterEllipsis kun je ook WordEllipsis gebruiken, die de tekst afbreekt aan het eind van het laatste hele woord dat getoond kan worden in plaats van het laatste character, waarmee wordt voorkomen dat slechts een deel van het woord wordt weergegeven.

Het blauwe TextBlock gebruikt de TextWrapping-eigenschap met de waarde Wrap, die ervoor zorgt dat het TextBlock op de volgende regel verder gaat als de tekst niet meer op de regel past. In tegenstelling tot het eerste TextBlock, waar we handmatig de regelovergang bepalen, gebeurt dit volledig automatisch - en nog beter: het wordt automatisch aangepast zodra het TextBlock meer of minder ruimte beschikbaar heeft. Probeer om het venster in het voorbeeld breder of smaller te maken en je ziet hoe de regelovergang wordt aangepast aan de situatie.

Dit was alles over eenvoudige teksten in het TextBlock. In het volgende hoofdstuk kijken we naar enkele meer geavanceerde mogelijkheden van het TextBlock, waarmee we tekst met verschillende stijlen binnen hetzelfde TextBlock kunnen maken en veel meer.