Simple Data Binding in WPF using LINQ to SQL with VS2008+Expression Blend 2.5 June 2008 Preview


 

สิ่งที่จำเป็น (Prerequisites)

Download source code:

บทนำ:

มีคำกล่าวว่า หากเราจะเป็นโปรแกรมเมอร์ เหนือโปรแกรมเมอร์นั้น ในการพัฒนา Web Application ต้องพัฒนาด้วย Silverlight แต่หากพัฒนา Win Application ต้องพัฒนาด้วย WPF (Windows Presentation Foundation) และบทความนี้ขอเป็นเส้นทางเล็กๆ อีกมุมหนึ่ง ในหลากหลายเส้นทาง ที่จะนำพาท่านผู้อ่านทุกท่าน เข้าสู่กลิ่นใอของ WPF ด้วยการใช้งานเครื่องมือมีระดับอย่าง VS2008 และ Microsoft Expression Blend 2.5 June 2008 Preview เรียกสั้นๆ ว่า Expression Blend

ซึ่งแน่นอนว่ายุคสมัยนี้การพัฒนาแอพพลิเคชัน ต้องล้ำสมัย และมีความหรูหรา ผู้ใช้งานมีความพึงพอใจ ซึ่งสิ่งนี้จะเกิดขึ้นได้คงต้องใช้เครื่องมือมีระดับ เข้ามาเสริมแต่ง เพื่อให้การใช้ชีวิตของเหล่านักพัฒนาดูดี และเรียบง่ายขึ้น และหนึ่งในเครื่องมือที่เข้ามาช่วยให้ชีวิตเหล่านักพัฒนาเริ่มสดใสขึ้น นั่นคือ VS2008 และ Expression Blend ซึ่งการพัฒนาแอพพลิเคชันด้วย WPF นั้นเราจะใช้ Expression Blend เป็นเครื่องมือในการออกแบบหน้าจอแอพพลิเคชัน และใช้ VS2008 ในการใส่โค้ดเพื่อให้หน้าจอแอพพลิเคชันของเรานั้นปฏิบัติการ ตามเป้าประสงค์ของเรา และการใช้งานเครื่องมือสองอันพร้อมๆ กันหรือสลับไปมา กล่าวได้ว่าเราจำต้องแปลงกายเป็นสองร่าง นั่นคือ:

  • หนึ่งร่างเป็นนักออกแบบ สำหรับใช้งานเครื่องมือ Expression Blend ในการออกแบบหน้าแอพพลิเคชัน
  • อีกร่างหนึ่งเป็นนักพัฒนา สำหรับใช้เครื่อง VS2008 ในการใส่โค้ดให้แอพพลิเคชันนั้นปฎิบัติตามป้าประสงค์

โดยทั้งสองร่าง (นักออกแบบ และนักพัฒนา) มิอาจแยกออกจากกันได้ ในสังคมชีวิตโปรแกรมเมอร์ของบ้านเรา ซึ่งแท้จริงแล้วเมื่อสองร่างดังกล่าวรวมกันเป็นหนึ่งจึงกลายเป็น: จิตวิญญาณของกรรมกรซอฟต์แวร์: ดั่งที่เหล่านักพัฒนาหลายๆ ท่าน ต่างมีจิตวิญญาณดังกล่าวโดย รู้ตัวและไม่รู้ตัว ตามสรรพสิ่งรอบด้าน และเส้นทางชีวิตของแต่ละท่าน

 

โดยส่วนลึกแล้ว Microsoft ตั้งใจจะประดิษฐ์เครื่องมือมีระดับเหล่านั้น เพื่อมาตอบสนอง และช่วยเหลือเหล่านักพัฒนา ให้สามารถสรรสร้างแอพพลิเคชัน ให้ตรงตามเป้าประสงค์ อยู่ที่ว่านักพัฒนาจะหยิบใช้ ตามกาลเวลาที่เหมาะสม และลงตัวได้มากน้อยเพียงไรนั้น ก็คงขึ้นกับว่าท่านใดรู้จักฝึกฝน และเรียนรู้การใช้งานมัน.  เหตุการณ์ที่ผู้เขียนจะขอเล่าความแต่ต่อนี้ไป ผู้เขียนขอนำพาท่านผู้อ่านเข้าสู่การตามหากลิ่นไอของ WPF โดยเป้าประสงค์ของเราจะเป็นดังรูปที่ 1: ซึ่งเรากำลังจะเริ่มเดินทางกันแล้วในไม่ช้านี้.

 

เป้าประสงค์ของเรา:

โดยจุดหมายปลายทางของบทความนี้ จะสรรสร้างแอพพลิเคชันที่เรียกว่าได้ว่า หรูหราเอาการ เนื่องจาก ด้วยชื่อ และกลิ่นไอของมัน WPF นั่นเอง ซึ่งแท้จริง แล้วหน้าตาของมันก็แสนจะธรรมดาตามรูปที่ 1: มันเป็นเพีบงแอพธรรม แค่โหลดข้อมูลขึ้นมาแสดงเพียงเท่านั้น แต่นั่นมิใช่ เป้าที่เราต้องการ ซึ่งในบทความนี้ จะนำเสนอวิธีการ และขั้นตอนการใช้ Expression Blend ในการผูกข้อมูล (Binding) ให้แอพพลิเชนบน WPF ต่างหาก

รูปที่ 1: Simple Demo of Data Binding in WPF using LINQ-SQL with Expression Blend 2.5 June 2008 Preview

รูปที่ 1:

 

ขั้นตอนการสร้างแอพพลิเคชัน:

  • ขั้นตอนที่ หนึ่ง: สร้างโปรเจ็กต์ WPF ด้วย Expression Blend
  • ขั้นตอนที่ สอง: สร้าง LINQ ด้วย VS2008
  • ขั้นตอนที่ สาม: ออกแบบ และแต่งหน้าจอแอพพลิเคชันด้วย Expression Blend
  • ขั้นตอนที่ สี่: ผูกข้อมูล (DataBinding) ให้แอพพลิเคชัน WPF
  • ขั้นตอนที่ ห้า: ใส่โค้ดให้แอพพลิเคชันปฎิบัติตามเป้าประสงค์ ด้วย VS2008
  • ขั้นตอนที่ หก: แก้ไขเทมเพลต (Edit Template)

 

ขั้นตอนที่ หนึ่ง: สร้างโปรเจ็กต์ WPF ด้วย Expression Blend 

หยิบเครื่องมือมีระดับอย่าง Expression Blend ขึ้นมา เพื่อทำการสร้างโปรเจ็กต์ดังแสดงในรูปที่ 2: และเลือกประเภทโปรเจ็กต์เป็น WPF Application(.exe) จากนั้นตั้งชื่อโปรเจ็กต์ตามต้องการ บทความนี้ขอตั้งชื่อเป็น WPF_LINQ_DataSource ดังรูปที่ 3:

รูปที่ 2: Microsoft Expression Blend 2.5 June 2008 Preview รูปที่ 3: สร้าง Project WPF Application (.exe)

รูปที่ 2:                                                  รูปที่ 3:

 

ขั้นตอนที่ สอง: สร้าง LINQ ด้วย VS2008

เราจะได้ โซลูชันชื่อ WPF_LINQ_DataSource บน Expression Blend ดังรูปที่ 4: ในหมายเลข 1 จากนั้นให้ทำการคลิกเมาส์ขวาบนโซลูชัน แล้วเลื่อนเมาส์ไปเลือกเมนู Edit in Visual Studio ดังรูปที่ 4: ในหมายเลข 2 จากนั้นมันจะเรากระโดดไปสู่การใช้งานเครื่องมือ VS2008 เพื่อทำการเพิ่ม LINQ เข้ามาในโปรเจ็กต์ ดังรูปที่ 5:

 รูปที่ 5:

รูปที่ 4:

 

จากรูปที่ 5: เราได้เข้าสู่ โซลูชัน WPF_LINQ_DataSource บน VS2008

รูปที่ 6:

รูปที่ 5:

 

เพิ่ม LINQ เข้ามาในโปรเจ็กต์ ด้วย VS2008

คลิกขวาบนโซลูชัน WPF_LINQ_DataSouce เลื่อนเมาส์ไปเลือกเมนู Add แล้วเลือก New ITem…

ในเทมเพลต ให้เลือกเทมเพลต LINQ to SQL Classes ให้ตั้งชื่อเป็น DataClasses1.dmbl  จากนั้นใน Design surface ให้ทำการ ลากตาราง Category ไปวาง เราจะใช้ข้อมูลของตารางดังกล่าวในการท่องไปบนกลิ่นไอของ WPF ดังแสดงในรูปที่ 6: จากนั้นทำการ build หนึ่งครั้งดังรูปที่ 7:ในหมายเลขที่1  แล้วสลับเครื่องมือ ไปใช้งาน เครื่องมือ Expression Blend กด OK ดังรูปที่ 7: ในหมายเลขที่ 2

รูปที่ 7: 7

รูปที่ 6:                                          รูปที่ 7:

 

ขั้นตอนที่ สาม: ออกแบบ และแต่งหน้าจอแอพพลิเคชันด้วย Expression Blend

เมื่อเราเข้าสู่การใช้งาน Expression Blend แล้วใน Windows1 ให้ทำการแบ่ง Grid เป็นสองแถว โดยใช้คลิกตรงขอบของ Grid ดังรูปที่ 8: ในหมายเลข 1: จากนั้นไปที่กล่องเครื่องมือ คลิกตรง Asset Library แล้วเลือกคอนโทรล ListBox  ดังรูปที่ 8 ในหมายเลขที่ 2:

 

รูปที่ 9:

รูปที่ 8:

 

จากรูปที่ 8 ในหมาเลข 1 เบื้องหลังแล้วเราจะได้โค้ด XAML ดังนี้:

<Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="0.179*"/>
        <RowDefinition Height="0.821*"/>
    </Grid.RowDefinitions>
</Grid>

 

จากนั้นดับเลคลิกบน ListBox คอนโทรล ListBox จะประกฏบน Window1 ดังรูปที่ 9 และตั้งชื่อเป็น ListCategory จากนั้นทำการปรับพรอเพอร์ตี้ของ ListBox  โดยคลิกบนหมายเลข 1 ในรูปที่ 10: แล้วปรับพรอเพอร์ตี้ ตามหมายเลข 2

รูปที่ 10: รูปที่ 11:

รูปที่ 9:                                                    รูปที่ 10:

 

ขั้นตอนที่ สี่: ผูกข้อมูล (DataBinding) ให้แอพพลิเคชัน WPF

ถึงขั้นตอนนี้ ถือได้ว่าเรามาถึงจุดหมายที่สำคัญ อีกจุดหนึ่ง นั่นคือเราจะมาทำการผูกข้อมูลให้กับ ListBลยเox ด้วยเครื่องมือมีระดับอย่าง  Expression Blend คือเราจะสวมวิญญาณของนักออกแบบ นั่นแสดงว่า เราจะไม่มีการใส่โค้ดใดๆ ทั้งสิ้น

 

เพิ่ม Object DataSource:

  • เราไปใช้เครื่องมือกันได้เลย ให้คลิกเมาส์บนแทบ Project แล้วเลื่อนเมาส์ไปคลิกบน +CLR Object ดังรูปที่ 11: ในหมายเลขที่ 1: เพื่อเพิ่ม Object DataSource
  • ในหน้าต่าง Add CLR Object Data Source ให้ทำการตั้งชื่อ DataSource เป็น: CLRObjectDataSource แล้วเลือก Object Category ในหมายเลข 2
  • เราจะได้ Object DataSource CategoryDS ในหมายเลข 3

รูปที่ 12: 

รูปที่ 11:

 

เมื่อเราได้ Object DataSource แล้ว ให้ทำการผูกไปยัง ListBox ทำได้โดยการคลิกเมาส์ค้างบน Object DataSource CategoryDS แล้วลากไปวางบน ListBox ดังแสดงในรูปที่ 12: ในหมายเลขที่ 1: เมื่อเราปล่อยเมาส์ที่กดค้างเมื่อครู่ แล้วจะมีเมนู แสดงขึ้นมาฝให้คลิกไปบนเมนู Bind "Category" to "ListBox" ในหมายเลข 2:

 

ในรูปที่ 13 Creat Data Binding ในหมายเลข 1 => Select Field ให้เลือก ItemsSource ในหมายเลข 2 และ 3

รูปที่ 13: รูปที่ 14:

รูปที่ 12:                                        รูปที่ 13:

 

ในรูปที่ 14 เรากด OK เราจะคงค่าตั้งต้น (Default) ของมันไว้ การผูกข้อมูลให้คอนโทรล ListBox เป็นเรียบร้อย จากนั้นเราทำการบันทึก และ Build โปรเจ็กต์ หนค่งครั้งดังรูปที่ 15 ในหมายเลข 1 และ หมายเลข 2 ตามลำดับ

 

ในรูปที่ 16 ให้เราทำการคลิกบน Windows ในหมายเลข 1 เพื่อที่ว่าเราจะไปสร้างเมธอด Load ให้ฟอร์ม จากนั้นคลิกบนแท็บ Properties => ไปที่ไอคอนอีเวนต์ (เครื่องหมายฟ้าฝ่า) แล้วทำการดับเบิ้ลคลิกบนอีเวนต์ Loaded ในหมายเลข 2  เมื่อเราดับเบิ้ลคลิกลงไปในหมายเลข 2 ดังกล่าว จะเข้าสู่การใส่โค้ด เราต้องทำการสลับร่างอย่างเร่งด่วนกลายเป็นนักพัฒนา เพื่อไปใช้งาน VS2008 ในการใส่ โค้ด ให้ดึงข้อมูลออกจาก LINQ

รูปที่ 15: รูปที่ 16: รูปที่ 17:

รูปที่ 14:                                    รูปที่ 15:                                        รูปที่ 16:

 

ขั้นตอนที่ ห้า: ใส่โค้ดให้แอพพลิเคชันปฎิบัติตามเป้าประสงค์ ด้วย VS2008

แล้วมันก็พาเราเข้าสู่เครื่องมือ VS2008 อีกครั้งหนึ่ง ให้กดปุ่ม Yes to All ดังหมายเลข 1 ในรูปที่ 17 จากนั้น Build หนึ่งครั้งเพื่อว่า VS2008 จะได้เตรียม Object ต่างให้พร้อมใช้งาน เนื่องจากมันไม่อาจทราบได้ว่า ก่อนหน้านี้บน Expression Blend ได้สร้าง Object อะไรไว้บ้าง การ Build ดังกล่าวจะช่วยให้เครื่องมือสองชิ้นสามารถใช้งานร่วมกันได้อย่างลงตัวนั่นเอง

รูปที่ 18:

รูปที่ 17:

จากนั้นให้ใส่โค้ดดังนี้ลงไป:
 

        private void Window_Loaded(object sender, RoutedEventArgs e)


       
{
           
using (DataClasses1DataContext db = new DataClasses1DataContext())
           
{
               
this.listCategory.ItemsSource = db.Categories;
           
}
        
}

 

 
ทดสอบแอพพลิเคชัน:
เมื่อใส่โค้ดให้มันทำงานตามเป้าประสงค์แล้วเรามาทำการทดสอบ ว่าแอพพลิเคชันของเรา สามารถแสดงข้อมูล Category ตามที่เราต้องการหรือเปล่า แล้วเราจะได้หน้าจอแอพพลิเคชัน ดังรูปที่ 18:
 
 
จะเห้นว่าข้อมูลยังแสดงไม่สวยงาม ไม่ได้กลิ่นไอของ WPF เลยจริงๆ เราคงต้องไปปรับอะไรบางอย่างเพื่อให้มันแสดงข้อมูลได้น่าสนใจ มากกว่านี้: ไปดูกัน
 

รูปที่ 19:

รูปที่ 18:

 

ปรับเฉดสีของ Windows ดังรูปที่ 19:

ปรับเฉดสีของ ListBox ดังรูปที่ 20:

รูปที่ 20: รูปที่ 21:

รูปที่ 19:                                          รูปที่ 20:

 

ในรูปที่ 21: ลาก TextBlock ในหมายเลข1: ไปวางแถวบนสุดเพื่อทำเป็ยป้ายแสดงข้อความ ให้ใส่ข้อความว่า WPF LINQ DataSource แล้วทำการปรับพรอเพอร์ตี้ ดังหมายเลข 2 – หมายเลข 5 ดังนี้:

หมายเลข 2: ให้ข้อความเป็นตัวหนา

หมายเลข 3: กำนหดความกว้าง ส่วนความสูงให้มันเป็น Auto

หมายเลข 4: ใส่สีพื้นเฉดสีเทา

หมายเลข 5: ใส่เฉดสีตัวอักษรเนสีเทาเช่นกัน

 

รูปที่ 22:

รูปที่ 21:

 

จากนั้นทดสอบรันเพื่อดูผลอีกสักครั้ง โดยกด F5 หรือคลิกบนเมนู Project => Test Solution ดังรูปที่ 22 ในกมายเลข ที่ 1 จะได้ผลหน้าจอเป็นดังหมายเลข 2 การแสดงข้อมูลยังแย่อยู่  เราจะไปปรับให้มันแสดงเป็นแถว เพื่อให้ดูข้อมูลได้ง่ายขึ้น โดยการเข้าไปปรับเทมเพลตของ ListBox ตามดูกันต่อในขั้นตอนที่หก ครับ:

รูปที่ 23: 

รูปที่ 22:

 

ขั้นตอนที่ หก: แก้ไขเทมเพลต (Edit Template)

ขั้นตอนนี้เราจะเข้าไปแก้ไขเทมเพลตของ ListBox ในรูปที่ 23: ให้เราทำการคลิกเมาส์ขวา บน listCategory แล้วเลื่อนเมาส์ไปเลือกเมนู Edit Other Templates => Edit Generated Items (ItemTemplate) => แล้วคลิก เมนู Edit Template

23

รูปที่ 23:

 

Expression Blend  จะนำพาเราเข้าสู่เทมเพลตของ ListBox ซึ่งเทมเพลตเหล่านี้จะถูกสร้างตามข้อมูลที่เราทำการผูกให้มัน ในขั้นต้นที่ได้เล่าความไปก่อนหน้านี้ แล้ว เทมเพลตต่างๆ จะเป็นดังรูปที่ 24:

รูปที่ 25:

 

รูปที่ 24:

 

ทำการปรับ StackPanel ให้แสดงแนวนอน โดยกำหนด Orientation:= Horuzontal  ดังรูปที่ 25:

qqqqq

รูปที่ 25:

 

เมื่อเราทำการปรับ StackPanel ให้แสดงเป็นแนวนอนแล้ว จะเห็นว่า TextBlock ของเราจะถูกจัดวางให้แสดงตามแนวนแนเช่นเดียวกัน ดังรูปที่ 26: ให้เราทำการกำหนดความกว้าง ของTextBlock แต่ละอัน ตามความเหมาะสม ในบทความนี้กำหนดดังนี้:

ttttttt

รูปที่ 26:

 

จะได้ผลดังรูปที่ 27:

sssss

รูปที่ 27:

 

เมื่อทำการปรับเทมเพลตเรียบร้อยแล้ว เราจะออกจากโหมดดังกล่าวโดยคลิก ตามรูปที่ 28: Expression Blend  จะพาเราเข้าสู่โหมดปกติ จากนั้นทำการทดสอบรันเพื่อดูผล การทำงานของแอพพลิเคชัน อันหรูหราของเรา:

y1p0dXcNBMnE0OAzphCSpd3K2AX-vRv0NinkfhBrJhlP2mtvF_Z-VW4xezn9B679O5ZDvfYXgK4zso

รูปที่ 28:

 

ทดสอบรันครั้งสุดท้าย:

แล้วแอพพลิเคชันอันหรูหราของเรา หน้าตาจะออกมาเป็นดังรูปที่ 29: ผลจากการปรับเทมเพลตดังกล่าวทำให้เราดูข้อมูลได้ง่ายขึ้น แต่อย่างไรก็ตามหน้าตายัง ไม่มีกลิ่นไอของนักออกแบบเลยสักนิด ซึ่งนั่นมิใช่เหตุผลที่สำคัญ… เป้าประสงค์ของเรา คือวิธีการผูกข้อมูลบน WPF ผ่านเครื่องมือ Expression Blend  

vvvv

รูปที่ 29:

 

บทสรุป:

 

เราสามารถผูกข้อมูลผ่านเครื่องมือ Expression Blend ได้อย่างไม่ยากเย็น ท่านผู้อ่านคงรู้สึกบ้างแล้วว่า หนทางสู่ WPF เริ่มสดใสขึ้นบ้างแล้ว ใช่ใหมครับ???  แม้บทความนี้มิใช่คำตอบ ทั้งหมด แต่คงได้กลิ่นไอของ WPF บ้าง ไม่มาก ก็คงเล็กน้อย.

 

ซึ่งหนทางสู่เป้าหมายยังคงอีกยาวไกล มีแต่ผู้ที่ ฟันฝ่า และฝึกฝน อย่างต่อเนื่องเท่านั้น จึงจะถึงซึ่งจุดหมายดังกล่าว ดังคำกล่าวของชนชาติจีนที่ว่า …หนทางนับหมื่นลี้ เริ่มต้นที่ก้าวแรก… และบทความนี้ขอเป็นก้าวแรก ของอีกหลายร้อยก้าว ที่จะนำพาท่านผู้อ่าน เข้าสู่จุดหมายปลายทาง ที่ได้ตั้งใจไว้ ขอให้ท่านผู้อ่าน ทุกท่านจงประสบโชคดี ทุกเส้นทางของการดำเนินชีวิต…

 

หากสิ่งทั้งหลาย ทั้งปวงเหล่านี้เกิดข้อผิดพลาดประการใด ต้องขออภัยไว้ ณ ที่นี้ และยินดีรับฟัง คำแนะนำ จากทุกๆ ท่าน เพื่อปรับปรุงเปลี่ยนแปลง ให้เกิดแต่สิ่งดีดี

 

 

nano:กรรมกรซอฟต์แวร์ 

เกี่ยวกับ

Nuchit Atjanawat is a Microsoft MVP, GreatFriends Community Leader, WindowsITPro Columnist(Mr.Nano), Silverlight Business Application Instructor, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession. He has a very good skill over Silverlight, LightSwitch, C#, XAML & Blend. He shares his technical findings, tutorials in his technical blog. Follow his Blog and Facebook page to be updated on latest articles. - Technical Blog: https://janawat.wordpress.com - WindowsITPro Columnist(Mr.Nano): http://windowsitpro.net - The GreatFriends.Biz Community Discussion Board (nano): http://greatfriends.biz - witter: https://twitter.com/janawat - Facebook Page: https://www.facebook.com/nuchit - Instructor: http://bit.ly/GF250-01, http://bit.ly/GF150-02

เขียนใน WPF
2 comments on “Simple Data Binding in WPF using LINQ to SQL with VS2008+Expression Blend 2.5 June 2008 Preview
  1. decha พูดว่า:

    นี้ก็เป็นก้าวแรกของผมครับ…ขอบคุงมากครับ

  2. Nuchit พูดว่า:

    ด้วยความยินดีครับ

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

In Archive
%d bloggers like this: