Giới Thiệu XAML

Trong bài trước các bạn đã thấy một số lệnh của XAML nhưng các bạn chưa hiểu rõ thì trong bài này sẽ giới thiệu một cách rõ ràng dễ hiểu từng dòng lệnh.
Các bạn sẽ mong muốn hiểu XAML là gì và tại sao lài là XAML?
1) XAML là gì (Extensible Application Markup Language)?
Như các bạn đã biết thông tin thể hiện trên trang web mà bạn thấy qua browser được thể hiện qua cấu trúc HTML vậy thì thể hiện trên điện thoại lại không dùng HTML mà thay thế bằng XAML.
Đâu đó các bạn đã đọc và biết chúc ít về XML vậy có tự đặt ra câu hỏi XML và XAML có gì liên quan hay họ hàng gì không?.
Các bạn hãy hiểu XAML giống như là XML (eXtensible Markup Language) mục đích cũng tạm ra các thẻ có cấu trúc nhàm tái hiệt thông tin lên trên điện thoại của bạn. Để sử dụng XML, bạn định nghĩa một lược đồ (schema) khai báo những cái tên thích hợp của các phần tử và các thuộc tính của chúng. Một lược đồ giống như một bản hợp đồng. Tất cả mọi người đồng ý, cả nhà sản xuất XML và người dùng XML đều tuân thủ các qui định của hợp đồng để có thể giao tiếp với nhau. Do đó, lược đồ là một phần quan trọng của XML.

Set thuộc tính

Bạn có thể set qua giao diện cừa sổ Properties nó sẽ tự sinh code như hình trên, tuy nhiên bạn cũ có thể gán trực tiếp qua các thẻ XML

Thực tế không nhất thiết đều phải viết thể hiện  qua XML mà bạn có thể viết qua lệnh trong C#
qua hình sau.

Hai đoạn code trên là tương đương

Vậy tại sao chúng ta lại phải học và viết thể hiện qua XAML? Xin trả lời thấy ngay qua hình XAML là một cách đơn giản để tạo thể hiện của các lớp và thiết lập thuộc tính của các đối tượng thuộc lớp bởi một cú pháp ngắn ngọn, dễ hiểu. Hơn nữa, sử dụng XAML bạn có thông tin phản hồi ngay lập tức trong cửa sổ xem trước của điện thoại. bạn có thể thấy tác động của việc thay đổi ngay lập tức
1) Chuyễn đổi kiểu:
Nếu quan tâm bạn có thể nhận thấy rằng có sự khác biệt giữa các phiên bản XAML và  code C# khi trình bày thuộc tính HorizontalAlignment…Nếu bạn thử:
myButton.HorizontalAlignment = “Left”;
bạn sẽ nhận được một lỗi biên dịch. Bộ chuyển đổi cú pháp XAML sẽ thực hiện việc chuyển đổi từ giá trị chuỗi “Left” sang giá trị liệt kê System.Windows.HorizontalAlignment.Left bằng việc sử dụng Type Converter. TypeConVerter là một lớp có thể dịch một giá trị chuỗi sang một kiểu dữ liệu khác – có nhiều kiểu dữ liệu được xây dựng sẵn trong  API mà chúng ta sẽ sử dụng trong loạt bài viết tiếp theo. Trong ví dụ này, thuộc tính HorizontalAlignment khi được phát triển bởi lập trình viên của Microsoft được đánh dấu là một thuộc tính đặc biệt trong mã nguồn nhằm báo cho bộ phân tích cú pháp XAML thực thi giá trị chuỗi thông qua một phương thức chuyển đổi kiểu để chuyển đổi kiểu chuỗi “Left” sang kiểu liệt kê System.Windows.HorizontalAlignment.Left.
1) Khai báo Namespace XAML:
Các bạn hãy coi phần trên cùng của file MainPage.xaml các phần trước các bạn không quan tâm , nhưng bây giờ thực sự phải biết ý nghĩa của nó như thế nào để có chiến lược đặt tên cho phù hợp khi ứng dụng lớn thì rất cần.
Hãy xem cú pháp chung:

local là tên chúng ta đặt prefix (tức là tên ta muốn đặt đại diện cho CLR Namespace ), thường thì ta nên đặt mang tính gợi nhớ theo ý muốn
clr-namespace là từ khóa khi chúng ta đặt tên namespace cho object (tức là phải viết đúng cú pháp nhưng hi thết kế thì tên này tự đặt cho chúng ta).
Để hiểu rõ hơn các bạn theo dõi qua ví dụ sau.

Trong hình trên tại sao lại có tên tắt (prefix) comva  net tại chuỗi
xmlns:com="using:nguyenvanthang.com" ở đâu mà có?
xmlns:net="using:bomonse.net" ở đâu mà có?
Trả lời câu hỏi này các bạn hãy xem ví dụ cụ thể sau

Các bạn tạo một project bình thường và thêm một class có tên MyButton.cs. File này sẽ chứa 2 class MyButton nằm ở 2 Namespace khác nhau, bạn tạo file này như sau:

code của file MyButton.cs

Nôi dung class

Các bạn thấy đấy ở trên có 2 MyButton trùng tên nhưng nằm ở 2 namespace khác nhau khi đó biên dịch sẽ ra sao? qua hình sau sẽ rõ.

buil se được 2 control trên toolbox

Các bạn thấy số 1 và 2 ở hình nội dung class có tên thế nào thì khi build sẽ được control có tên trong hình trên.
Bây giờ trở lại giao diện chúng ta kéo 2 control trên vào form và quan sát kỹ sem các số và code sinh ra trong hình

Toàn cảnh về NameSpace

– Vùng số 1 là nơi mà 2 MyButton được tạo ra t sau khi bạn Build project.
– Vùng số 2 là nơi mà bạn kéo thả 2 MyButton này vào (quan sát thấy màu và kích thước mặc định được tạo trong Constructor)
– Vùng số 3: Là cách khai báo sử dụng Namespace được hệ thống tự động tạo ra (trong trường hợp này nó sẽ tự động lấy cái thành phần cuối cùng đằng sau dấu chấm “.” làm prefix, ví dụ trên là : namespace nguyenvanthang.com  thì lấy com,namespace bomonse.net thì lấy net.
– Vùng số 4 là nơi mà XAML coding của MyButton được phát sinh tùy thuộc vào cách bạn thay đổi kích thước cũng như vị trí của nó,  bạn để ý có prefix là com và net đằng trước mỗi element MyButton chính là prefix –> truy suất đúng đối tượng nằm trong namespace nào. (Bạn có thể đặt tên prefix khác không sao).