วันเสาร์ที่ 25 ตุลาคม พ.ศ. 2551

ทำโปรเจ็ก Silverlight ตอนที่ 4 กำหนด Style เพื่อให้สวยงามขึ้น

(แปลจาก blog ภาษาอังกฤษของ Scottgu ที่นี่)
หากต้องการตัวอย่าง SourceCode ฉบับเต็ม กดที่นี่

ใช้แท็ก Style เพื่อกำหนดหน้าตาการแสดงผล
WPF และ Silverlight มีกลไกที่เรียกว่า Style ที่เราสามารถใช้เพื่อเก็บลักษณะ (ค่า Property) ต่าง ๆ ไว้ในที่เดียว (resource) แล้วนำมาใช้ได้บ่อย ๆ เราอาจเก็บ Style ไว้ในไฟล์อื่นก็ได้ เพื่อที่จะเอามา ปั๊มค่า Property ใส่ Control หลาย ๆ อัน ให้มีหน้าตาเหมือนกัน เช่น กำหนดค่า Color,Font,Size,Margin ไว้ใน Style ชื่อหนึ่ง
แล้วเอา Style นี้ ไปใส่ในคอนโทรล หลาย ๆ อัน แล้วจะมี Color,Font,Size,Margin เดียวกันหมด

ในตัวอย่างนี้ เราจะนำเอาค่า Style ไปเก็บไว้ในไฟล์ชื่อ App.xaml ซึ่งจะทำให้เราเอาไปใช้ได้ในทุก ๆ ที่ในโปรแกรม
จากเดิมที่กำหนดค่า Property ต่าง ๆ ไว้ในคอนโทรลนั้น

ก็ให้เราดึงเอา Property ต่าง ๆ มาใส่ไว้ใน Style แทน ดังนี้

โดยเราจะใส่ x:Key="ชื่อสไตล์"(ด้านบน) เพื่อเป็นตัวระบุ ที่จะนำไปใช้ในภายหลัง(ด้านล่าง) ดังนี้

ในที่นี้ เราจะึดึงเอา Property ของคอนโทรลทุกอัน มาเก็บเป็นสไตล์ทั้งหมด
ดังนี้

การนำ Property มาเก็บไว้ใน Style ทำให้โปรแกรมดูโล่งขึ้น โปรแกรมเมอร์ไม่ลายตา จะได้สนใจในสิ่งที่สำคัญมากขึ้น และสไตล์นั้น ยังเอาไปใช้ในที่อื่น ๆ ได้ด้วย

ตอนต่อไป จะเกี่ยวข้องกับคอนโทรล ListBox และ Data Binding (การเชื่อมกับข้อมูล)

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