Drag-Drop Data Binding to WPF in Visual Studio 2010


 

16

การผูกข้อมูล (Data binding) ของ WPF 4.0 บน  Visual Studio 2010 (VS10) เราสามารถกระทำได้ง่ายๆ เพียงสร้างแหล่งชี้ฐานข้อมูล จากนั้นใช้การคลิกเมาส์ลาก-วาง เป็นอันเสร็จเรียบร้อย  

ในบทความนี้ เราไปฟอร์ม Master – Detail กันครับ ลองไปดูว่าง่ายจริงหรือเปล่า

เปิด VS10 ขึ้นมา สร้างโปรเจ็กต์ Windows => .Net framework 4.0 => WPF Application => คลิก OK

1 2

 

หน้าจอโปรเจ็กต์ของเรา

3

 

สร้างแหล่งชี้ข้อมูล (DAL) ด้วย ADO.NET Entity Data Model

4 5 

 

กำหนด Connection String => เลือกอ็อบเจ็กต์ตาราง Categories และ Products

6 7

 

ได้อ็อบเจ็กต์โมเดลดังรูป Build หนึ่งครั้ง => คลิก Data=>Show Data Source เพื่อแสดงหน้าต่าง DataSource

8 9

 

หน้าต่าง Data Source => เปลี่ยนรูปแบบแสดงของอ็อบเจ็กต์ Products เป็น Detail

10 11

 

ลากอ็อบเจ็กต์ Categories  ไปใส่บน Form

12 13

 

ลากอ็อบเจ็กต์ Products ไปใส่บน Form

14 15

 

กดปุ่ม F5 เพื่อRun แอปพลิเคชัน จะได้หน้าจอดังรูป ใช้เมาส์คลิกลงบน DataGrid ของ category ข้อมูล Detail ที่เป็น Products ก็จะเปลี่ยนตาม

16

 

ข้อมูล Detail ที่เป็น Products ก็จะเปลี่ยนตาม

17

 

การลาก – วางดังกล่าวทำให้ VS10 สร้างโค้ดให้เราอัตโนมัติ

18

ง่ายไหมละครับ

 

ผู้เขียน
Columnist

 

 

Advertisements
เกี่ยวกับ

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

ใส่ความเห็น

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: