83
WPF(Windows Presentation Foundation)에서 데이터 바인딩은 UI 요소와 데이터 소스 간의 연결을 통해 데이터의 흐름을 자동으로 동기화하는 기능입니다. 이로 인해 UI와 코드의 결합을 최소화하면서 효율적인 데이터 표시 및 처리가 가능해집니다.
데이터 바인딩의 주요 구성 요소는 다음과 같습니다:
- 데이터 소스: 데이터 객체, 컬렉션, XML, 데이터베이스 등.
- 바인딩 타겟: 바인딩이 적용되는 WPF의 UI 요소(예:
TextBox,ListBox,DataGrid등). - 바인딩 모드:
OneWay: 소스에서 타겟으로 데이터 전송.TwoWay: 소스와 타겟 간 데이터의 양방향 전송.OneWayToSource: 타겟에서 소스로 데이터 전송.OneTime: 초기 바인딩만 수행, 이후 업데이트 없음.
예시 코드 1: 간단한 데이터 바인딩
TextBox와 Slider를 사용하여 Slider의 값을 TextBox에 바인딩하는 예제입니다.
- MainWindow.xaml
<Window x:Class="WpfApp241110.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Data Binding Example" Height="200" Width="400">
<StackPanel>
<Slider Name="mySlider" Minimum="0" Maximum="100" Value="50" />
<TextBox Text="{Binding ElementName=mySlider, Path=Value, Mode=OneWay}" Width="200" />
</StackPanel>
</Window>- 결과사진
예시 코드 2: MVVM 패턴에서 데이터 바인딩
WPF에서 데이터 바인딩은 MVVM(Model-View-ViewModel) 패턴과 잘 맞습니다. INotifyPropertyChanged 인터페이스를 구현하여 ViewModel의 속성 변경 시 UI가 업데이트되도록 합니다.
- MainWindow.xaml
<Window x:Class="WpfApp241110.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp241110"
Title="MVVM Binding Example" Height="200" Width="400">
<Grid>
<StackPanel>
<TextBox Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}" Width="200" Margin="10"/>
<TextBlock Text="{Binding Name}" FontSize="20" Margin="10" />
</StackPanel>
</Grid>
</Window>- MainWindow.xaml.cs
using System.Windows;
namespace WpfApp241110
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new MainViewModel();
}
}
}- MainViewModel.cs
using System.ComponentModel;
namespace WpfApp241110
{
public class MainViewModel : INotifyPropertyChanged
{
private string _name;
public string Name
{
get { return _name; }
set
{
if (_name != value)
{
_name = value;
OnPropertyChanged(nameof(Name));
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}- 결과 사진
설명
Text="{Binding ...}:Binding을 사용하여TextBox의Text속성을 ViewModel의Name속성과 연결합니다.DataContext: WPF의DataContext는 바인딩에 사용할 기본 데이터 소스를 지정합니다.INotifyPropertyChanged: 데이터 변경 시 바인딩된 UI 요소가 자동으로 업데이트되도록 합니다.
