TOC

This article is currently in the process of being translated into Thai (~7% done).

XAML:

Basic XAML

ในบทเรียนก่อนหน้า เราพูดถึง XAML คืออะไรและทำอะไรได้บ้าง แต่การสร้าง Control ใน XAML ล่ะ? อย่างที่คุณเห็นในตัวอย่างก่อนหน้านี้ การสร้าง Control นั้นง่ายเหมือนกับแค่เขียนชื่อระหว่างเครื่องหมาย "<" and ">" ตัวอย่าง เหมือนกับปุ่มนี้

<Button>

XAML tags has to be ended, either by writing the end tag or by putting a forward slash at the end of the start tag:

<Button></Button>

Or

<Button />

A lot of controls allow you to put content between the start and end tags, which is then the content of the control. For instance, the Button control allows you to specify the text shown on it between the start and end tags:

<Button>A button</Button>

HTML is not case-sensitive, but XAML is, because the control name has to correspond to a type in the .NET framework. The same goes for attribute names, which corresponds to the properties of the control. Here's a button where we define a couple of properties by adding attributes to the tag:

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

We set the FontWeight property, giving us bold text, and then we set the Content property, which is the same as writing the text between the start and end tag. However, all attributes of a control may also be defined like this, where they appear as child tags of the main control, using the Control-Dot-Property notation:

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

The result is exactly the same as above, so in this case, it's all about syntax and nothing else. However, a lot of controls allow content other than text, for instance other controls. Here's an example where we have text in different colors on the same button by using several TextBlock controls inside of the 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>

The Content property only allows for a single child element, so we use a WrapPanel to contain the differently colored blocks of text. Panels, like the WrapPanel, plays an important role in WPF and we will discuss them in much more details later on - for now, just consider them as containers for other controls.

The exact same result can be accomplished with the following markup, which is simply another way of writing the same:

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

Code vs. XAML

หวังว่า ตัวอย่างข้างต้นได้แสดงให้เห็นว่าการเขียน XAML นั้นง่ายมาก แต่มีหลากหลายวิธีในการเขียนมันขึ้นมา และถ้าคุณคิดว่าตัวอย่างข้างต้นมี markup ของปุ่ม ด้วยสีของข้อความที่หลากหลาย ลองเปรียบเทียบกันดูใน 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);

Of course the above example could be written less explicitly and using more syntactical sugar, but I think the point still stands: XAML is pretty short and concise for describing interfaces.