basquang™ on clouds

July 13, 2009

WPF: Simple Data Binding (P6)

Filed under: WPF — basquang @ 8:21 AM

Thay đổi Object –> Thay đổi UI

Trong phần trước chúng ta thấy rằng, rõ ràng UI không nhận biết được sự thay đổi đối với Object. Chúng ta phải binding lại giữ liệu cho Controls mỗi khi Object thay đổi. Do đó, sẽ hiệu quả hơn nếu như UI có khả năng cập nhật mỗi khi Object thay đổi. Để thực hiện việc cập nhập giao diện UI khi có thay đổi đối với Object thì chúng ta cần phải sử dụng Event. Để raise một event khi một property của object thay đổi, chúng ta thực thi INotifyPropertyChanged

...
using System.ComponentModel; // INotifyPropertyChanged
 
namespace WithoutBinding
{
    public class Person: INotifyPropertyChanged
    {
        private string firstName;
        public string FirstName 
        {
            get { return firstName; }
            set
            {
                if (firstName == value) { return; }
                firstName = value;
                Notify("FirstName");
            } 
        }
        private string lastName;
        public string LastName 
        {
            get { return lastName; }
            set
            {
                if (lastName == value) { return; }
                lastName = value;
                Notify("LastName");
            } 
        }
        private string fullName;
        public string FullName 
        {
            get { return fullName; }
            set
            {
                if (fullName == value) { return; }
                fullName = value;
                Notify("FullName");
            }          
        }
 
        public Person(string firstName, string lastName)
        {
            FirstName = firstName;
            LastName = lastName;
            FullName = firstName + " " + lastName;
        }
 
        #region INotifyPropertyChanged Members
        // INotifyPropertyChanged Members
        public event PropertyChangedEventHandler PropertyChanged;
 
        protected void Notify(string propName)
        {
            if (this.PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propName));
            }
        }
        #endregion
    }
}

Chúng ta sử dụng Event này trong UI như sau:

public Window1()
        {
            InitializeComponent();       
 
            //Display lên form controls
            this.txtFirstName.Text = person.FirstName;
            this.txtLastName.Text = person.LastName;
            this.tblFullName.Text = person.FullName;
            person.PropertyChanged += new System.ComponentModel.PropertyChangedEventHandler(person_PropertyChanged);
        }
 
        void person_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            switch (e.PropertyName)
            {
                case "FirstName":
                    this.txtFirstName.Text = person.FirstName;
                    break;
                case "LastName":
                    this.txtLastName.Text = person.LastName;
                    break;
                case "FullName":
                    this.tblFullName.Text = person.FullName;
                    break;
            }
        }
 
        private void btnDisplay_Click(object sender, RoutedEventArgs e)
        {            
            //Ghi nhận lại Full name
            person.FullName = person.FirstName + " " + this.txtMiddleName.Text + " " + person.LastName;
 
            //Binding lại controls
            //this.tblFullName.Text = person.FullName;
 
            //Show message box khi click vào button
            MessageBox.Show("Hello " + person.FullName);
        }

image

Thay đổi UI –> Thay đổi Object

Việc thay đổi Object theo sự thay đổi UI chúng ta đã thường sử dụng bằng cách implemement Event của control như Text_Changed …

Advertisements

1 Comment »

  1. Thanks !Bài viết hay lắm anh ^^~ mốt e sẽ cố gắng thành MVP ^^~

    Comment by Pham Nguyen — February 22, 2011 @ 1:55 PM | Reply


RSS feed for comments on this post. TrackBack URI

Leave a Reply

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 / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: