Silverlight - Tổng quan về XAML

Một trong những điều đầu tiên bạn sẽ gặp phải khi làm việc với Silverlight là XAML. XAML là viết tắt của Ngôn ngữ đánh dấu ứng dụng có thể mở rộng. Nó là một ngôn ngữ khai báo và đơn giản dựa trên XML.

Trong XAML, rất dễ dàng để tạo, khởi tạo và thiết lập các thuộc tính của một đối tượng có quan hệ phân cấp.
Nó chủ yếu được sử dụng để thiết kế GUI.
Nó cũng có thể được sử dụng cho các mục đích khác, ví dụ, để khai báo quy trình làm việc trong nền tảng Quy trình làm việc.

Cú pháp cơ bản

Khi bạn tạo một dự án Silverlight mới, bạn sẽ thấy một số mã XAML theo mặc định trong MainPage.xaml như hình bên dưới.

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

Bạn có thể thấy rằng tệp XAML được cung cấp ở trên đề cập đến các loại thông tin khác nhau; tất cả chúng được mô tả ngắn gọn trong bảng dưới đây.

Thông tin	Sự miêu tả
<UserControl	Cung cấp lớp cơ sở để xác định một điều khiển mới đóng gói các điều khiển hiện có và cung cấp logic riêng của nó.
x: Class = "FirstExample.MainPage"	Nó là một khai báo lớp một phần, kết nối đánh dấu với mã lớp một phần đằng sau, được định nghĩa trong đó.
xmlns = "http://schemas.microsoft.com / winfx / 2006 / xaml / Presentation"	Lập bản đồ không gian tên XAML mặc định cho máy khách / khuôn khổ Silverlight.
xmlns: x = "http: //schemas.microsoft.c om / winfx / 2006 / xaml"	Không gian tên XAML cho ngôn ngữ XAML, ánh xạ nó tới tiền tố x:.
xmlns: d = "http://schemas.microsoft.com / expression / blend / 2008"	Không gian tên XAML nhằm mục đích hỗ trợ nhà thiết kế, cụ thể là hỗ trợ nhà thiết kế trong các bề mặt thiết kế XAML của Microsoft Visual Studio và Microsoft Expression Blend.
xmlns: mc = "http: //schemas.openxmlforma ts.org/markup-compatibility/2006"	Chỉ ra và hỗ trợ chế độ tương thích đánh dấu để đọc XAML.
>	Phần tử cuối đối tượng của gốc.
<Grid> </Grid>	Đây là các thẻ bắt đầu và đóng của một đối tượng lưới trống.
</UserControl>	Đóng phần tử đối tượng.

Các quy tắc cú pháp cho XAML gần như tương tự như các quy tắc của XML. Nếu bạn nhìn vào một tài liệu XAML, bạn sẽ nhận thấy rằng nó thực sự là một tệp XML hợp lệ. Ngược lại, nó không đúng, vì trong XML, giá trị của các thuộc tính phải là một chuỗi trong khi trong XAML, nó có thể là một đối tượng khác được gọi là cú pháp phần tử Thuộc tính.

Cú pháp của một phần tử Đối tượng bắt đầu bằng dấu ngoặc nhọn bên trái (<) theo sau là tên của một đối tượng, ví dụ: Nút.
Thuộc tính và các thuộc tính của phần tử đối tượng đó được xác định.
Phần tử Đối tượng phải được đóng bằng dấu gạch chéo lên (/) ngay sau dấu ngoặc vuông (>).

Ví dụ về một đối tượng đơn giản không có phần tử con được hiển thị bên dưới.

<Button/>

Ví dụ về một phần tử đối tượng với một số thuộc tính -

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

Ví dụ về cú pháp thay thế để xác định thuộc tính (Cú pháp phần tử thuộc tính) -

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

Ví dụ về một đối tượng có phần tử con: StackPanel chứa Textblock làm phần tử con.

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

Tại sao XAML trong Silverlight

XAML ban đầu không được phát minh cho Silverlight. Nó đến từ WPF, Windows Presentation Foundation. Silverlight thường được mô tả là một tập hợp con của WPF. Điều này không hoàn toàn đúng, vì Silverlight có thể thực hiện một số điều mà WPF không thể. Ngay cả khi các chức năng trùng lặp, cả hai đều hơi khác nhau về chi tiết.

Chính xác hơn là nói rằng WPF và Silverlight rất giống nhau ở nhiều khía cạnh. Mặc dù có sự khác biệt, vẫn còn nhiều thông tin khi nhìn vào tính năng XAML mà Silverlight đã vay mượn từ WPF. Ví dụ: Silverlight cung cấp đồ họa nguyên thủy cho bitmap và hình dạng có thể mở rộng.
Nó cũng cung cấp các yếu tố để kết xuất video và âm thanh.
Nó có hỗ trợ văn bản được định dạng đơn giản và bạn có thể tạo hoạt ảnh cho bất kỳ phần tử nào. Nếu bạn biết WPF, bộ tính năng này sẽ quen thuộc với bạn.
Một điểm quan trọng, bạn không thể lấy WPF XAML và sử dụng nó trong Silverlight.
Mặc dù có những điểm tương đồng nhưng bạn cũng sẽ tìm thấy vô số điểm khác biệt nhỏ.

XAML & Mã đằng sau

XAML xác định diện mạo và cấu trúc của giao diện người dùng. Tuy nhiên, nếu bạn muốn ứng dụng của mình làm bất cứ điều gì hữu ích khi người dùng tương tác với nó, bạn sẽ cần một số mã.

Mỗi tệp XAML thường được liên kết với một tệp mã nguồn, mà chúng tôi gọi là mã phía sau. Nhiều Framework của Microsoft sử dụng thuật ngữ này.
Mã đằng sau thường sẽ cần sử dụng các phần tử được xác định trong XAML, để lấy thông tin về đầu vào của người dùng hoặc để hiển thị thông tin cho người dùng.
Trong mã XAML được cung cấp bên dưới, TextBlock và Buttonđược định nghia. Theo mặc định, khi ứng dụng được chạy, nó sẽ hiển thị dòng chữ “Hello World!”Trên trang web và một nút.

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

Mã đằng sau có thể truy cập bất kỳ phần tử nào được đặt tên với x:Name chỉ thị.
Các phần tử được đặt tên có sẵn thông qua các trường trong mã phía sau, cho phép mã truy cập các đối tượng này và các thành viên của chúng theo cách thông thường.
Các x:Prefix biểu thị rằng tên không phải là tài sản bình thường.
x:Name là một tín hiệu đặc biệt tới trình biên dịch XAML mà chúng ta muốn có quyền truy cập vào đối tượng này trong đoạn mã phía sau.

Dưới đây là triển khai sự kiện nhấp vào nút trong đó TextBlock văn bản được cập nhật.

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 không phải là cách duy nhất để thiết kế các phần tử giao diện người dùng. Bạn có thể khai báo các đối tượng trong XAML hoặc khai báo / viết trong mã.
XAML là tùy chọn, nhưng mặc dù vậy, nó là trái tim của Silverlight thiết kế.
Mục tiêu của mã hóa XAML là cho phép các nhà thiết kế trực quan tạo ra các thành phần giao diện người dùng trực tiếp. Vì thế,Silverlight nhằm mục đích làm cho nó có thể kiểm soát tất cả các khía cạnh trực quan của giao diện người dùng từ khi đánh dấu.