The Label control

คอนโทรล Label ที่มีในฟอร์มง่ายๆส่วนใหญ่จะดูคล้ายกับคอนโทรล TextBlock ที่เราใช้ในบทความอื่นๆ คุณจะสังเกตุได้อย่างรวดเร็วว่าแทนที่คุณสมบัติ Text, คอนโทรล Label ใช้คุณสมบัติ Content เหตุผลก็เพราะว่า Label สามารถให้คอนโทรลชนิดต่างๆบรรจุอยู่ในตัวเองได้, แทนที่จะเป็นเพียงข้อความ 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>

อีกสิ่งหนึ่งที่คุณอาจจะสังเกตคือความจริงที่ซึ่ง Label, โดยค่าเริ่มต้น, มีช่องว่างเล็กน้อย, ยอมให้ข้อความถูกแสดงห่างจากมุมบนซ้ายออกไป 2, 3 พิกเซล นี่ไม่ใช่กับกรณีของคอนโทรล TextBlock, ที่ซึ่งคุณจะต้องระบุสิ่งนี้ด้วยตนเอง

ในกรณีง่ายๆลักษณะนี้, ที่ซึ่ง content คือ string (ข้อมูลแบบตัวอักษรที่มีความยาวมากกว่า 1 ตัวอักษร มาเรียงต่อเป็นข้อความ), คอนโทรล Label จะสร้าง TextBlock ขึ้นภายในแสดง string ของคุณในนั้น

คอนโทรล Label เทียบกับ คอนโทรล TextBlock

เหตุใดจึงต้องใช้ Label? อืม,มีความแตกต่างที่สำคัญ 2, 3 อย่างระหว่าง Label และ TextBlock TextBlock ยินยอมให้คุณแสดง string ข้อความเท่านั้น, ขณะที่ Label ยินยอมให้คุณกระทำดังนี้ :

• ระบุเส้นขอบ
• แสดงคอนโทรลอื่นๆ, เช่น image
• ใช้ content รูปแบบที่กำหนดขึ้น ผ่านคุณสมบัติ ContentTemplate
• ใช้คีย์การเข้าถึง (access keys) เพื่อให้โฟกัสกับคอนโทรลต่างๆที่เกี่ยวข้อง

จุดข้อย่อยสุดท้ายเป็นหนึ่งในเหตุผลหลักที่แท้จริงสำหรับการใช้ Label มากกว่าการใช้คอนโทรล TextBlock เมื่อไหร่ก็ตามที่คุณแค่ต้องการแสดงข้อความธรรมดา, คุณควรใช้คอนโทรล TextBlock, เนื่องจากมีความเบาและทำงานได้ดีกว่า Label ในกรณีส่วนใหญ่

Label และ Access keys (mnemonics)

ใน Windows และระบบปฏิบัติการอื่นๆเช่นกัน, เป็นการกระทำทั่วไปที่คุณสามารถเข้าถึงคอนโทรลต่างๆในหน้าต่างโต้ตอบโดยการกดปุ่ม [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 ถูกกด ลองรันโปรแกรม, กดปุ่ม [Alt] ค้างไว้แล้วกด N และ M คุณจะเห็นว่าโฟกัสถูกย้ายระหว่างกล่องข้อความ (textbox) ทั้งสองตัวอย่างไร

ดังน้้น, จึงมีแนวคิดใหม่ๆหลายอย่างที่นี่ อันดับแรก, เรากำหนดคีย์การเข้าถึงโดยการวางเครื่องหมายขีดล่าง (_) ก่อนตัวอักษร ไม่จำเป็นต้องเป็นตัวอักษรแรก, สามารถวางก่อนหน้าตัวอักษรใดๆในเนื้อหาของ Label แนวทางปฏิบัติโดยทั่วไปจะใช้ตัวอักษรตัวแรกที่ซึ่งไม่ได้ถูกใช้เป็นคีย์การเข้าถึงสำหรับคอนโทรลอื่นๆ

เราใช้คุณสมบัติ Target เพื่อเชื่อมต่อ Label และ คอนโทรลที่ถูกกำหนดขึ้น เราใช้การผูกข้อมูล (binding) ของ WPF มาตรฐานสำหรับสิ่งนี้, การใช้คุณสมบัติ ElementName , ทั้งหมดเราจะอธิบายในภายหลังในบทเรียนนี้ การผูกข้อมูลขึ้นกับชื่อของคอนโทรล, ดังน้นถ้าคุณเปลี่ยนชื่อของคอนโทรล, คุณจะต้องจำไว้ว่าจะต้องเปลี่ยนในการผูกข้อมูลด้วย.

การใช้คอนโทรลต่างๆเป็นเนื้อหาใน Label

ตามที่ได้กล่าวไว้แล้ว, คอนโทรล Label ยอมที่ให้คุณเก็บวางคอนโทรลอื่นๆไว้ได้, ขณะที่ยังคงรักษาประโยชน์อื่นๆไว้ ขอให้เราลองตัวอย่างที่ซึ่งเรามีทั้งรูปภาพและข้อความภายใน Label, ขณะที่การมีอยู่ของคีย์การเข้าถึงสำหรับ Label แต่ละตัว

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

นี้เป็นเวอร์ชั่นที่เพิ่มเติมจากตัวอย่างก่อนหน้า - แทนที่จะเป็นข้อความธรรมดา, Label ของเราจะเก็บทั้งรูปภาพและส่วนข้อความ (ภายในคอนโทรล AccessText, ที่ซึ่งอนุญาติให้เรายังคงใช้คีย์การเข้าถึงสำหรับป้ายข้อความ (label)) คอนโทรลทั้งคู่อยู่ในคอนโทรล StackPanel แบบ horizontal, เนื่องจาก Label, เหมือน ContentControl อื่นๆ, ที่สามารถเก็บได้แค่คอนโทรลลูก คอนโทรลเดียวเท่านั้น

คอนโทรล Image, จะถูกอธิบายเพิ่มเติมภายหลังในบทเรียนนี้, เรียกใช้ รูปภาพไฟล์ระยะไกล - สิ่งนี้เป็นแค่เพื่อสาธิตเท่านั้น และไม่เป็นความคิดที่ดีสำหรับแอพพลิเคชั่นที่ใช้กันในชีวิตจริง.

Summary

ในสถานการณ์ส่วนใหญ่, คอนโทรล Label ทำแค่ในสิ่งที่สื่ออยู่ในชื่อ: โดยทำหน้าที่เป็นป้ายข้อความสำหรับคอนโทรลอื่นๆ สิ่งนี้เป็นหน้าที่หลักของคอนโทรล Label. สำหรับสถานการณ์อื่นๆส่วนใหญ่, คุณควรใช้คอนโทรล TextBlock หรือ หนี่งในคอนเทนเนอร์ข้อความอื่นๆที่ WPF มีให้