TextBlock - formatowanie tekstu

W poprzednim artykule przyjrzeliśmy się podstawowej funkcjonalności kontrolki TextBlock: wyświetlanie zwykłego tekstu oraz łamanie wierszy, gdy to konieczne, również użyliśmy innego koloru niż domyślny. Jednak co musimy zrobić aby uzyskać coś więcej niż zwykły kolor w całej kontrolce?

Całe szczęście TextBlock obsługuje formatowanie w tekście. Te mały tagi, które przypominają kontrolki, pochodzą od klasy Inline, co znaczy, że mogą zostać użyte wewnątrz większego tekstu. W momencie pisania tego tekstu dostępne elementy to: AnchoredBlock, Bold, Hyperlink, InlineUIContainer, Italic, LineBreak, Run, Span, i Underline. W następnych przykładach przybliżymy większość z nich.

Pogrubienie, pochylenie i podkreślenie

Najprawdopodobniej są to najpopularniejsze elementy wykorzystywane w tekście. Ich nazwy powinny wskazywać już na to, co robią, jednak dla pewności pokażemy Ci przykład jak ich używać:

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

Podobnie jak w HTML potrzeba po prostu otoczyć tekst tagiem Bold aby uzyskać pogrubiony tekst (i tym podobnie dla pozostałych znaczników). Takie podejście pozwala na łatwe stworzenie różnorodnego tekstu w aplikacji.

Wszystkie trzy znaczniki są pochodnymi elementami Span, a każdy z nich określa pewne właściwości aby osiągnąć zamierzony efekt. Dla przykładu znacznik Bold ustawia parametr FontWeight, natomiast znacznik Italic ustawia właściwość FontStyle.

Łamanie linii

Proste złamanie linii w wybranym miejscu. Przykłady, jak używać znacznika LineBreak, znajdują się w poprzednim rozdziale.

Hiperłącze

Element Hyperlink pozwala wstawiać linki do tekstu. Są one rysowane z uwzględnieniem bieżącego stylu Windows'a, który to zazwyczaj określa je jako niebieski podkreślony tekst z efektem zmiany koloru na czerwony po najechaniu kursorem (który zmienia się do tego w ikonę ręki). Przykład poniżej:

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

Hyperlink można wykorzystać również do nawigacji między stronami aplikacji - w takim przypadku nie trzeba dodawać obsługi zdarzenia RequestNavigate. Reakcja na to zdarzenie jest wymagana tylko w przypadku linków prowadzących na zewnątrz aplikacji WPF. Metoda wywoływana na zdarzenie RequestNavigate, która pozwoli nam na uruchomienie adresu URL w domyślnej przeglądarce dzięki użyciu klasy Process wygląda następująco:

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

Run (ciąg)

Element Run pozwala na stylizowanie tekstu umożliwiając dostęp do wszystkich właściwości klasy Span, ale z jednym ograniczeniem: kiedy Span może zawierać w sobie inne elementy formatujące wewnątrz (składanie różnych formatowań), tak element Run może w sobie zawierać tylko i wyłącznie czysty tekst (jego formatowanie musi być ciągłe). Takie podejście czyni element Span bardziej uniwersalnym wyborem w większości przypadków.

Span (zakres)

Element Span nie posiada domyślnie żadnego formatowania, ale pozwala za to łatwo określić różne efekty w tekście, który jest w jego zakresie, włączając w to rozmiar czcionki, pogrubienie, czy jej kolor, oraz tło i inne. Ciekawą rzeczą, na którą pozwala Span, jest zagnieżdżanie elementów, co umożliwia nam zrobienie skomplikowanego formatowania w prosty sposób. W następującym przykładzie użyłem wiele elementów Span aby pokazać kilka z możliwości wykorzystania tego znacznika:

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

Więc, jak widzisz, jeśli żaden inny element nie pasuje do twoich potrzeb, bądź potrzebujesz czegoś aby zacząć tworzyć twoje własne formatowanie, to element Span będzie dobrym wyborem.

Formatowanie tekstu z kodu za-widokiem.

Jak widzisz formatowanie tekstu w XAML jest bardzo proste, jednak w niektórych przypadkach powstaje potrzeba zrobienia tego programowo. Jest to trochę mniej wygodne rozwiązanie, jednak czasami konieczne. Poniżej przykład jak sformatować tekst w języku C#:

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

Wspaniale jest mieć możliwości, i czasem może przyjść moment, kiedy będziemy zmuszeni formatować tekst właśnie w ten sposób. Możliwe jednak, że ten przykład spowoduje, że jeszcze bardziej docenisz język XAML.