Basic XAML

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

<Button>

แท็ก XAML จะต้องถูกปิด, โดยการเขียนแท็กสิ้นสุดหรือใส่เครื่องหมายสแลชที่ส่วนท้ายของแท็กเริ่มต้น:

<Button></Button>

หรือ

<Button />

คอนโทรลหลายๆคอนโทรลยอมให้คุณวางเนื้อหาระหว่างแท็กเริ่มต้นและแท็กสิ้นสุด, ที่ซึ่งกลายเป็นเนื้อหาของคอนโทรล. ตัวอย่างเช่น, คอนโทรล Button อนุญาตให้คุณระบุข้อความแสดงบนปุ่มระหว่างแท็กเริ่มต้นและแท็กสิ้นสุด:

<Button>A button</Button>

HTML ไม่ใช้หลัก case-sensitive, แต่ XAML ใช้, เพราะชื่อคอนโทรลจะต้องตรงกับชนิดใน .NET framework เช่นเดียวกันกับชื่อคุณลักษณะ (attribute) ที่ซึ่งตรงกับคุณสมบัติ (property) ของคอนโทรล นี่คือปุ่มที่ซึ่งเรากำหนดคุณสมบัติสองประการโดยการใส่คุณลักษณะในแท็ก

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

เราได้กำหนดคุณสมบัติ FontWeight, ได้ให้เราเป็นข้อความตัวหนา (Bold), และหลังจากนั้นเราได้กำหนดคุณสมบัติ Content, ที่ซึ่งเป็นเช่นเดียวกับการเขียนข้อความระหว่างแท็กเริ่มต้นและแท็กสิ้นสุด อย่างไรก็ตามคุณลักษณะทั้งหมดของคอนโทรลอาจจะถูกกำหนดคล้ายลักษณะนี้, ที่ซึ่งปรากฏเป็นแท็กลูกของคอนโทรลหลัก, โดยการใช้สัญกรณ์ คอนโทรล-จุด-คุณสมบัติ

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

ผลลัพธ์เป็นแบบเดียวกับข้างบนอย่างแน่นอน, ดังน้้นในกรณีนี้, มันเป็นเรื่องเกี่ยวกับไวยากรณ์ทั้งหมดไม่ใช่อะไรอื่น อย่างไรก็ตาม, คอนโทรลจำนวนมากอนุญาติให้เนื้อหาเป็นได้มากกว่าข้อความ, ตัวอย่างเช่นคอนโทรลอื่นๆ นี่เป็นตัวอย่างหนึ่งที่เรามีข้อความหลากสีบนปุ่มเดียวกันโดยการใช้คอนโทรล TextBlock หลายคอนโทรลภายในคอนโทรล 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>

คุณสมบัติ Content อนุญาติให้สมาชิกลูกได้แค่หนึ่งเดียว, ดังนั้นเราจึงใช้ คอนโทรล WrapPanel เพื่อบรรจุกลุ่มของข้อความสีที่แตกต่างกัน Panels, คล้ายกับ WrapPanel, แสดงบทบาทที่สำคัญใน WPF และเราจะพิจารณามันให้มากขึ้นในภายหลัง - สำหรับตอนนี้, แค่พิจารณามันเป็นคอนเทนเนอร์สำหรับคอนโทรลอื่นๆ

ผลลัพธ์ที่เหมือนกันอย่างแน่นอนสามารถบรรลุได้ด้วยการใช้มาร์กอัปต่อไปนี้, ที่ซึ่งเป็นแค่วิธีหนึ่งในการเขียนแบบเดียวกัน:

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

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