วันพุธที่ 17 กันยายน พ.ศ. 2551

ลองสร้างสี่เหลี่ยมแรกบน WPF

เริ่มต้น เรามาเปิดโปรเจ็กที่เราทำทิ้งไว้เมื่อคราวที่แล้ว ด้วย Blend
แล้วกดที่ Toolbar รูปสี่เหลี่ยม

นี่คือ เครื่องมือสร้างสี่เหลี่ยม
เมื่อกดแล้ว ให้ไปกดบน ArtBoard แล้วลากรูปสี่เหลี่ยมแล้วปล่อย
เราก็จะได้รูปสี่เหลี่ยมง่าย ๆ ดังนี้



ลองดูรูปสี่เหลี่ยมด้านบน จะมีรูป สี่เหลี่ยมเล็ก ๆ อยู่ที่ขอบและมุมทั้ง 4 ด้าน เรียกว่า Handle เมื่อเอาเมาส์วางบน handle จะเห็นลูกศร
เมื่อให้เมาส์กดลากที่ handle จะเป็นการขยายหรือย่อรูปสี่เหลี่ยม ตามใจต้องการ

แต่ถ้าเขยิบเมาส์ออกมานิดนึง ไอคอนลูกศรจะเปลี่ยนไป ดังนี้

หากกดที่ลูกศรโค้งแล้วเลื่อนเมาส์ จะเป็นการหมุนรูปสี่เหลี่ยม โดยมีจุดวงกลมตรงกลางเป็นจุดศูนย์กลาง เราสามารถกดที่จุดวงกลม แล้วเปลี่ยนจุดหมุนได้
หากกดที่เครื่องหมาย < / > แล้ว จะเป็นดึงรูปสี่เหลี่ยม ให้เฉ เป็นรูปสี่เหลี่ยมขนมเปียกปูน

ตรงหัวมุมด้านซ้ายบน ท่านจะเห็นเส้นประแล้วมีวงกลมที่ปลาย 2 เส้น 0-----
เมื่อท่านกดแล้วลากตรงวงกลมนั้น จะเป็นการ ทำเกลามุม ของสี่เหลี่ยม ให้มนขึ้น ดังนี้

หากไม่ต้องการรูปนั้นแล้ว ให้กดปุ่ม Backspace หรือ Del จะเป็นการลบออก

ตอนนี้ให้เราลบสี่เหลี่ยมเดิมออก แล้วเริ่มสร้างสี่เหลี่ยมขึ้นอีกครั้ง
ตอนนี้เราอยู่ในโหมด Design ให้กดแท็บ XAML หรือ Split เพื่อดูรูปสี่เหลี่ยมในมุมมองของโค้ด XAML บ้าง
จะเห็นโค้ด XAML ดังนี้ (อย่าเพิ่งตกใจ เดี๋ยวจะอธิบายให้ฟังอย่างง่าย ๆ)

ให้สังเกตุ ตัวหนังสือสีแดง เป็นการระบุว่า ตัวหนังสือสีแดง นั้นคือ tag หรือ attribute ส่วนตัวหนังสือสีน้ำเงินนั้น คือ ค่าของข้อมูล
เช่น
<Rectangle Width="100" Height="50">
</Rectangle>

คำว่า Rectangle คือ Tag ที่ใช้บอกว่าเป็นสี่เหลี่ยม
Width คือ attribute มีความหมายว่า ความกว้าง
Height="50" คือ บอกว่า สี่เหลี่ยมนี้มีความสูง 50 หน่วย

เมื่อมี Tag เปิดแล้วก็ต้องมี Tag ปิด คือ </Rectangle>

ถ้าจะเขียนโดยไม่ให้มี Tag ปิด ต้องเอาเครื่องหมาย / ไปใส่ไว้ท้าย Tag
ดังนี้ <Rectangle Width="100" Height="50" />

ไม่มีความคิดเห็น: