A TextBlock vezérlő - Sorok formázása

Az utolsó cikkben átnéztük a TextBlock vezérlő lényegi funkciót: Egyszerű string megjelenítése, majd szükségszerű burkolása. Még az alapértelmezettől eltérő színt is használtunk, de mi van ha többet akarsz beállítani egy statikus betűszínnél a TextBlock szövegére?

Szerencsére a TextBlock vezérlő támogatja a sorközi tartalmakat. Ezek a kis vezérlő-szerű elemek mind az Inline class-ból örökölnek, ami azt jelenti, hogy soron belül renderelhetőek egy nagyobb szöveg részeként. Ami a kiírást illeti, a támogatott elemek között van az AnchoredBlock, Bold, Hyperlink, InlineUIContainer, Italic, LineBreak, Run, Span, és Underline. Az alábbi példákban a legtöbbjüket használni fogjuk.

Bold, Italic és Underline

Ezek valószínűleg a legegyszerűbb esetei a formázásnak. Már a nevük is árulkodóak kell, hogy legyenek, de azért mi megmutatjuk egy pár gyors példában a használatukat:

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

Hasonlóan a HTML-hez, csak körbeveszed a szöveget a Bold címkével, hogy kövéren jelenjen meg. Ezzel nagyon könnyű megkülönböztetett szöveget létrehoznod az alkalmazásaidban.

Mindhárom címke a Span elem alosztálya, mindegyik beállít egy jellemző tulajdonságot a Span elemre a kívánt hatás létrehozásához. Például, a Bold címke a FontWeight tulajdonságot állítja be a Span elemre, az Italic címke a FontStyle-t állítja át, és így tovább.

LineBreak

Egyszerűen egy sortörést illeszt be a szövegbe. Kérlek, nézd meg az előző fejezetet, ahol példának felhasználtuk a LineBreak elemet.

Hyperlink

A Hyperlink elem teszi lehetővé a link használatát a szövegben. Olyan stílusban jelenik meg, ami illik a jelenlegi Windows témádhoz, ami általában egyfajta aláhúzott kék szöveg egy piros effekttel, ha rámutatsz, és egy kéz alakú egérkurzor. Használhatod a NavigateUri tulajdonságot, hogy definiálj egy URL-t, amire menni akarsz. Itt egy példa:

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

A Hyperlink a WPF oldalain belül is használható, ahol az oldalak között navigációra használható. Ebben az esetben nem kell külön kezelned RequestNavigate eseményt, ahogy mi a példánkban, de hogy külső URL-eket indítsunk el egy általános WPF alkalmazásból, kell egy kis segítség ettől az eseménytől és a Process class-tól. Feliratkozunk a RequestNavigate eseményre, ami megengedi, hogy elindítsunk egy linkelt URL-t a felhasználó alapértelmezett böngészőjében egy egyszerű esemény kezelővel, mint ebben a fájl mögötti kódban:

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

Run

A Run elem megengedi, hogy formázz egy stringet a Span elem összes elérhető tulajdonságával, miközben a Span tartalmazhat más sorközi formázást is, a Run elem csak sima szöveget tárolhat. Ezzel a Span elem sokkal rugalmasabb, így legtöbbször ez is a logikus választás.

Span

A Span elemnek nincs alapértelmezett formázása, de megengedi, hogy szinte bármilyen egyedi renderelést használj, ideértve a betűméretet, stílust és súlyt, háttér- és betűszíneket, stb. A Span elem egy remek tulajdonsága, hogy magába foglalhat más sorközi formázásokat is, így könnyen elérve akár haladó szöveg-stílus kombinációkat. A következő példában sok Span elemet használtam, hogy megmutassak egy párat a rengeteg lehetőség közül, amikor Span elemeket használunk:

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

Ahogy látható, ha egyik másik elemnek sincs értelme a helyzetedben, vagy csak egy üres vászonnal akarsz belekezdeni a szövegformázásba, a Span elem egy remek választás.

Szöveg formázása C#/Kód segítségével

Ahogy láthattad, szöveg formázása XAML-ban nagyon könnyű, de pár esetben előnyösebb, vagy akár szükséges elvégezni mindezt C#/Kód használatával. Ez egy kicsit nehézkesebb, de itt egy példa, hogy hogyan lehet megcsinálni:

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

Jó, hogy megvan a lehetőség, és muszáj is így csinálni egy pár esetben, de ez a példa talán felértékeli számodra a XAML használatát.