65
예제 1: 단일 컨트롤에
예제 2: 부모 컨트롤에
WPF에서 DataContext는 바인딩의 기본 데이터 소스를 설정하는 중요한 속성입니다. UI 요소가 데이터 바인딩을 사용할 때, DataContext는 이들이 바인딩될 데이터 객체를 참조합니다. DataContext는 WPF 애플리케이션에서 데이터 바인딩의 중심이 되어 UI와 코드 간 결합을 줄이면서 보다 유연한 데이터 접근을 제공합니다.
DataContext 개념
DataContext는 데이터 바인딩의 출발점이 됩니다. 바인딩된 UI 요소는DataContext에 설정된 객체의 속성이나 데이터를 참조합니다.- 부모 컨테이너의
DataContext가 설정되면, 그 자식 요소들은 해당 컨텍스트를 상속받아 데이터 바인딩이 가능합니다.
예제 1: 단일 컨트롤에 DataContext 설정
DataContext를 MainWindow에 설정하고 TextBox가 ViewModel의 Text 속성에 바인딩되도록 하는 예제입니다.
- 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="DataContext Example" Height="200" Width="400">
<Grid>
<!-- TextBox가 ViewModel의 Text 속성을 참조하여 표시 -->
<TextBox Text="{Binding Path=Text, Mode=TwoWay}" Width="200" Height="30" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Window>
- MainWindow.xaml.cs
using System.Windows;
namespace WpfApp241110
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
// DataContext를 ViewModel 인스턴스로 설정
this.DataContext = new MainViewModel { Text = "Hello, DataContext!" };
}
}
}
- ViewModel (MainViewModel.cs)
using System.ComponentModel;
namespace WpfApp241110
{
public class MainViewModel : INotifyPropertyChanged
{
private string _text;
public string Text
{
get { return _text; }
set
{
if (_text != value)
{
_text = value;
OnPropertyChanged(nameof(Text));
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}- 결과 사진
설명:
DataContext는MainWindow에 설정되어TextBox와Grid가 ViewModel의 속성에 접근할 수 있습니다.TextBox는Text속성에 바인딩되어MainViewModel의Text값이 UI에 표시되고 변경됩니다.
예제 2: 부모 컨트롤에 DataContext 설정
부모 컨트롤(StackPanel)에 DataContext를 설정하여 해당 컨트롤의 모든 자식이 동일한 데이터 컨텍스트를 공유하도록 설정하는 예제입니다.
ViewModel (MainViewModel.cs) (위와 동일)
- 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="DataContext Example" Height="200" Width="400">
<StackPanel>
<!-- 부모 컨트롤인 StackPanel에 DataContext 설정 -->
<StackPanel.DataContext>
<local:MainViewModel Text="Initial Text"/>
</StackPanel.DataContext>
<!-- Text 속성이 ViewModel의 Text에 바인딩됨 -->
<TextBox Text="{Binding Path=Text, Mode=TwoWay}" Width="200" Margin="10"/>
<TextBlock Text="{Binding Path=Text}" FontSize="16" Margin="10"/>
</StackPanel>
</Window>
- MainWindow.xaml.cs
using System.Windows;
namespace WpfApp241110
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
}- 결과 사진
설명:
StackPanel의DataContext가 설정되면, 모든 자식 요소(TextBox와TextBlock)가 해당 컨텍스트를 사용해 데이터에 바인딩할 수 있습니다.TextBox는 ViewModel의Text속성에 양방향으로 바인딩되어 값이 변경될 때마다 UI와 ViewModel이 동기화됩니다.TextBlock은Text속성에 단방향 바인딩되어 UI에 ViewModel의 데이터를 표시합니다.
이 두 예제는 DataContext가 WPF에서 데이터 바인딩에 어떻게 활용되는지를 보여주며, UI와 데이터 로직을 명확히 분리해줍니다.
