The TextBlock control

TextBlock сам по собі не є елементом управління, оскільки він не успадковується від класу Control, але він використовується, як і будь-який інший елемент управління в WPF framework, тому ми для спрощення будемо називати його елементом управління.

Елемент управління TextBlock є одним з найбільш фундаментальних елементів у WPF, але дуже корисним. Він дозволяє виводити текст на екран, подібно до елементу Label, але простіше і з меншими вимогами до ресурсів. Загально прийнято, що Label призначений для коротких текстів на одному рядку (але може містити, наприклад, зображення), тоді як TextBlock працює добре із багаторядковими рядками, але може містити лише текст (рядки). Як Label, так і TextBlock мають свої унікальні переваги, тому вибір між ними залежить від конкретної ситуації.

Ми вже використовували елемент управління TextBlock у "Hello, WPF!" статті, але зараз, давайте подивимось на елемент TextBlock в його найпростішій формі:

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

Це настільки просто, як це тільки може бути, і якщо ви прочитали попередні розділи цього посібника, то тут нічого нового немає. Текст між тегами TextBlock просто являє собою швидкий спосіб встановлення властивості Text елемента TextBlock.

Для наступного прикладу спробуємо використати довший текст, щоб показати, як TextBlock справляється з ним. Також я додав невеликий відступ, щоб виглядало трохи краще:

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

Робота з довгими рядками

Як ви незабаром побачите на знімку екрана, TextBlock чудово справляється з довгими багаторядковими текстами, але він не робить жодних додаткових дій за замовчуванням. У цьому випадку текст є занадто довгим, щоб його можна було відобразити всередині вікна, тому WPF відображає якомога більше тексту, а потім просто зупиняється.

На щастя, є кілька способів впоратися з цим. У наступному прикладі я покажу вам всі з них, а потім поясню кожен з них:

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

Отже, у нас є три елементи управління TextBlock, кожен з власним кольором (за допомогою властивості Foreground) для зручного огляду. Вони всі обробляють той факт, що їх вміст тексту є занадто довгим, за допомогою різних підходів:

Елемент управління TextBlock з червоним кольором використовує тег LineBreak, щоб вручну розривати рядок у визначеному місці. Це дає вам абсолютний контроль над тим, де ви хочете перенести текст на новий рядок, але це не дуже гнучкий підхід для більшості ситуацій. Якщо користувач збільшує вікно, текст все одно буде переноситись на новий рядок в тому ж самому місці, навіть якщо тепер є достатньо місця для вміщення всього тексту на один рядок.

Елемент управління TextBlock з зеленим кольором використовує властивість TextTrimming зі значенням CharacterEllipsis, щоб зробити TextBlock показувати місце між символами (...) тоді, коли він не може вмістити весь текст у контролі. Це поширений спосіб показувати, що є ще текст, але недостатньо місця, щоб показати його повністю. Це чудово підходить, коли у вас є текст, який може бути занадто довгим, але ви абсолютно не хочете, щоб він використовував більше одного рядка. Як альтернативу до CharacterEllipsis, можна використовувати значення WordEllipsis, яке обрізатиме текст в кінці останнього можливого слова замість останнього можливого символу, щоб уникнути того, що слово відображається тільки частково.

Елемент управління TextBlock з синім кольором використовує властивість TextWrapping зі значенням Wrap, щоб зробити TextBlock автоматично переносити текст на наступний рядок, якщо він не може вмістити весь текст у поточному рядку. На відміну від першого TextBlock, де ми вручну визначаємо місце перенесення тексту, це відбувається повністю автоматично і ще краще: це також автоматично коригується, як тільки TextBlock отримує більше або менше доступного простору. Спробуйте збільшити або зменшити вікно в прикладі, і ви побачите, як перенесення тексту оновлюється для відповідності ситуації.

Це було все про роботу з простими рядками у TextBlock. У наступному розділі ми розглянемо деякі більш складні функції TextBlock, які дозволяють нам створювати текст з різними стилями всередині TextBlock і багато іншого.