The TextBlock control - Inline formatting

في اخر مقالة نظرنا الى الوظيفة الاساسية للعنصر(TextBlock): عرض نص بسيط و الاهتمام بالتفاف النص اذا احتاج الامر. حتى اننا استخدمنا لون اخر غير اللون الاساسي للنص, ولكن ماذا اذا اردنا ان نفعل اكثر من تحديد لون ثابت للنص داخل العنصر(TextBlock)؟

من الحظ ان العنصر(TextBlock ) يدعم المحتوى الداخلي, هؤلاء أشباه-العناصر الصغيرة تُبنى عن طريق ورائة (Inline class), هذا يعني انهم بأنهم بامكانهم ان يُرسمو و يظهرو داخليا, على انهم جزء من النص الاكبر. العناصر المدعومة: (AnchoredBlock, Bold, Hyperlink, InlineUIContainer, Italic, LineBreak, Run, Span, و Underline) سوف نلقي نظرة على مُعظَمُهم.

نص بخط سميك(Bold), مائل(Italic) و خط تحت النص(Underline)

هؤلاء يعتبروا ابسط انواع العناصر الداخلية. أسمائهم تشرح الكثير عن ما تقوم به هذة العناصر, و مع ذلك سوف نعطيك بعض الأمثلة عن كيفية استخدامهم:

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

شبه كبير بينهم و بين HTML, عليك فقط ان تحيط النص بين وسم الخط السميك للحصول على خط سميك و على نفس الغرار. هذا ما يجعل الامر سهل للغاية لانشاء و عرض مختلف النصوص في تطبيقك.

هؤلاء الأوسمة الثلاثة هم فقط صفوف مشتقة(child classes) من العنصر (Span), الأوسمة تمثل خصائص معينة من العنصر(Span) و التي تقوم باضفاء التأثير المطلوب. على سبيل المثال, وسم الخط السميك يقوم فقط بتعين خاصية وزن الخط(FontWeight) لمحتوى العنصر(Span), وسم الخط المائل يقوم بتعين خاصية نمط الخط(FontStyle) , وهكذا...

سطر فاصل(فارغ)

بكل بساطة يضيف سطر فاصل للنص. الرجاء القي نظرة على الفصل السابق لمثال عن كيفية استخدام هذا العنصر.

ارتباط تشعبي

عنصر الارتباط التشعبي يسمح لك باضافة روابط في النص. يُعرض بنمط يتماشى مع ثيم (theme) الحالي, غالباً سوف يكون نص بلون أزرق مع خط اسفلهُ مع تأثير بلون احمر عند تحريك المؤشر عليه ويتحول مؤشر الفأرة الى يد. بامكانك استخدام خاصية(NavigateUri) لتعين رابط التي تريد ان يتم توجيه المستخدم له, و هذا مثال:

<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) يمكن ان يستخدم ايضا داخل صفحات WPF بحيث يستخدم ايضاً للتنقل بين صفحاته,في هذه الحالة لست مضطر للاهتمام بالحدث "RequestNavigate" كما فعلنا في المثال السابق, لكن لتقوم ببدء روابط خارجية من داخل التطبيق, نحتاج بعض المساعدة من هذا الحدث و "صف العملية" (Process class). نقوم بانشاء و تسجيل هذا الحدث الذي يسمح لنا ببدء و فتح الرابط باستخدام المتصفح الافتراضي للمستخدم عن طريق معالج حدث(event handler) بسيط في ملف الكود(#C) كهذا:

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

(run)

عنصر "Run" يسمح لك بتغيير نمط وشكل النص مع جميع خصائص عنصر "Span" المتوفرة, ولكن بينما عنصر "Span" ممكن ان يحوي عناصر داخلية, على النقيض فإن عنصر "Run" يمكن ان يحوي فقط نص عادي. هذا ما يجعل عنصر "Span" اكثر مرونة بحيث يكون الخيار المنطقي في اكثر الحالات.

امتداد(Span)

عنصر "Span" لا يملك اي خصائص عرض بشكل افتراضي, و لكن يسمح لك بتعين تقريبا معظم انواع خصائص العرض, بما في ذلك حجم الخط, النمط و الوزن, لون الخط و لون خلفية الخط وهكذا... الشيئ الرائع بالعنصر "Span" بأنه يسمح ايضاً بوجود عناصر داخلية داخله, مما يسمح بصنع خليط انماط و اشكال متقدم بكل سهولة. في المثال التالي, لقد استخدمت عدة عناصر من "Span" لأعرض لكم بعض الإمكانيات مع استخدام العناصر الداخلية للعنصر "Span".

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

كما رأينا في المثال, بإمكانك استخدام العنصر "Span" لتشكيل النص و تغير نمطه بكل سهولة هذا ما يجعل العنصر "Span" خيار رائع.

تنسيق النص من الكود(#C)

كما رأينا تنسيق النص عن طريق "XAML" سهل للغاية, و لكن في بعض الحالات, يمكن ان تضطر او تفضل او تحتاج ان تفعل ذلك في الكود "#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;
		}
	}
}

من الرائع الحصول على هذه الإمكانية, و من الممكن ان تحتاج ان تفعل هذا في بعض الحالات, ولكن هذا المثال سيجعلك تقدّر "XAML" أكثر