การใช้ Expression Blend ทำ Silverlight ตอนที่ 3

เราจะมาดูว่า ตอนแรกที่เราเริ่มสร้าง Project เราจะได้ โครงสร้าง xaml ที่เป็นกริด(ตาราง) ชื่อว่า LayoutRoot ให้เราคลิกที่ด้านข้างของกริด จะเป็นการสร้างขีดแถว(RowDefinition) ดังนี้



การคลิกที่หัวมุมด้านซ้ายบนของ Layout จะเป็นการสลับไปมา ระหว่าง Grid กับ Canvas


โปรดสังเกตุด้านข้างของกริด จะเห็นเป็นรูปกุญแจ

• รูปกุญแจปิด หมายถึง เรากำหนดขนาดตายตัว ให้กับแถวนั้น
• รูปกุญแจเปิด หมายถึง เราให้ขนาดของแถวนั้น สัมพันธ์เป็นสัดส่วนกับ แำถวอื่น ๆ ที่กุญแจเปิด เหมือนกัน (หากผู้ใช้ขยายขนาดกริด แถวเิิปิดจะขนาดออกตามขนาดกริด หากผู้ใช้หดขนาดกริด แถวเปิดจะหกลงตามขนาดกริด)

เมื่อคลิกที่รูปกุญแจ จะเป็นการสลับไป-มา ระหว่าง เปิด-ปิด

ตัวอย่างเช่น เราให้แถวบน กับ แถวล่างมีขนาดคงที่ แต่แถวกลางขยายขนาดได้ ตามขนาดกริด



และเราจะให้ คอลัมภ์แรกเปิด และคอลัมภ์ที่สองขนาดคงที่


เมื่อเราทำเสร็จ พอเราไปดูโค้ด xaml จะเห็นโค้ด ดังนี้

การใช้ Expression Blend ทำ Silverlight ตอนที่ 2

ใน Blend หน้าต่าง Tools จะต่างจาก Visual Studio เล็กน้อย
โดย Blend จะไปคล้ายกับเครื่องมือกราฟิก เช่น โฟโต้ชอป มากกว่า
โดยมีเครื่องมือวาดแบบเวกเตอร์ ด้านล่าง(ปากกา,ดินสอ)


และมีคอนโทรลให้เรียกใช้ครบ
โดยแบ่งออกเป็น

1. Layout ชนิดต่าง ๆ (Grid,StackPanel,Canvas,Border,ScrollViewer,etc).
2. คอนโทรลข้อความ (TextBlock,TextBox,etc)
3. คอนโทรลอื่น ๆ

หากต้องการเลือกคอนโทรล อื่น ๆ ให้กด >>

ขอให้กดปุ่ม Show All ด้วย เพื่อจะได้เห็นคอนโทรลครบทั้งหมด
เมื่อคุณได้คลิกคอนโทรล ให้คุณคลิกแล้วลากบนอาร์ตบอร์ด ก็จะเห็นคอนโทรลขึ้นมาตามพิกัดที่คุณลาก
หรือ คุณจะลากคอนโทรล มาวางบนอาร์ตบอร์ด เลยก็ได้

ทำความเข้าใจกับหน้าต่างพร้อพเพอตี้
เมื่อคุณคลิกบนคอนโทรล แล้วกดที่หน้าต่างพร้อพเพอตี้ ด้านขวา ดังรูป

เราสามารถเปลี่ยนค่าพร้อพเพอตี้ได้ตามต้องการ
ด้านบน ผมเปลี่ยนสี Background เป็นแบบ Gradient (ไล่เฉดสี) สีน้ำเงิน

และต้องการจะเปลี่ยนค่าฟอนต์ แต่ผมหาพร้อพเพอตี้นี้ไม่เจอ
ผมจึงพิมพ์ลงไปในช่อง Search ว่า font
หน้าต่างพร้อพเพอรตี้ก็จะแสดงพร้อพเพอตี้ที่เกี่ยวข้องกับ font ดังนี้

การใช้ Expression Blend ทำ Silverlight ตอนที่ 1

ในตอนก่อน ๆ เราใช้เีพียง Visual Studio ในการเขียน Silverlight ในตอนนี้เราจะใช้ Expression Blend ในการช่่วยเขียน Silverlight บ้าง โดยเราจะเขียนโปรแกรม Chat กัน ดังนี้



ด้านบน คือ หน้าจอตอนเราใช้จริง ส่วนด้านล่าง คือ หน้าจอตอนเราดีไซน์งานใน Blend



หากต้องการ ไฟล์ Source Code ให้คลิ้กที่นี่

เริ่มต้น สร้างโปรเจ็ก Silverlight 2

เมื่อเสร็จแล้วเราจะได้ ไฟล์โซลูชั่น และไฟล์ือื่น ๆ ครบ (สามารถเปิดได้จาก Visual Studio ได้)
และเห็นหน้าตา ดังนี้

ตรงกลางจะเห็น หน้าต่าง บน เป็นหน้าต่าง Design ซึ่งจะมีหน้าตาเหมือน เนื้องานที่ออกมา (WYSWYG)
ด้านล่าง จะเห็น หน้าต่าง ที่เป็นโค้ด xaml ของเนื้องานนั้น

บล๊อกได้เคยกล่าวถึงวิธีการใช้ Expression Blend ไว้พอสมควร โปรดติดตาม ตอนก่อน ๆ ที่อยู่ในเดือน กันยายน ครับ