[WPF] 데이터 바인딩

✍ 데이터 바인딩이란? 

Control 혹은 Element를 데이터에 연결시키는 기술이다. 

 

<!--소스 객체 --!>
<TextBox Name="txt1" Text="{Binding Mode=OneWay}"/>

<!--타겟객체--!>
<TextBox Name="txt2" Text="{Binding Source={x:Reference txt1}, Path=Text}"/>

- 데이터 바인딩은 소스와 타겟이 필요하며 일반적으로 소스는 데이터(ViewQModel)이고 타겟은 컨트롤이다. 

하지만 어느 경우엔 소스와 타겟 둘 다 컨트롤이 될 수 있어 구분이 모호할 때도 있다. 또 어떤 경우에는 반대로 타겟이 소 스에게 데이터를 전달하기도 한다. 

 

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

 

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

 

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

 

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

 

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

 

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

 

💻 XAML

<Window x:Class="WpfApp2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp2"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel Orientation="Vertical" Margin="20">
        <Label Content="어느 도시를 좋아하나요?"/>
        <CheckBox Content="SEOUL" IsChecked="{Binding Seoul}"/>
        <CheckBox Content="JEJU" IsChecked="{Binding Jeju}"/>
        <CheckBox Content="BUSAN" IsChecked="{Binding Busan}"/>
        <Button Content="제출" Click="Button_Click"/>
    </StackPanel>
</Window>

💻 CS

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp2
{
    /// <summary>
    /// MainWindow.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class MainWindow : Window
    {

        // UI 컨트롤에서 바인딩으로 사용할 소스 속성들
        public bool Seoul { get; set; }
        public bool Jeju { get; set; }
        public bool Busan { get; set; }

        public MainWindow()
        {
            InitializeComponent();

            // 바인딩의 소스객체, UI컨트롤에서 별도의 소스 지정없이 사용가능
            // Window의 하위객체에서 소스 속성으로 사용가능
            this.DataContext = this;
        }

        // 버튼의 클릭 이벤트 핸들러 
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show(string.Format("SEOUL: {0}, JEJU: {1}, BUSAN:{2}", Seoul, Jeju, Busan));
        }
    }
}

---

TextBox 예제 

 

💻 XAML

<Window x:Class="WpfApp2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp2"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel Orientation="Vertical" Margin="20">
        <TextBox Name="txt1" Text="{Binding Mode=OneWay}"/>
        <TextBox Name="txt2" Text="{Binding Source={x:Reference txt1}, Path=Text}"/>
    </StackPanel>
</Window>

 

✍ 양방향에서 타겟이 소스를 UPDATE 하는 타이밍은 UpdateSourceTrigger 속성으로 지정하는데 대부분의 의존 속성 기본값이 PropertyChanged인 반면 Text 속성은 기본값이 LostFocus 이다.