Silverlight 3 Tutorial 2: Data Binding

Tutorial 2: Data Binding

Data Binding Mode:
[대상]: UI, [소스]: behind code
OneTime: 바인딩을 만들 때 소스 데이터와 함께 대상을 업데이트
OneWay: 바인딩을 만들어 데이터를 변경할 때 소스 데이터와 함께 대상을 업데이트
TwoWay: 대상과 소스 중 하나가 변경될 때 대상과 소스를 모두 업데이트,
or 자동 소스 업데이트를 비활성화하고 원할 때만 소스를 업데이트

TwoWay Binding에서는 소스가 변경되면 대상이 바로 업데이트 될 수 있도록 하기위해서
INotifyPropertyChanged interface를 구현해야한다.

public event PropertyChangedEventHandler PropertyChanged;

public void NotifyPropertyChanged(string propertyName)
{
    if (PropertyChanged != null)
    {
       PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

예제 소스 전문. Tutorial code에서 TwoWay Binding을 위한 소스만 추가하였다.

MainPage.xaml [이런 거지같은.. SyntaxHighlighter이 xaml 파일 지원이 잘 안되네!!ㅠ]

MainPage.xaml.cs

using System.Windows;
using System.Windows.Controls;
using System.Collections.Generic;

namespace EasyGrid
{
    public partial class MainPage : UserControl
    {
        private Book b1;
        private Book b2;
        private Book currentBook;

        public MainPage()
        {
            InitializeComponent();

            Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            Change.Click += new RoutedEventHandler(Change_Click);
            TestTwoWayBinding.Click += new RoutedEventHandler(TestTwoWayBinding_Click);
            // 1. Create an instance of the Book class that implements INotifyPropertyChanged.
            b1 = new Book();
            // 2. Brush1 is set to be a SolidColorBrush with the value Red.
            InitializeBleak(b1);

            currentBook = b2 = new Book();
            InitializeProgramming(b2);
            SetDataSource();
        }

        void Change_Click(object sender, RoutedEventArgs e)
        {
            if (currentBook == b1)
                currentBook = b2;
            else
                currentBook = b1;
            SetDataSource();
        }

        void SetDataSource()
        {
            // 3. Set the DataContext of the TextBox MyTextBox.
            LayoutRoot.DataContext = currentBook;

            //or Using these code line.
            //Title.DataContext = currentBook;
            //Author.DataContext = currentBook;
            //Chapters.DataContext = currentBook;
            //MultipleAuthor.DataContext = currentBook;
            //QuantityOnHand.DataContext = currentBook;
        }

        private void InitializeProgramming(Book b)
        {
            b.Title = "Programming Silverlight";
            b.Author = "Jesse Liberty, Tim Heuer";
            b.MultipleAuthor = true;
            b.QuantityOnHand = 20;
            b.Chapters = new List() { "Introduction", "Controls", "Events", "Styles" };
        }

        private void InitializeBleak(Book b)
        {
            b.Title = "Bleak House";
            b.Author = "Charles Dickens";
            b.MultipleAuthor = false;
            b.QuantityOnHand = 150;
            b.Chapters = new List()
            {
                "In Chancery",
                "In Fashion",
                "A Progress",
                "Telescoopic Philanthropy",
                "A Morning Adventure",
                "Quite at Home",
                "The Ghosts Walk",
                "Covering Sins",
                "Signs and Tokens",
                "The Law Writer"
            };
        }

        //만약 book class에서 INotifyPropertyChanged를 UI에서 Author는 바로 바뀌지 않는다.
        void TestTwoWayBinding_Click(object sender, RoutedEventArgs e)
        {
            currentBook.Author = "Two Way Testing";
        }
    }
}

book.cs

using System.ComponentModel;
using System.Collections.Generic;

namespace EasyGrid
{
    //INotifyPropertyChanged interface for data binding
    public class Book : INotifyPropertyChanged
    {
        private string bookTitle;
        private string bookAuthor;
        private int quantityOnHand;
        private bool multipleAuthor;
        private List myChapters;

        // implement the required event for the interface
        public event PropertyChangedEventHandler PropertyChanged;

        public string Title
        {
            get { return bookTitle; }
            set
            {
                bookTitle = value;
                NotifyPropertyChanged("Title");
            }       // end set
        }           // end property

        public string Author
        {
            get { return bookAuthor; }
            set
            {
                bookAuthor = value;
                NotifyPropertyChanged("Author");
            }       // end set

        }

        public List Chapters
        {
            get { return myChapters; }
            set
            {
                myChapters = value;
                NotifyPropertyChanged("Chapters");
            }
        }


        public bool MultipleAuthor
        {
            get { return multipleAuthor; }
            set
            {
                multipleAuthor = value;
                NotifyPropertyChanged("MultipleAuthor");
            }       // end set
        }


        public int QuantityOnHand
        {
            get { return quantityOnHand; }
            set
            {
                quantityOnHand = value;
                NotifyPropertyChanged("QuantityOnHand");
            }       // end set
        }


        // factoring out the call to the event
        public void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                //이 Line을 주석처리하면 TwoWay Binding에서 속성이 변경되도 즉시 반영되지 않는다.
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

다시한번 확인하고 넘어가자!

• Data Binding Mode
• INotifyPropertyChanged interface

참고자료:
Tutorial 2: http://silverlight.net/learn/tutorials/databinding-cs/
MSDN Data Binding: http://207.46.16.248/ko-kr/library/cc278072%28VS.95%29.aspx