WPF: Simple Data Binding (P6)

  • Post author:
  • Post category:WPF
  • Post comments:3 Comments
  • Reading time:3 mins read

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 …

This Post Has 3 Comments

  1. Pham Nguyen

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

    1. basquang

      Giờ đã là MVP kỳ cựu rồi nhỉ?

Leave a Reply