หากต้องการตัวอย่าง SourceCode ฉบับเต็ม กดที่นี่
เป้าหมายพื้นฐานของ Silverlight และ WPF คือ ให้ผู้ใช้สร้างคอนโทรลขึ้นมาเอง ที่จะนำกลับมาใช้ใหม่ได้เรื่อย ๆ โดยเขียน คอนโทรลสืบทอดจากคอนโทรลเดิมที่มีอยู่แล้วใน Silverlight (จาก Control หรือ TextBox , Button ,อื่น ๆ)
สำหรับในตัวอย่างนี้ เราต้องการให้ ผู้ใช้ ค้นหา Topic แล้วแสดง Story ใน List เมื่อผู้ใช้เลือก Story แล้ว จะแสดง Detail ออกมา เช่น ให้เลือก Storyจาก ListBox ด้านล่าง
แล้วจะแสดง Detail ดังนี้
เราจะสร้างคอนโทรล ที่ชื่อว่า "StoryDetailsView" เพื่อแสดงผล Detail ดังภาพด้านบน
โดยกด Add New Item แล้ว เลือก Silverlight User Control แล้วกด Add
จะเกิดไฟล์ 2 ไฟล์ คือ StoryDetailsView.xaml และ StoryDetaisView.xaml.cs ดังนี้
สร้าง Modal Dialog (หน้าต่างที่ต้องทำงานเสร็จจนปิดก่อน จึงจะทำงานอย่างอื่นต่อได้) โดยใช้ User Control
เราจะแสดงภาพให้ดูเหมือน ปิดหน้าเดิม ด้วยการสร้าง สี่เหลี่ยม Rectangle ทึบ ๆ ครอบทับ หน้าจอ ดังนี้
Opacity คือ ความทึบแสง ถ้ามีค่าเป็น 1 หมายถึงทึบ ถ้ามีค่าเป็น 0 หมายถึง ใส
ในที่นี้ Opacity="0.765" หมายถึง ทึบแสง 76.5%
HorizontalAlignment="Stretch" หมายถึง กว้างเต็มตามแนวขวาง
VerticalAlignment="Stretch" หมายถึง สูงเต็มตามแนวตั้ง (พูดง่าย ๆ ว่า เต็มจอ)
Border ด้านล่าง คือ กรอบของไดอะลอก มีมุมมน (CornerRadius="30")
แล้วมี Button ปุ่ม Close อยู่ข้างใน เชื่อมกับอีเวนท์ CloseBtn_Click
ได้ผลดังนี้
ในฟังก์ชัน CloseBtn_Click ที่อยู่ใน .cs ให้กำหนด Visibility ของคอนโทรลให้เป็น Collapsed เพื่อซ่อนปิดคอนโทรลไป ดังนี้
การนำคอนโทรลไปใช้
เราก็ใส่คอนโทรลของเราเข้าไปในหน้า Page.xaml และกำหนด Visibility="Collapse" ไว้ก่อน ดังนี้
ให้เราสร้างฟังก์ชันเชื่อมอีเวนท์ SelectionChanged จาก ListBox ของเรา ดังนี้
ทำให้ เมื่อเราเลือกหัวข้อใดหัวข้อหนึ่งใน ListBox แล้ว คอนโทรลของเราก็จะปรากฏตัวขึ้น
ส่งต่อข้อมูลของ Story ไปให้ คอนโทรลของเรา
เมื่อผู้ใช้เลือก Story ที่ต้องการแล้ว เราก็จะส่ง Story นั้นไปเก็บไว้ในพร้อพเพอตี้ DataContext ของ DetailsView (สำหรับ DataBinding) ดังนี้ แล้วแสดงคอนโทรลออกมา (โดยเซ็ต Visibility) ดังนี้
แล้วในคอนโทรลของเรา เชื่อม (DataBind) ระหว่าง Title กับ TextBlock ดังนี้
จะได้ผลดังนี้
สังเกตว่า Title ของ Story มาแสดงแล้ว
ทีนี้เราจะมาเชื่อมข้อมูล ทั้งหมด แล้วแสดงใน หน้าต่างนี้ ดังนี้
แล้วได้ผล ดังนี้
สังเกตว่า เราสามารถเชื่อม ข้อมูล ระหว่างกัน ผ่านคอนโทรล ด้วยพร้อพเพอตี้ DataContext โดย ไม่ต้องเขียน โค้ดโปรแกรม เลยแม้แต่บรรทัดเดียว
ตอนต่อไป เราจะตกแต่ง ListBox และ Button ให้ดูสวยกว่านี้ ด้วยการแก้ไข ControlTemplate
ไม่มีความคิดเห็น:
แสดงความคิดเห็น