WPF - ภาพรวม XAML

สิ่งแรกที่คุณจะพบขณะทำงานกับ WPF คือ XAML XAML ย่อมาจาก Extensible Application Markup Language เป็นภาษาที่เรียบง่ายและมีการประกาศตาม XML

• ใน XAML มันง่ายมากที่จะสร้างเริ่มต้นและตั้งค่าคุณสมบัติของวัตถุที่มีความสัมพันธ์ตามลำดับชั้น

• ส่วนใหญ่จะใช้สำหรับการออกแบบ GUI อย่างไรก็ตามสามารถใช้เพื่อวัตถุประสงค์อื่นได้เช่นกันเช่นเพื่อประกาศเวิร์กโฟลว์ใน Workflow Foundation

ไวยากรณ์พื้นฐาน

เมื่อคุณสร้างโปรเจ็กต์ WPF ใหม่คุณจะพบโค้ด XAML บางส่วนตามค่าเริ่มต้นใน MainWindow.xaml ดังที่แสดงด้านล่าง

<Window x:Class = "Resources.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   Title = "MainWindow" Height = "350" Width = "525"> 
	
   <Grid> 
         
   </Grid> 
	
</Window>

ไฟล์ XAML ด้านบนมีข้อมูลหลายประเภท ตารางต่อไปนี้อธิบายสั้น ๆ ถึงบทบาทของข้อมูลแต่ละอย่าง

ข้อมูล	คำอธิบาย
<หน้าต่าง	มันเป็นองค์ประกอบของออบเจ็กต์เปิดหรือคอนเทนเนอร์ของรูท
x: Class = "Resources.MainWindow"	เป็นการประกาศคลาสบางส่วนซึ่งเชื่อมต่อมาร์กอัปกับโค้ดคลาสบางส่วนที่กำหนดไว้ข้างหลัง
xmlns = "http://schemas.microsoft.com/win fx / 2006 / xaml / การนำเสนอ"	แม็พเนมสเปซ XAML เริ่มต้นสำหรับไคลเอ็นต์ / เฟรมเวิร์ก WPF
xmlns: x = "http://schemas.microsoft.com/w infx / 2006 / xaml"	XAML namespace สำหรับภาษา XAML ซึ่งแมปกับ x: คำนำหน้า
>	จุดสิ้นสุดขององค์ประกอบวัตถุของราก
<ตาราง> </Grid>	กำลังเริ่มต้นและปิดแท็กของวัตถุตารางว่าง
</Window>	การปิดองค์ประกอบวัตถุ

กฎไวยากรณ์สำหรับ XAML เกือบจะคล้ายกับ XML หากคุณดูเอกสาร XAML คุณจะสังเกตเห็นว่าเป็นไฟล์ XML ที่ถูกต้อง แต่ไฟล์ XML ไม่จำเป็นต้องเป็นไฟล์ XAML เนื่องจากใน XML ค่าของแอตทริบิวต์ต้องเป็นสตริงในขณะที่อยู่ใน XAML อาจเป็นวัตถุอื่นซึ่งเรียกว่าไวยากรณ์องค์ประกอบคุณสมบัติ

• ไวยากรณ์ขององค์ประกอบวัตถุเริ่มต้นด้วยวงเล็บมุมซ้าย (<) ตามด้วยชื่อของวัตถุเช่นปุ่ม

• กำหนดคุณสมบัติและคุณลักษณะบางอย่างขององค์ประกอบวัตถุนั้น

• องค์ประกอบวัตถุต้องปิดด้วยเครื่องหมายทับ (/) ตามด้วยวงเล็บมุมฉาก (>) ทันที

ตัวอย่างวัตถุธรรมดาที่ไม่มีองค์ประกอบลูก

<Button/>

ตัวอย่างองค์ประกอบของวัตถุที่มีคุณลักษณะบางอย่าง

<Button Content = "Click Me" Height = "30" Width = "60" />

ตัวอย่างของไวยากรณ์ทางเลือกกำหนดคุณสมบัติ (ไวยากรณ์องค์ประกอบคุณสมบัติ)

<Button> 
   <Button.Content>Click Me</Button.Content> 
   <Button.Height>30</Button.Height> 
   <Button.Width>60</Button.Width> 
</Button>

ตัวอย่างของ Object ที่มี Child Element: StackPanel มี Textblock เป็นองค์ประกอบลูก

<StackPanel Orientation = "Horizontal"> 
   <TextBlock Text = "Hello"/> 
</StackPanel>

ทำไม XAML ใน WPF

XAML ไม่เพียง แต่เป็นคุณสมบัติที่รู้จักกันอย่างแพร่หลายของ WPF แต่ยังเป็นหนึ่งในคุณสมบัติที่เข้าใจผิดมากที่สุด หากคุณได้สัมผัสกับ WPF คุณต้องเคยได้ยิน XAML แต่รับทราบข้อเท็จจริงที่ไม่ค่อยมีใครรู้จักสองประการต่อไปนี้เกี่ยวกับ XAML -

• WPF ไม่ต้องการ XAML
• XAML ไม่ต้องการ WPF

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

<Window x:Class = "WPFXAMLOverview.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <StackPanel> 
      <Button x:Name = "button" Content = "Click Me" HorizontalAlignment = "Left"  
         Margin = "150" VerticalAlignment = "Top" Width = "75" /> 
   </StackPanel> 
	
</Window>

ในกรณีที่คุณเลือกที่จะไม่ใช้ XAML ใน WPF คุณสามารถบรรลุผลลัพธ์ GUI เดียวกันกับภาษาขั้นตอนได้เช่นกัน มาดูตัวอย่างกัน แต่คราวนี้เราจะสร้างปุ่มใน C #

using System.Windows; 
using System.Windows.Controls;  

namespace WPFXAMLOverview { 
   /// <summary> 
      /// Interaction logic for MainWindow.xaml 
   /// </summary> 
	
   public partial class MainWindow : Window { 
	
      public MainWindow() { 
         InitializeComponent(); 
			
         // Create the StackPanel 
         StackPanel stackPanel = new StackPanel(); 
         this.Content = stackPanel; 
			
         // Create the Button 
         Button button = new Button();
         button.Content = "Click Me"; 
         button.HorizontalAlignment = HorizontalAlignment.Left; 
         button.Margin = new Thickness(150); 
         button.VerticalAlignment = VerticalAlignment.Top; 
         button.Width = 75; 
         stackPanel.Children.Add(button);  
      } 
   } 
}

เมื่อคุณคอมไพล์และรันโค้ด XAML หรือโค้ด C # คุณจะเห็นผลลัพธ์เดียวกันดังที่แสดงด้านล่าง

จากตัวอย่างข้างต้นเป็นที่ชัดเจนว่าสิ่งที่คุณสามารถทำได้ใน XAML เพื่อสร้างเริ่มต้นและตั้งค่าคุณสมบัติของอ็อบเจ็กต์งานเดียวกันนี้สามารถทำได้โดยใช้โค้ด

• XAML เป็นอีกหนึ่งวิธีง่ายๆในการออกแบบองค์ประกอบ UI

• ด้วย XAML ไม่ได้หมายความว่าสิ่งที่คุณสามารถทำได้เพื่อออกแบบองค์ประกอบ UI มีเพียงวิธีเดียว คุณสามารถประกาศวัตถุใน XAML หรือกำหนดโดยใช้รหัส

• XAML เป็นทางเลือก แต่อย่างไรก็ตามสิ่งนี้ถือเป็นหัวใจสำคัญของการออกแบบ WPF

• เป้าหมายของ XAML คือการช่วยให้นักออกแบบภาพสามารถสร้างองค์ประกอบส่วนติดต่อผู้ใช้ได้โดยตรง

• WPF มีจุดมุ่งหมายเพื่อให้สามารถควบคุมลักษณะภาพทั้งหมดของอินเทอร์เฟซผู้ใช้จากการมาร์กอัป