The Label control

إن المكون Label، في أبسط أشكاله، مشابه جداً للمكون TextBlock الذي استخدمناه في مقال آخر. ستلاحظ فوراً بأن المكون Label لديه خاصية Content بدلاً من خاصية Text في المكون TextBlock. السبب هو أن Label يستطيع احتواء أي نوع من المكونات ضمنه بشكل مباشر، عوضاً عن إمكانية وضع النصوص text ضمنه. هذا المحتوى content قد يكون سلسلة محرفية string أيضاً كما سترى في هذا المثال الأول والبسيط جداً.

<Window x:Class="WpfTutorialSamples.Basic_controls.LabelControlSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="LabelControlSample" Height="100" Width="200">
    <Grid>
		<Label Content="This is a Label control." />
	</Grid>
</Window>

قد تلاحظ شيئاً آخر، وهي حقيقة وجود خاصية padding بسيطة للمكون Label، مما يسمح للنص بالابتعاد عن الزاوية اليسارية العليا Top Left بعض البكسلات. وهذا ليس موجوداً في المكون TextBlock حيث ينبغي تحديده يدوياً.

في حالة بسيطة مثل هذه، حيث أن المحتوى content هي ببساطة سلسلة نصية string، سيقوم المكون Label فعلياً بإنشاء TextBlock ضمنياً وعرض السلسلة النصية string فيها.

المكون Label مقابل المكون TextBlock

بالتالي لماذا نستخدم المكون Label إذاً؟ حسناً، هناك القليل من الاختلافات المهمة بين المكونين Label و TextBlock. تسمح TextBlock بعرض سلاسل نصية string فقط. بينما تسمح Label بالإضافة لذلك ما يلي:

• تعيين الحدود border
• عرض مكونات أخرى، مثلاً صورة....
• استخدام محتوى لنموذج/قالب من خلال الخاصية ContentTemplate.
• استخدم مفاتيح الوصول للتركيز على عناصر التحكم المستهدفة

النقطة الأخيرة المهمة وهي فعلياً واحدة من الأسباب الرئيسية لاستخدام Label بدلاً عن TextBlock. كلما أردت عرض نصوص بسيطة فقط، ينبغي أن تستخدم TextBlock، فهي أخف وتحقق أداء أفضل من Label في معظم الحالات.

Label and Access keys (mnemonics)

في نظام التشغيل ويندوز وفي أنظمة التشغيل الأخرى، هناك شيئا شائعا وهو أنه بإمكانك الوصول للمكونات في أي مربع حوار بالضغط على زر Alt ضغطًا مطولًا ومن ثم الضغط على الحرف الذي يؤدي إلى المكون الذي تريد الوصول إليه. الحرف الذي يجب الضغط عليه سيتم وضع خط تحته في مربع الحوار عند ضغطك على زر Alt ضغطًا مطولًا. المكون TextBlock لايدعم هذه الخاصية، ولكن مكون Label يدعم هذه الخاصية، وبالتالي مكون Label هو الخيار الأفضل في هذه الحالة. لنرى مثالًا على هذا المكون:

<Window x:Class="WpfTutorialSamples.Basic_controls.LabelControlSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="LabelControlSample" Height="180" Width="250">
	<StackPanel Margin="10">
		<Label Content="_Name:" Target="{Binding ElementName=txtName}" />
		<TextBox Name="txtName" />
		<Label Content="_Mail:" Target="{Binding ElementName=txtMail}" />
		<TextBox Name="txtMail" />
	</StackPanel>
</Window>

عند ضغطك على زر Alt سترى بأن هناك خط تحت كل من Name و Mail كما يظهر في الصورة. قم بتجربة الكود، قم بالضغط على زر Alt ضغطا مطولًا ثم أضغط على زر N أو زر M، سترى تغيّر تركيز المؤشر بين مربعي النص، فزر M سيجلب تركيز المؤشر على Mail وكذلك N سيجلب تركيز المؤشر على Name.

إذًا، هناك عدة طرق لدينا، أولًا، نقوم بتعريف مفتاح وصول عن طريق وضع شَرطة سفلية (_) قبل الحرف. لايستوجب أن تكون أول حرف ولكن من الممكن أن تكون قبل أي حرف من نص Label. أكثر طريقة شائعة لوضع الشَرطة السفلية هو قبل الحرف الأول الذي لم يستخدم كمفتاح وصول لمكوّن آخر.

نقوم باستخدام خاصية الهدف Target لربط Label مع مكون معين. نستخدم طريقة ربط تقليدية في WPF، إذا نستخدم خاصية ElementName في اسم المكون المراد بالربط، لذا عند تغيير اسم المكوّن، عليك تغيير الربط أيضًا.

استخدام عناصر التحكم(Controls) كمحتوى ملصق(Label)

كما ذكرنا سابقًا، يسمح لك التحكم في الملصق (Label) باستضافة عناصر تحكم أخرى، مع الحفاظ على المزايا الأخرى. دعونا نجرب مثالاً حيث لدينا صورة وقطعة من النص داخل الملصق (Label)، مع وجود مفتاح وصول لكل من الملصقات(Labels):

<Window x:Class="WpfTutorialSamples.Basic_controls.LabelControlAdvancedSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="LabelControlAdvancedSample" Height="180" Width="250">
	<StackPanel Margin="10">
		<Label Target="{Binding ElementName=txtName}">
			<StackPanel Orientation="Horizontal">
				<Image Source="http://cdn1.iconfinder.com/data/icons/fatcow/16/bullet_green.png" />
				<AccessText Text="_Name:" />
			</StackPanel>
		</Label>
		<TextBox Name="txtName" />
		<Label Target="{Binding ElementName=txtMail}">
			<StackPanel Orientation="Horizontal">
				<Image Source="http://cdn1.iconfinder.com/data/icons/fatcow/16/bullet_blue.png" />
				<AccessText Text="_Mail:" />
			</StackPanel>
		</Label>
		<TextBox Name="txtMail" />
	</StackPanel>
</Window>

هذا مجرد إصدار ممتد من المثال السابق - بدلاً من سلسلة نصية بسيطة، ستستضيف التسمية الخاصة بنا الآن صورة وقطعة من النص (داخل تحكم AccessText، مما يسمح لنا بالاستمرار في استخدام مفتاح الوصول للملصق). يوجد كلا العدادين داخل StackPanel أفقيًا، نظرًا لأن الملصق، تمامًا مثل أي مشتق آخر من ContentControl، يمكنه استضافة تحكم مباشر واحد فقط للأطفال.

The Image control, described later in this tutorial, uses a remote image - this is ONLY for demonstrational purposes and is NOT a good idea for most real life applications.

Summary

في معظم الحالات، يقوم الملصق بما يعنيه الاسم بالضبط: إنه يعمل كملصق نصي لتحكم آخر. هذا هو الغرض الأساسي منه. بالنسبة لمعظم الحالات الأخرى، ربما يجب عليك استخدام تحكم TextBlock أو إحدى الحاويات النصية الأخرى التي يقدمها WPF.