XAML cơ bản

Trong chương trước, chúng ta đã nói về XAML là gì và bạn sử dụng nó cho mục đích nào, nhưng làm thế nào để bạn tạo một control trong XAML? Trong những ví dụ tiếp theo bạn sẽ thấy tạo một control trong XAML rất dễ, các control được bao quanh bởi các dấu ngoặc "<". Thí dụ button được khai báo như thế này

<Button>

Một thẻ XAML khi khai báo phải được kết thúc, bằng cách viết thẻ kết thúc hoặc đặt dấu gạch chéo "/" ở cuối thẻ như thế này:

<Button></Button>

Hoặc

<Button />

Rất nhiều Control cho phép bạn thêm nội dung giữa thẻ bắt đầu và thẻ kết thúc. Thí dụ một button cho phép bạn định nghĩa những nội dung hiển thị ở giữa thẻ bắt đầu và thẻ kết thúc

<Button>A button</Button>

HTML không cần phân biệt chữ hoa và chữ thường, nhưng XAML thì có, bởi vì tên của control phải giống với loại của nó trong .Net Framework. Tương tự đối với các thuộc tính cũng phải giống với các tính chất của control. Tại đây chúng ta sẽ định nghĩa một cặp tính chất của button bằng cách thêm các thuộc tính vào thẻ.

<Button FontWeight="Bold" Content="A button" />

Ở trên, chúng ta vừa thiết lập một tính chất FontWeight, cho phép in đậm chữ, và sau đó thiết lập một tính chất Content để hiển thị nội dung của button, tính chất Content này có thể được thay thế bằng cách viết nội dung giữa thẻ bắt đầu và thẻ kết thúc. Tuy nhiên tất cả các thuộc tính của control cũng có thể được định nghĩa bằng cách viết thẻ bắt đầu và thẻ kết thúc, sử dụng chúng như một thẻ con của thẻ chính, thêm dấu chấm để phân biệt các tính chất của nó.

<Button>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Content>A button</Button.Content>
</Button>

Khai báo button bằng 2 cách trên đều cho ra kết quả chính xác như nhau, đó là tất cả về cú pháp của XAML. Tuy nhiên, rất nhiều control cho phép nội dung không chỉ là đoạn văn, mà còn có thể là các control khác lồng vào. Đây là ví dụ chúng ta có các đoạn văn với màu sắc khác nhau trong cùng một button bằng cách sử dụng TextBlock bên trong Button.

<Button>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Content>
        <WrapPanel>
            <TextBlock Foreground="Blue">Multi</TextBlock>
            <TextBlock Foreground="Red">Color</TextBlock>
            <TextBlock>Button</TextBlock>
        </WrapPanel>
    </Button.Content>
</Button>

Tính chất Content chỉ cho phép một thành phần đơn lẻ, do đó chúng ta sử dụng WrapPanel để chứa các đoạn màu khác nhau của văn bản. Panels, giống như WrapPanel, đóng một vai trò quan trọng trong WPF và chúng ta sẽ thảo luận thêm về chúng sau. Bây giờ hãy xem xét chúng như một nơi chứa các control khác.

Kết quả tương tự như trên có thể được viết lại bằng một cách đơn giản như sau:

<Button FontWeight="Bold">
    <WrapPanel>
        <TextBlock Foreground="Blue">Multi</TextBlock>
        <TextBlock Foreground="Red">Color</TextBlock>
        <TextBlock>Button</TextBlock>
    </WrapPanel>
</Button>

Code vs. XAML

Hy vọng những ví dụ trên đã thể hiện cho bạn thấy rằng XAML rất dễ viết, nhưng nó cũng có nhiều cách viết khác nhau, và nếu bạn nghĩ rằng các ví dụ trên có nhiều đánh dấu để hiện thực một button với văn bản trong nó có các màu khác nhau, hãy thử so sánh với cách hiện thực ví dụ trên bằng C#.

Button btn = new Button();
btn.FontWeight = FontWeights.Bold;

WrapPanel pnl = new WrapPanel();

TextBlock txt = new TextBlock();
txt.Text = "Multi";
txt.Foreground = Brushes.Blue;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Color";
txt.Foreground = Brushes.Red;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Button";
pnl.Children.Add(txt);

btn.Content = pnl;
pnlMain.Children.Add(btn);

Dĩ nhiên ví dụ trên có thể viết theo cách ít phức tạp, ngắn gọn và sử dụng nhiều cú pháp dễ dàng hơn, nhưng tôi nghĩ điểm luôn đúng là: XAML mô tả giao diện rất ngắn gọn và dễ hiểu.