BusyIndicator Element Binding


 

Prerequisites

 

จากบทความ:>BusyIndicator Control in Silverlight 4 เราได้ใช้งานคอนโทรล BusyIndicator กันไปแล้ว ซึ่งเราสั่งให้แสดงคอนโทรล BusyIndicator โดยกำหนดพลอเพอร์ตี IsBusy = true จากการใส่โค้ด มาบทความนี้ ผู้เขียนขอนำเสนออีกวิธีหนึ่ง เป็นการผูกข้อมูล(Element Binding) ซึ่งสามารถกระทำได้ง่าย ผ่านการกำหนดพลอเพอร์ตี้ ดังนี้

1. หากใน ToolsBox เรายังมองไม่เห็นคอนโทรล BusyIndicator ให้เราทำการเพิ่มไอเท็มเข้ามาใหม่ โดยการคลิกขวาบน ToolBox > Choose Items… จะได้หน้าต่าง Choose Toolsbox Items ดังรูป ให้ทำการเลือกคอนโทรลที่ชื่อ BusyIndicator จากนั้นคลิก OK

1

 

2. เราจะได้คอนโทรล BusyIndicator ปรากฏบน Toolbox ดังรูป ให้ทำการลากไปวางที่หน้า Home.xaml

2

 

3. เข้าไปปรับพลอเพอร์ตี้คอนโทรล BusyIndicator โดยการคลิกเมาส์ลงบนคอนโทรลดังกล่าว แล้วไปที่หน้าต่าง Properties เลื่อนเมาส์ไปที่พรอเพอร์ตี้ที่ชื่อ IsBusy ดังรูป เพื่อทำการผูกข้อมูลให้มันต่อไป

3

 

4. การผูกข้อมูลให้พรอเพอร์ตี้ IsBusy ให้ทำการคลิกเมาส์ลงบนไอคอน value source Local => เลือกเมนู Apply Data Binding…

4

 

5. เราจะได้หน้า Data Binding เล็กๆ อันหนึ่งแสดงขึ้นมา

5

 

6. ในเมนูแทบ Source: เลือกไปที่ ElementName:> เลือก DomainDataSource ซึ่งในที่นี้ชื่อ productsDomainDataSource

6

 

7. ไปที่แทบเมนู Path: เลือก DomainContext:> เลือก IsLoading เนื่องจากเราต้องการให้ตัวคอนโทรล BusyIndicator แสดงเมื่อ productsDomainDataSource กำลังโหลดข้อมูล นั่นคือ พรอเพอร์ตี้ IsLoading มีค่าเป็น True นั่นเอง

7

 

8. จาการปรับแต่งที่แล้วมา เบื้องหลังแล้ว  VS2010 จัดการสร้างโค้ด xaml ให้เราดังนี้

7_1

 

9.เมื่อทำการผู้ข้อมูลเรียบร้อยแล้วทกสอบรันแอปฯ กันเลยครับ จะเห็นว่า ณ ขณะที่ตัว productsDomainDataSource กำลังโหลดข้อมูล ทำให้พรอเพอร์ตี้ IsBusy ของคอนโทรล BusyIndicator มีค่าเป็น True จะแสดงขึ้นมา เพื่อบอกให้ผู้ใช้งานรู้ว่า กำลังทำงานอยู่ ไม่ได้เงียบหายไปใหน

8

 

10. เมื่อ productsDomainDataSource โหลดข้อมูลเรียบร้อยแล้ว ทำให้พรอเพอร์ตี้ IsBusy ของคอนโทรล BusyIndicator มีค่าเป็น False ทำให้ถูกปิดลง พร้อมกับข้อมูลรายงานถูกแสดงแทนที่ ช่วยทำให้ผู้ใช้งานมีความรู้สึกดีขึ้น ไม่ต้องรู้สึกว่ารอนานเกินไป  

9

 

แหล่งข้อมูลดาวน์โหลด:
http://cid-7d608959d854cb28.skydrive.live.com/embedicon.aspx/SourcesCode/01-12-2010_Drag-DropDataBindingToSilverlight4_BusyIndicator2.zip

 

แหล่งข้อมูลอ้างอิง:

ผู้เขียน:
nano_mvp_2009_1

เกี่ยวกับ

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

เขียนใน Silverlight

ใส่ความเห็น

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: