Il controllo TextBlock - formattazione inline

Nell'ultimo articolo abbiamo esaminato le funzionalità principali del controllo TextBlock: visualizzare una stringa semplice e racchiuderla se necessario. Abbiamo persino usato un altro colore rispetto a quello predefinito per il rendering del testo, ma cosa succederebbe se volessi fare qualcosa di più della semplice definizione di un colore statico per tutto il testo in TextBlock?

Fortunatamente il controllo TextBlock supporta il contenuto in linea. Questi piccoli costrutti simili ai controlli ereditano tutti dalla classe Inline, il che significa che possono essere resi in linea, come parte di un testo più grande. Al momento della scrittura, gli elementi supportati includono AnchoredBlock, Bold, Hyperlink, InlineUIContainer, Italic, LineBreak, Run, Span e Underline. Nei seguenti esempi, daremo un'occhiata alla maggior parte di essi.

Grassetto, Italico e Sottolineato

Questi sono probabilmente i tipi più semplici di elementi in linea. I nomi dovrebbero dirti molto su quello che fanno, ma ti daremo ancora un esempio veloce su come usarli:

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

In modo simile all'HTML, basta circondare il testo con un tag Bold per ottenere testo in grassetto e così via. Ciò semplifica la creazione e la visualizzazione di testi diversi nelle applicazioni.

Tutti e tre questi tag sono solo classi figlie dell'elemento Span, ognuno dei quali imposta una proprietà specifica sull'elemento Span per creare l'effetto desiderato. Ad esempio, il tag Bold imposta semplicemente la proprietà FontWeight sull'elemento Span sottostante, l'elemento Italic imposta FontStyle e così via.

Interruzione di riga

Inserisce semplicemente un'interruzione di riga nel testo. Si prega di consultare il capitolo precedente per un esempio in cui utilizziamo l'elemento LineBreak.

Hyperlink

L'elemento Hyperlink ti consente di avere collegamenti nel testo. Viene reso con uno stile adatto al tema corrente di Windows, che di solito è una sorta di testo blu sottolineato con un effetto hover rosso e un cursore del mouse. È possibile utilizzare la proprietà NavigateUri per definire l'URL a cui si desidera navigare. Ecco un esempio:

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

L' Hyperlink viene utilizzato anche all'interno delle pagine di WPF, dove può essere utilizzato per navigare tra le pagine. In tal caso, non dovrai gestire specificamente l'evento RequestNavigate, come facciamo nell'esempio, per l'avvio di URL esterni da una normale applicazione WPF, abbiamo bisogno di un po di aiuto da questo evento e dalla classe Process. Ci iscriviamo all'evento RequestNavigate, che ci consente di avviare l'URL collegato nel browser predefinito degli utenti con un semplice gestore di eventi come questo nel file di codice sottostante:

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

Run

L'elemento Run consente di disegnare una stringa utilizzando tutte le proprietà disponibili dell'elemento Span, ma mentre l'elemento Span può contenere altri elementi inline, un elemento Run può contenere solo testo normale. Ciò rende l'elemento Span più flessibile e quindi la scelta logica nella maggior parte dei casi.

Span

L'elemento Span non ha un rendering specifico per impostazione predefinita, ma consente di impostare quasi ogni tipo di rendering specifico, tra cui dimensioni, stile e peso del carattere, colori di sfondo e di primo piano e così via. La cosa grandiosa dell'elemento Span è che consente di inserire altri elementi inline al suo interno, facilitando così anche combinazioni avanzate di testo e stile. Nell'esempio seguente, ho utilizzato molti elementi Span per mostrare alcune delle molte possibilità quando si utilizzano elementi di span inline:

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

Come puoi vedere, se nessuno degli altri elementi ha senso nella tua situazione o se desideri solo una tela bianca quando inizi a formattare il testo, l'elemento Span è un'ottima scelta.

Formattare il testo da C#/Code-Behind

Come puoi vedere, la formattazione del testo tramite XAML è molto semplice, ma in alcuni casi potresti preferire o addirittura doverla eseguire dal tuo file C # / Code-Behind. Questo codice è un po' più ingombrante, ma ecco un esempio di come puoi farlo:

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

È fantastico avere questa possibilità, in alcuni casi può essere necessario farlo in questo modo, ma questo esempio probabilmente ti farà apprezzare ancora di più XAML.