10장. WPF 데이터바인딩(DataBinding)이란?

10장. WPF 데이터바인딩(DataBinding)이란?

참조

• https://www.youtube.com/watch?v=A0atwgTrcjY&list=PLxU-iZCqT52Cmj47aKB1T-SxI33YL7rYS&index=11

목적

• WPF 데이터바인딩(DataBinding)에 대해서 학습합니다.

데이터 바인딩이란?

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

예문

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

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

• 데이터 바인딩은 소스와 타겟이 필요하며 일반적으로 소스는 데이터(ViewModel)이고 타겟은 컨트롤입니다.
• 하지만 어느 경우엔 소스와 타겟 둘다 컨트롤이 될 수가 있어 구분이 모호할 때도 있습니다.
• 또 어떤 경우에는 반대로 타겟이 소스에게 데이터를 전달하기도 합니다.
• 모든 바인딩에는 소스 객체, 소스 속성, 타겟 객체 및 타겟 속성이 있습니다.
• 타겟 객체는 바인딩 할 속성, 즉 데이터를 렌더링하는 UI 컨트롤을 소유하는 객체이며 소스 객체는 Binding Source 속성 또는 ViewModel 클래스인 경우 DataContext 속성으로 지정하면 됩니다.
• Binding.Source 속성을 통해 지정되는 원본 개체없이 정의 된 바인딩은 대상 개체의 DataContext를 원본으로 사용한다.
• DataContext 값은 한 컨트롤에서 다른 컨트롤로 비주얼 트리 아래로 상속되는데, 하위 객체에서 사용 가능합니다.
• 데이터 바인딩은 이벤트 핸들러를 대체할 수 있는데 이는 C# 코드를 줄이는 역할을 합니다. XAML에서 정의된 데이터 바인딩은 C# 코드 비하인드 파일에서 이벤트 핸들러를 정의할 필요가 없으며 코드 비하인드 파일 자체가 필요 없는 경우도 있습니다.
• 컨트롤은 데이터를 사용자에게 보여주는 것과 사용자가 데이터를 변경할 수 있게 해주는 두 가지 기능을 제공합니다.
• 최근 컨트롤과 데이터 사이의 많은 반복 작업들이 단순화 되면서 CheckBox를 Boolean 변수로 바인딩 하고 사용자가 작업이 끝난 후 Boolean 변수를 다시 CheckBox 값으로 바인딩하는 코드들을 만들어야 했는데 아래처럼 CheckBox와 Bool 변수 사이를 데이터 바인딩을 이용하게 간단하게 처리할 수 있습니다.

데이터 바인딩 실습

MainWindow.xaml

<Window x:Class="WPF10_Test.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:WPF10_Test"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="300">
    <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="제출" 
                VerticalAlignment="Center"
                HorizontalAlignment="Center"
                Click="Button_Click"/>
    </StackPanel>
</Window>

MainWindow.xaml.cs

using System.Windows;

namespace WPF10_Test
{
    /// <summary>
    /// MainWindow.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class MainWindow : Window
    {
        //UI 컨트롤에서 바인딩으로 사용할 소스 속성들
        public bool Seoul { get; set; }
        public bool Jejoo { get; set; }
        public bool Incheon { get; set; }

        public MainWindow()
        {
            InitializeComponent();

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

        //버튼의 클릭 이벤트 핸들러
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show($"SEOUL : {Seoul}, JEJOO : {Jejoo}, INCHEON : {Incheon}");
        }
    }
}

예제2

• TextBox간의 단방향 데이터 바인딩 예문을 만들어 보자.

MainWindow.xaml

<Window x:Class="WPF10_Test.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:WPF10_Test"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="300">
    <StackPanel Orientation="Vertical" Margin="20">
        <!--소스객체-->
        <TextBox x:Name="txt1" Text="{Binding Mode=OneWay}"/>

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

• 위 코드를 양방향 바인딩으로 만드려면 소스 객체에서 Text="{Binding Path=Text, Mode=TwoMode}" 라고 수정하면 됩니다.
• 양방향에서 타겟이 소스를 UPDATE 하는 타이밍은 UpdateSourceTrigger 속성으로 지정하는데 대부분의 의존 속성 기본값이 PropertyChanged 인 반면 Text 속성은 기본값이 LostFocus 입니다.
• 최종적으로 아래와 같이 UpdateSourceTrigger 절을 타겟 객체 쪽에 추가합니다.
• 소스를 갱신할 타이밍을 지정하는 곳이고 Text 속성인 경우 기본값은 포커스를 잃을 때입니다.

MainWindow.xaml

<Window x:Class="WPF10_Test.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:WPF10_Test"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="300">
    <StackPanel Orientation="Vertical" Margin="20">
        <!--소스객체-->
        <TextBox x:Name="txt1" Text="{Binding Path=Text, Mode=TwoWay}"/>

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