Das TextBlock Kontrollobjekt - Inline Formatierung

In dem letzten Artikel betrachteten wir die Kernfunktionalität des TextBlock-Kontrollelementes: Anzeigen einer einfachen Zeichenkette und das Umschließen, wenn nötig. Wir benutzten verschiedene Farben, die sich von der Standardfarbe unterscheiden. Aber was, wenn wir mehr machen wollen als vordefinierte, statische Farben im TextBlock zu benutzen?

Glücklicherweise unterstützt das TextBock-Element Inline-Elemente. Dieses kleine Steuerelement-ähnliche Konstrukt erbt alles von der Inline-Klasse. Das bedeutet, dass es inline, d.h. als Teil des ganzen Textes, gerendert werden kann. Zum Zeitpunkt des Erstellens dieser Anleitung unterstützt das TextBlock-Element Anpassungen wie AnchoredBlock, fett gedruckte Schrift, Hyperlinks, InlineUIContainer, kursive Textteile, Zeilenumbrüche, farbige Hinterlegung und das Unterstreichen von Textteilen.

Bold (fett), Italic (kursiv) und Underline (unterstrichen)

Dies sind wohl die einfachsten Typen der Inline-Elemente. Die Namen sollten viel über die Auswirkung der Elemente verraten, aber wir wollen trotzdem ein kurzes Beispiel vorstellen, wie sie zu verwenden sind:

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

Ähnlich wie bei HTML wird der Text mit einem Bold-Tag umschlossen um fett gedruckten Text zu erzeugen und so weiter. Das macht es sehr einfach verschieden formatierte Texte in deiner Anwendung zu erstellen und anzuzeigen.

Alle drei Tags sind nur Unterklassen des Span-Elements, die jeweils eine bestimmte Eigenschaft des Span-Elements setzen, um den gewünschten Effekt zu erzeugen. Zum Beispiel setzt das Bold-Tag nur die FontWeight-Eigenschaft des dahinterliegenden Span-Elementes, der Italic-Tag setzt den FontStyle und so weiter.

LineBreak

Dies fügt einfach einen Zeilenumbruch in den Text ein. Bitte schau dir das vorherige Kapitel an. Dort nutzen wir das LineBreak-Element.

Hyperlink

Das Hyperlink-Element erlaubt es Dir einen Link in den Text einzufügen. Es wird angepasst an dein momentanes Windows-Design dargestellt, was normalerweise ein blauer, unterstrichener Text mit einem roten Effekt beim überfahren mit der Maus, sowie einer Hand als Mauscursor ist. Du kannst die NavigateUri Eigenschaft verwenden um die URL, zur der du navigieren möchtest, zu definieren. Hier ist ein Beispiel:

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

Der Hyperlink wird außerdem in WPF Seiten verwendet, um zwischen verschiedenen Seiten zu navigieren. In diesem Fall musst Du das RequestNavigate Event nicht speziell behandeln wie in unserem Beispiel, aber um externe URLs von einer regulären WPF Anwendung aufzurufen, brauchen wir dieses Event und die Process Klasse. Wir verwenden das RequestNavigate Event um die verlinkte URL in dem Standardbrowser des Benutzers, mit folgendem Code aufzurufen:

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

Run

Das Run-Element erlaubt es dir eine Zeichenkette mit allen Eigenschaften des Span-Elementes zu formatieren. Im Gegensatz zum Span-Element, welches auch andere inline Elemente enthalten kann, kann das Run-Element nur einfachen Text beinhalten. Das macht das Span-Element flexibler und ist deswegen die logische Wahl in den meisten Fällen.

Span

Das Span-Element hat standardmäßig keine spezielle Darstellungsart. Es erlaubt Dir allerdings fast jede Art der Darstellung zu verwenden, wie zum Beispiel Textgröße, -stil, und -stärke, Hinter- und Vordergrundfarben und so weiter. Das großartige am Span-Element ist, dass es Dir erlaubt andere inline Elemente innerhalb zu verwenden. Dadurch ist es einfach auch erweiterte Kombinationen von Text und Stil zu verwenden. Im folgenden Beispiel habe ich viele Span-Elemente verwendet um Dir zu zeigen, wie viele Möglichkeiten du hast, wenn du inline Elemente in Span-Elementen verwendest:

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

Wie du siehst, ist das Span-Element eine gute Wahl, wenn keine der anderen Elemente zu deiner Situation passen oder wenn du einfach eine leere Fläche beim Formatieren deines Textes haben möchtest.

Textformatierung mit C#-Code

Textformatierung mit XAML ist sehr einfach, aber in manchen Fällen sollte man C#-Code verwenden. Das ist ein wenig aufwendiger, aber hier ist ein Beispiel wie man es umsetzen könnte:

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

Es ist großartig die Möglichkeit zu haben C#-Code zu verwenden - und es ist in manchen Fällen auch notwendig - aber dieses Beispiel zeigt sehr gut den Vorteil von XAML.