[WPF] 데이터 바인딩(Data Binding)

데이터 바인딩(Data Binding)은 WPF(Windows Presentation Foundation)의 대표적인 특징으로 지금부터 데이터 바인딩에 대해서 정리하겠습니다.

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

데이터 바인딩(Data Binding)은 사용자 인터페이스(UI: User Interface) 요소와 데이터 소스 간의 연결을 구축하는 기술입니다. 이를 통해 데이터의 변화를 실시간으로 UI 요소에 반영하거나 UI 요소의 상태 변화를 데이터에 반영할 수 있습니다.

데이터 바인딩 구성 요소

Binding Source : 데이터의 원본이며, 일반적으로 ViewModel 또는 데이터 모델을 말합니다. 이는 데이터의 속성을 나타내는 클래스나 개체입니다.

Binding Target : UI 요소 중에서 데이터를 표시하거나 데이터와 상호 작용하는 요소입니다.
ex) TextBox, Label 등

Binding : Binding Source와 Binding Target 사이의 연결을 설정하는 메커니즘입니다. XAML을 사용하여 설정하며, Binding Source의 속성과 Binding Target의 속성을 연결합니다.

Mode : Binding의 방향을 나타내는 요소입니다.

OneTime : Application이 시작되거나 DataContext 변경이 발생하는 경우, 한 번만 업데이트
OneWay : 원본 속성(Binding Source)이 변경되는 경우 대상 속성(Binding Target)이 업데이트
OneWayToSource : 대상 속성(Binding Target)이 변경되는 경우 원본 속성(Binding Source)이 업데이트
TwoWay : Binding Source 혹은 Binding Target이 변경되는 경우 Binding Source 혹은 Binding Target 업데이트(양방향 업데이트)
Default : Binding Target의 기본 Mode값을 사용

Converter : 데이터를 바인딩 대상에 표시하기 전에 변환하는 데 사용됩니다.
ex) 숫자를 통화 형식으로 표시하거나 날짜를 원하는 형식으로 변환하는 등의 작업을 수행할 수 있습니다.

INotifyPropertyChanged : 바인딩 소스가 변경되었을 때 UI에 이를 통지하기 위한 인터페이스입니다. 이를 통해 데이터의 변화가 즉시 UI에 반영될 수 있습니다.

데이터 바인딩 예제

Control(TextBox) – Control(Label) Binding에 대한 예제 입니다.

<Window x:Class="WPFExample.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:WPFExample"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="200">
    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
        <TextBox x:Name="tbx" Text="{Binding Mode=OneWay}" Width="200" Height="20"/>
        <Label Content="{Binding Source={x:Reference Name=tbx}, Path=Text}" Background="LightGray" Width="200" Height="25"/>
    </StackPanel>
</Window>

using System.Windows;

namespace WPFExample
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

MainWindow.xaml에서 TextBox는 이름은 “tbx”이며 Text 속성은 OneWay 모드로 Binding되있습니다.

Label의 Content 속성에 tbx(TextBox)의 Text 속성을 Binding하여 TextBox의 변화에 따라 Label의 Content 속성이 실시간으로 변환됩니다.

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

데이터 바인딩 구성 요소

데이터 바인딩 예제

답글 남기기 응답 취소