(동영상)WPF 데이터 바인딩(Data Binding) 이란?

 

6.1 WPF 데이터 바인딩(Data Binding) 이란?

n  데이터 바인딩이란 “컨트롤 or 엘리먼트를 데이터에 연결시키는 기술”이다.

n  예문

<!—소스객체 à

<TextBox Name="txt1" Text="{Binding Mode=OneWay}" />

 

<!—타겟객체 à

<TextBox Name="txt2"  

Text="{Binding Source={x:Reference txt1},Path=Text}"/>

 

n  데이터 바인딩은 소스와 타겟이 필요하며 일반적으로 소스는 데이터(ViewModel)이고 타겟은 컨트롤 입니다. 하지만 어느 경우엔 소스와 타겟 둘다 컨트롤이 될수가 있어 구분이 모호할 때도 있습니다. 또 어떤 경우에는 반대로 타겟이 소스에게 데이터를 전달하기도 합니다.

n  모든 바인딩에는 소스 객체, 소스 속성, 타겟 객체 및 타겟 속성이 있습니다.

n  타겟 객체는 바인딩 할 속성, 즉 데이터를 렌더링하는 UI 컨트롤을 소유하는 객체이며 소스 객체는 Binding Source속성 또는 ViewModel 클래스인 경우 DataContext 속성으로 지정하면 됩니다.

n  Binding.Source 속성을 통해 지정되는 원본 개체없이 정의 된 바인딩은 대상 개체의 DataContext를 원본으로 사용한다.

n  DataContext 값은 한 컨트롤에서 다른 컨트롤로 비주얼 트리 아래로 상속되는데, 하위 객체에서 사용가능 합니다.

n  데이터 바인딩은 이벤트 핸들러를 대체할 수 있는데 이는 C#코드를 줄이는 역할을 합니다. XAML에서 정의된 데이터 바인딩은 C# 코드 비하인드 파일에서 이벤트 핸들러를 정의할 필요가 없으며 코드 비하인드 파일 자체가 필요 없는 경우도 있습니다.

n  컨트롤은 데이터를 사용자에게 보여주는 것과 사용자가 데이터를 변경할 수 있게 해주는 두 가지 기능을 제공합니다. 최근 컨트롤과 데이터 사이의 많은 반복 작업들이 단순화 되면서 CheckBox를 Boolean 변수로 바인딩하고 사용자가 작업이 끝난 후 Boolean 변수를 다시 CheckBox 값으로 바인딩하는 코드들을 만들어야 했는데 아래처럼 CheckBox와 Bool 변수 사이를 데이터바인딩을 이용하게 간단하게 처리할 수 있습니다.

n  예문.

[MainWindow.xaml]

<StackPanel Orientation="Vertical" Margin="20" >

        <Label Content="Which city do you love?"/>

        <CheckBox Content="SEOUL" IsChecked="{Binding Seoul}"/>

        <CheckBox Content="JEJOO" IsChecked="{Binding Jejoo}"/>

        <CheckBox Content="INCHEON" IsChecked="{Binding Incheon}"/>

        <Button Content="제출" Click="Sumit_Click"/>

</StackPanel>

 

[MainWindow.xaml.cs]

public partial class MainWindow : Window

{

//UI 컨트롤에서 바인딩으로 사용할 소스 속성들

public bool Seoul { get; set; }

public bool Jejoo { get; set; }

public bool Incheon { get; set; }

 

public MainWindow()

{

      this.InitializeComponent();

      //바인딩의 소스객체, UI컨트롤에서 별도의 소스 지정없이 사용가능

      //Window의 하위객체에서 소스 속성으로 사용가능

      this.DataContext = this; 

}

 

//버튼의 클릭 이벤트 핸들러

private void Sumit_Click(object sender, RoutedEventArgs e)

{

      MessageBox.Show(string.Format("SEOUL: {0}, JEJOO: {1}, INCHEON: {2}", Seoul, Jejoo, Incheon));

}

 

}

 

 

 

 

n  다음은 TextBox간의 단방향 데이터 바인딩 예문을 살펴보자.

n  아래 예문은 별도의 C#코드는 필요 없다. txt1이 소스 객체가 되고 txt2가 타겟 객체가 되어 소스의 Text 속성의 값을 타겟 txt2의 Text 속성에 바인딩 시킨다.

<StackPanel Orientation="Vertical" Margin="20" >

        <TextBox Name="txt1"  Text="{Binding Mode=OneWay}" />

        <TextBox Name="txt2"  

Text="{Binding Source={x:Reference txt1},Path=Text}"/>

</StackPanel>

위쪽 TextBox에 값을 입력하며 아래쪽 TextBox에 자동 입력된다.

 

n  위 코드를 수정하여 양방향바인딩으로 만들어보자.

n  위쪽 TextBox에서 입력을 하면 아래에 자동 반영 되지만, 아래쪽 TextBox에서 입력을 하면 바로 반영은 안되고 포커스를 잃는경우에만 하는 경우에 상단의 TextBox에 반영된다. (양방향에서 타겟이 소스를 UPDATE하는 타이밍은 UpdateSourceTrigger 속성으로 지정하는데 대부분의 의존 속성 기본값이 PropertyChanged인 반면 Text 속성은 기본값이 LostFocus 입니다.)

<TextBox Name="txt1"  Text="{Binding Path=Text, Mode=TwoWay}" />

        <TextBox Name="txt2"  

Text="{Binding Source={x:Reference txt1},Path=Text}"/>

 

최종적으로 아래와 같이 UpdateSourceTrigger 절을 타겟객체쪽에 추가하자. 소스를 갱신할 타이밍을 지정하는 곳이고 Text 속성인 경우 기본값은 포커스를 잃을 때(LostFocus)이다.

<TextBox Name="txt1"  Text="{Binding Path=Text, Mode=TwoWay}" />

<TextBox Name="txt2"  

Text="{Binding Source={x:Reference txt1},Path=Text, 

UpdateSourceTrigger =PropertyChanged}"/>

다른 예문을 살펴보자.

public partial class MainWindow {

public MainWindow()

{

  InitializeComponent();

  _viewmodel = new MyViewModel()  {

    Date = new DateTime(2011, 7, 1),

    Title = "WPF User Group"

  };

 

  this.DataContext = _viewmodel;

}

}

 

<Grid x:Name="LayoutRoot" Background="White">

  ...

 

  <TextBlock Text="Name:"

              Grid.Row="1"/>

  <TextBox Text="{Binding Path=Title, Mode=TwoWay}"

           Grid.Row="1" Grid.Column="1"/> 

  <TextBlock Text="Date:"

              Grid.Row="2"/>

  <sdk:DatePicker SelectedDate="{Binding Path=Date, Mode=TwoWay}"

                  Grid.Row="2" Grid.Column="1"/>

</Grid>

 

n  XAML에서 바인딩 인스턴스를 만들 수 있다

<TextBox Text="{Binding Path=Text}"/>

아래처럼 표기할 수도 있다.

<TextBox>

  <TextBox.Text>

    <Binding Path="Text"/>

  </TextBox.Text>

</TextBox>

n  바인딩을 더 간단하게 만들고 싶다면 Path를 생략하고 다음과 같이 바인딩을 간단히 표현할 수 있다.

<TextBox Text="{Binding Text}"/>

n  소스 (예 : DataContext)의 속성에 바인딩하지 않고 소스객체 자체에 바인딩 하려는 경우는 “점(Dot)”을 사용하면 된다.

<TextBox Text="{Binding Path=.}"/>

n  또는 이경우 아래와 같이 Binding 구문만 사용할 수 도 있다.

<TextBox Text="{Binding}"/>

   ​