데이터 바인딩 1

UI 프로그래밍 할 때, 서로 참조 하는 UI가 있으면 UI의 노가다가 시작된다.
WPF에서는 데이터 바인딩을 통하여 소스 코딩 없이 가능하도록 해주고 있다.

로직과 뷰 처리를 최대한 분리 할 수 있도록 해준다.

Binding
<Canvas>
    <TextBox Canvas.Left="29" Canvas.Top="28" Height="22" Name="textBox1" Width="125" Text="{Binding Message}"/>
    <Button Canvas.Left="31" Canvas.Top="78" Content="Button" Height="27" Name="button1" Width="120" Click="button1_Click" />
</Canvas>

TextBox와 Button을 배치한다.
버튼 이벤트 Click을 추가한다.

{Binding Message}

TextBox의 Text 속성을 Message 속성과 Binding 한다.
Meesage 속성은 MainWIndow의 클래스 파일 .cs에 속성으로 정의 되어 있다.

MainWindow
public partial class MainWindow : Window
{
    public string Message { get; set; }

     public MainWindow()
    {
        InitializeComponent();

        this.DataContext = this;
    }

     private void button1_Click(object sender, RoutedEventArgs e)
     {
         MessageBox.Show(Message);
     }
}

Message는 TextBox의 Text에 바인딩 된 속성이다.
바인딩 된 속성은 public이어야 한다.

this.DataContext = this;

MainWindow.xaml에서 바인딩한 소스 검색을 MainWindow에서 하도록 지정 한다.
xaml에서 바인딩한 Message 속성은 MainWindow 클래스에서 찾는다.

실행 결과 화면이다.

 

소스에서 DtaContext를 지정하지 않고 리소스에서도 지정 할 수 있다.

리소스 에디터에서 MainWindow 지정 후, 그림과 같이 DataContext 왼쪽을 클릭하면 박스가 하나 뜬다.
RelativeSource > Self를 최종적으로 클릭하면 this.DataContext = this 와 같은 결과를 볼수 있을것이다.

TextBox의 Text는 TwoWay 바인딩이 기본이기 때문에 바인딩 된 Message와 Text 한쪽이 변경 되면 서로 바뀐다.
소스에 다음과 같이 입력하면 텍스트도 수정된다.

Message = "WOW!!!";

 

다운로드 : BindingDemo.zip

참고 :

http://cswpf.seesaa.net/index-5.html

http://msdn.microsoft.com/ko-kr/library/ms752347(v=vs.110).aspx