การใช้ 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 ไว้พอสมควร โปรดติดตาม ตอนก่อน ๆ ที่อยู่ในเดือน กันยายน ครับ

ทำโปรเจ็ก Silverlight ตอนที่ 7 ใช้ Control Template เพื่อแต่งคอนโทรลให้สวยงามขึ้น

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

คุณสมบัติพิเศษของ Silverlight และ WPF คือ อนุญาติให้เราปรับแก้ หน้าตา ของคอนโทรล ได้อย่างสมบูรณ์
เรามาดูคอนโทรลแรกที่เราจะแก้กัน

ปุ่ม Button
ของเดิม

มีหน้าตา อย่างนี้

ท่านอาจจะแปลกใจว่า Content ของ Button นั้น ไม่จำเป็นต้องเป็นข้อความเสมอไป จริง ๆ เราอาจใส่ออปเจ็กอื่น ๆ ไว้ภายใน (ในแท็ก <Button.Content>) ได้ เช่น

ได้ผลดังนี้


เราอาจใช้คอนโทรลที่เป็นรูปร่าง(Shape) เช่น Ellipse(วงรี) เช่น


ได้ผลดังนี้


ถ้าเราจะเล่นพิเรนท์ ใส่ปฏิทินลงไปในปุ่ม ก็ยังได้ เช่น


การปรับหน้าตาของคอนโทรลด้วย ControlTemplate
ใน WPF และ Silverlight เราสามารถปรับหน้าตาของคอนโทรลได้โดยสิ้นเชิง โดยที่พฤติกรรมของคอนโทรลไม่เปลี่ยนแต่อย่างใด
ตัวอย่างเช่น ถ้าเราต้องการเปลี่ยนปุ่มให้เป็นรูปวงกลมเหมือนด้านล่าง ให้เราสร้าง Style ขึ้นมาอันนึง เก็บไว้ใน App.xaml แล้วใส่ <ControlTemplate> ไว้ข้างใน ภายในให้ใส่ หน้าตา ที่ต้องการไว้
ดังนี้


แล้วนำไปใช้กับ Button ดังนี้

จะได้ผล ดังนี้

แต่ สังเกตว่า ใน Button เรากำหนด Size และ Content ไว้ตายตัว("Push Me!)
แต่ ถ้าเราต้องการจะนำ Size ที่ผู้ใช้คอนโทรลด้านนอก กำหนดมา มาใช้
และใช้ Content ที่ผู้ใช้ด้านนอกกำหนดมา มาใช้

ให้เราใช้ {TemplateBinding}
และใช้ ContentPresenter แทน Content ของเรา ดังนี้

แล้วเรานำ ControlTemplate นี้ไปใช้ ดังนี้


แล้วได้ผลดังนี้

ทีนี้เราจะให้ เป็นปุ่มวงกลม แล้วนำไปใช้ใน Digg ดังนี้

แล้วได้ผลลัพท์สุดท้าย ดังนี้

ทำโปรเจ็ก Silverlight ตอนที่ 6 ใช้ User Control เพื่อแสดงข้อมูลแบบหนึ่งต่อหลาย (Master/Detail)

(แปลจาก blog ภาษาอังกฤษของ Scottgu ที่นี่)
หากต้องการตัวอย่าง 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

ทำโปรเจ็ก Silverlight ตอนที่ 5 การใช้ ListBox และ Data Binding (เชื่อมโยงข้อมูล)

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

ตอนก่อน เราใช้ DataGrid ในแสดงผล ข้อมูลเว็บ Digg ในตอนนี้เราจะลองใช้ ListBox แสดงแทน เพื่อให้ข้อมูลดูเป็นรายการแทน (แทนการดูเป็นตาราง)

เริ่มต้น แทนคอนโทรล DataGrid ด้วยคอนโทรล <ListBox> โดยให้มีชื่อเหมือนเดิมว่า StoriesList :


เมื่อเรารันโปรแกรม แล้วลอง ค้นหา จะได้ผลดังนี้


คุณอาจประหลาดใจว่า คำว่า "DiggSample.DiggStory" มาจากไหน
เนื่องจาก ListBox ไม่รู้จะเอาค่าไหนของ DiggStory มา มันจึงเอามาจากฟังก์ชัน ToString() แทน

ให้เราเพิ่ม DisplayMemberPath="Title" เข้าไป ดังนี้

เราจะได้ผลดังนี้

เนื่องจาก เราต้องการแสดงผลมากกว่าหนึ่งฟิลด์ และเราต้องการจะจัดวางตำแหน่งข้อมูลใหม่ เราจึงสร้าง
<DataTemplate> ขึ้นมาไว้ใน <ListBox.ItemTemplate> แล้วใส่แท็กสำหรับจัดวางข้อมูลไว้ในภายใน
ตัวอย่างเช่น เราจะแสดง Title ,NumDigg ไว้ใน TextBlock ดังนี้

แล้วได้ผลดังนี้


เราลองมาทำในแบบที่ซับซ้อนขึ้นอีกนิดกัน ดังนี้


และใน App.xaml ก็กำหนด Style ไว้ดังนี้


ได้ผลดังนี้


ตอนหน้า จะเกี่ยวกับแสดงข้อมูล แบบหนึ่งต่อหลาย (Master/Details) ครับ