Silverlight - ภาพรวม XAML

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

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

• ส่วนใหญ่จะใช้สำหรับการออกแบบ GUI

• สามารถใช้เพื่อวัตถุประสงค์อื่น ๆ เช่นเพื่อประกาศเวิร์กโฟลว์ใน Workflow Foundation

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

เมื่อคุณสร้างโครงการ Silverlight ใหม่คุณจะเห็นโค้ด XAML บางส่วนตามค่าเริ่มต้นใน MainPage.xaml ดังแสดงด้านล่าง

<UserControl x:Class = "FirstExample.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400"> 
	
   <Grid x:Name = "LayoutRoot" Background = "White"> 
         
   </Grid> 
	
</UserControl>

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

ข้อมูล	คำอธิบาย
<UserControl	จัดเตรียมคลาสพื้นฐานสำหรับการกำหนดคอนโทรลใหม่ที่ห่อหุ้มคอนโทรลที่มีอยู่และจัดเตรียมตรรกะของตัวเอง
x: Class = "FirstExample.MainPage"	เป็นการประกาศคลาสบางส่วนซึ่งเชื่อมต่อมาร์กอัปกับโค้ดคลาสบางส่วนที่อยู่เบื้องหลังซึ่งกำหนดไว้ในนั้น
xmlns = "http://schemas.microsoft.com / winfx / 2006 / xaml / การนำเสนอ"	แมปเนมสเปซ XAML เริ่มต้นสำหรับไคลเอนต์ / เฟรมเวิร์ก Silverlight
xmlns: x = "http: //schemas.microsoft.c om / winfx / 2006 / xaml"	XAML namespace สำหรับภาษา XAML ซึ่งแมปกับ x: คำนำหน้า
xmlns: d = "http://schemas.microsoft.com / expression / blend / 2008"	XAML namespace มีไว้สำหรับการสนับสนุนนักออกแบบโดยเฉพาะการสนับสนุนนักออกแบบในพื้นผิวการออกแบบ XAML ของ Microsoft Visual Studio และ Microsoft Expression Blend
xmlns: mc = "http: //schemas.openxmlforma ts.org/markup-compatibility/2006"	ระบุและสนับสนุนโหมดความเข้ากันได้ของมาร์กอัปสำหรับการอ่าน XAML
>	จุดสิ้นสุดขององค์ประกอบวัตถุของราก
<ตาราง> </Grid>	นี่คือแท็กเริ่มต้นและปิดของออบเจ็กต์กริดว่าง
</UserControl>	การปิดองค์ประกอบวัตถุ

กฎไวยากรณ์สำหรับ XAML เกือบจะคล้ายกับ XML หากคุณดูเอกสาร XAML คุณจะสังเกตเห็นว่าจริงๆแล้วมันเป็นไฟล์ XML ที่ถูกต้อง ในทางกลับกันมันไม่เป็นความจริงเนื่องจากใน 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>

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

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

ทำไม XAML ใน Silverlight

XAML ไม่ได้ถูกคิดค้นขึ้นมาสำหรับ Silverlight มาจาก WPF ซึ่งเป็น Windows Presentation Foundation Silverlight มักถูกอธิบายว่าเป็นส่วนย่อยของ WPF สิ่งนี้ไม่เป็นความจริงอย่างเคร่งครัดเนื่องจาก Silverlight สามารถทำบางสิ่งที่ WPF ทำไม่ได้ แม้ว่าฟังก์ชันการทำงานจะทับซ้อนกัน แต่ทั้งสองก็มีรายละเอียดที่แตกต่างกันเล็กน้อย

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

• นอกจากนี้ยังมีองค์ประกอบสำหรับการแสดงภาพและเสียง

• มีการรองรับข้อความที่จัดรูปแบบเรียบง่ายและคุณสามารถทำให้องค์ประกอบใด ๆ เคลื่อนไหวได้ หากคุณรู้จัก WPF ชุดคุณลักษณะนี้จะคุ้นเคยกับคุณ

• จุดสำคัญประการหนึ่งคุณไม่สามารถใช้ WPF XAML และใช้ใน Silverlight ได้

• แม้ว่าจะมีความคล้ายคลึงกัน แต่คุณจะพบความแตกต่างเล็ก ๆ น้อย ๆ มากมาย

XAML และรหัสด้านหลัง

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

• ไฟล์ XAML แต่ละไฟล์มักจะเชื่อมโยงกับไฟล์ซอร์สโค้ดซึ่งเราอ้างถึงเป็นโค้ดที่อยู่เบื้องหลัง Microsoft Frameworks ต่างๆใช้คำนี้

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

• ในรหัส XAML ที่ระบุด้านล่าง TextBlock และ Buttonมีการกำหนด ตามค่าเริ่มต้นเมื่อเรียกใช้แอปพลิเคชันแอปพลิเคชันจะแสดงข้อความ“Hello World!” บนหน้าเว็บและปุ่ม

<UserControl x:Class = "FirstExample.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <StackPanel> 
         <TextBlock x:Name = "TextMessage"  
            Text = "Hello World!"  
            Margin = "5"> 
         </TextBlock> 
			
         <Button x:Name = "ClickMe"  
            Click = "ClickMe_Click"  
            Content = "Click Me!"  
            Margin = "5"> 
         </Button> 
			
      </StackPanel> 
   </Grid> 
</UserControl>

• โค้ดที่อยู่เบื้องหลังสามารถเข้าถึงองค์ประกอบใด ๆ ที่มีชื่อด้วย x:Name คำสั่ง

• องค์ประกอบที่ตั้งชื่อจะพร้อมใช้งานผ่านฟิลด์ในโค้ดด้านหลังทำให้โค้ดสามารถเข้าถึงอ็อบเจ็กต์เหล่านี้และสมาชิกได้ตามปกติ

• x:Prefix แสดงว่าชื่อไม่ใช่คุณสมบัติปกติ

• x:Name เป็นสัญญาณพิเศษไปยังคอมไพเลอร์ XAML ที่เราต้องการเข้าถึงวัตถุนี้ในโค้ดที่อยู่เบื้องหลัง

ให้ด้านล่างนี้คือการใช้งานเหตุการณ์คลิกปุ่มซึ่ง TextBlock อัปเดตข้อความแล้ว

using System.Windows; 
using System.Windows.Controls;
  
namespace FirstExample {
 
   public partial class MainPage : UserControl {
	
      public MainPage() { 
         InitializeComponent(); 
      }
		
      private void ClickMe_Click(object sender, RoutedEventArgs e) { 
         TextMessage.Text = "Congratulations! you have created your first Silverlight Applicatoin"; 
      } 
   } 
}

• XAML ไม่ใช่วิธีเดียวในการออกแบบองค์ประกอบ UI ขึ้นอยู่กับคุณที่จะประกาศอ็อบเจ็กต์ใน XAML หรือประกาศ / เขียนโค้ด

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

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