Kontrolka TextBlock

TextBlock nie jest kontrolką w sensie dosłownym, ponieważ nie dziedziczy z klasy Control, ale jest używany podobnie jak każda inna kontrolka w WPF, więc dla uproszczenia sprawy będziemy go określać jako kontrolkę.

TextBlock jest jedną z najbardziej podstawowych kontrolek w WPF, jest jednak bardzo przydatny. Pozwala wyświetlać tekst na ekranie, podobnie jak kontrolka Label, ale w prostszy, wymagający mniej zasobów sposób. Powszechnie przyjmuje się, że kontrolka Label jest stosowana dla krótkich, jedno-linijkowych tekstów (chociaż może zawierać np. obrazek), podczas gdy TextBlock spisuje się bardzo dobrze dla wielo-liniowych stringów, jednak ten może zawierać jedynie tekst (stringi). Zarówno kontrolka Label jak i TextBlock posiadają swoje unikalne cechy, tak więc dobór odpowiedniej kontrolki zależy od sytuacji.

Używaliśmy już kontrolki TextBlock w artykule "Witaj, WPF", ale teraz przyjrzyjmy się tej kontrolce w jej najprostszej formie:

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

Jest to takie proste na jakie wygląda, a jeśli czytałeś poprzednie rozdziały tego poradnika, to nie powinno się tu znaleźć dla ciebie nic nowego. Tekst wewnątrz tagów 'TextBlock' jest skróconą formą ustawienia własności Text kontrolki TextBlock.

W następnym przykładzie spróbujmy wykorzystać dłuższy tekst, aby pokazać jak TextBlock sobie z nim poradzi. Dodałem również niewielki margines, aby wyglądało to trochę lepiej.

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

Praca z długimi stringami

Spoglądając za chwile na screenshot przekonasz się, że TextBlock jest w pełni zdolny do radzenia sobie z długimi, wielo-liniowymi tekstami, ale nie uczyni tego domyślnie. W tym przypadku tekst jest zbyt długi by mógł zostać wyrenderowany wewnątrz okna, więc WPF renderuje tylko tyle tekstu ile jest możliwe a potem po prostu przestaje.

Na szczęście istnieje kilka sposobów aby poradzić sobie w takiej sytuacji. W kolejnym przykładzie pokaże ci wszystkich z nich i omówię każdy z osobna.

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

Mamy więc trzy kontrolki typu TextBlock, każda w innym kolorze (zmieniono im własności Foreground), aby łatwiej było je rozróżnić. Wszystkie te kontrolki radzą sobie z faktem, że tekst w ich wnętrzu jest zbyt długi, lecz każda w inny sposób.

Czerwony TextBlock wykorzystuje tag LineBreak, który pozwala na ręczne przejście do nowej linii w wyznaczonym miejscu. To daje ci pełną kontrolę nad tym, w którym miejscu tekst przechodzi do nowej linii, jednak w wielu sytuacjach nie jest to zbyt elastyczne rozwiązanie. Jeśli użytkownik rozszerzy okno, tekst znów zawinie się w tych samych miejscach, nawet gdyby było wystarczająco miejsca na wyświetlenie go w całości w jednej linii.

Zielony TextBlock wykorzystuje własność TextTrimming ustawioną na wartością CharacterEllipsis, dzięki czemu TextBlock wyświetla wielokropek (...) w momencie gdy nie może pomieścić w sobie więcej tekstu. Jest to powszechna metoda zasygnalizowania, że tekstu jest więcej, jednak niewystarczająca ilość miejsca uniemożliwia jego pokazanie. Jest to świetne rozwiązanie, kiedy masz do wyświetlenia zbyt długi tekst, ale absolutnie nie chcesz, żeby zajął więcej niż jedną linię. Jako alternatywę do CharacterEllipsis możesz wykorzystać własność WordEllipsis, która obetnie tekst po ostatnim możliwym do wyświetlenia słowie, zamiast po ostatnim znaku, co zapobiega sytuacjom, w których wyrazy są wyświetlane częściowo.

Niebieski TextBlock wykorzystuje własność TextWrapping ustawioną na wartość Wrap, co pozwala na zawijanie wierszy w momencie gdy tekst nie może pomieścić się w danej linii. W przeciwieństwie do pierwszej kontrolki, w której ręcznie definiujemy w którym miejscu ma wystąpić przejście do nowej linii, tutaj dzieje się to w pełni automatycznie nawet wtedy gdy zmienia się ilość dostępnej przestrzeni dla kontrolki TextBlock. Spróbuj zwiększyć lub zmniejszyć okno zaprezentowane w przykładzie i zobaczysz jak zawijanie wierszy dostosowuje się do bieżącej sytuacji.

Ten rozdział poświęcony był wyłącznie radzeniu sobie z prostymi stringami w kontrolce TextBlock. W następnym rozdziale przyjrzymy się bardziej zaawansowanym funkcjonalnościom kontrolki TextBlock, które pozwolą nam na stosowanie rozmaitych styli i znacznie więcej.