[WPF] XAML만으로 간단히 Data Binding하기

- 개발 환경

Window 11 (버전 24H2)

Visual Studio Community 2026 (18.0.2)

.NET framework 4.7.2

---

1. 서론

  GUI 프로그래밍을 경험해본 개발자라면 공감하는 문제가 있습니다. Control에서 보여지는 값와 실제 인스턴스 내 맴버변수의 값간 동기화에 대해서 고민을 해봤을 것입니다. 실수로 깜빡하여 UI와 실제 데이터를 동기화하지 않아 데이터간 차이가 발생한다면 사용자에게 큰 혼란이 발생할 수 있습니다. WPF에서 MVVM 패턴을 사용한다면 이러한 문제는 Binding를 통해 쉽게 해결 가능합니다. Binding를 통해 데이터를 수정하여도 Binding기능으로 자동적으로 동기화여 개발자는 UI Control를 업데이트하는 추가적인 코드가 필요없습니다.

2. Control간 데이터 Binding

<Window x:Class="WPF_MVVM_Base.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:WPF_MVVM_Base"
        xmlns:vm="clr-namespace:WPF_MVVM_Base.ViewModels"
        mc:Ignorable="d"
        x:Name="MainView"
        d:DataContext="{d:DesignInstance Type=vm:MainViewModel}"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <StackPanel Orientation="Vertical"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Window Title : " FontSize="24"/>
                <TextBox Width="300" FontSize="24"
                         Text="{Binding ElementName=MainView, Path=Title, UpdateSourceTrigger=PropertyChanged}"/>
            </StackPanel>
            
            <Border Height="10"/>
            
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Width : " FontSize="24"/>
                <TextBox FontSize="24" Width="137"
                         Text="{Binding ElementName=MainView, Path=Width}"/>
                
                <TextBlock Text=" Height : " FontSize="24"/>
                <TextBox FontSize="24" Width="137" 
                         Text="{Binding ElementName=MainView, Path=Height}"/>
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

 

  위 예제를 보면 C#코드를 추가하지 않더라도 데이터 Binding를 통해 UI를 충분히 디자인할 수 있음을 확인할 수 있습니다. 데이터 Binding를 관련 코드를 확인 하겠습니다.

데이터 바인딩을 하기전 데이터 Binding를 하기 위한 타겟 Control의 x:Name를 설정해야합니다.

 

Window의 Width를 변경하는 TextBox Text 속성

 

  위 코드는 MainView의 Width를 Text 속성과 Binding한다는 의미입니다. TextBox의 값을 변경하면 실제로 Window 크기가 변경되는 것을 확인 할 수 있습니다. 또한 TextBox의 Text는 String의 문자열데이터이지만 자동적으로 int형의 Width 속성을 수정 할 수 있음을 확인 할 수 있습니다.

 

 위 코드는 Window의 Title과 Binding 하기 위한 코드입니다. 여기서 UpdateSourceTrigger 속성을 PropertyChagned를 설정하여 TextBox의 값이 변경될때 마다 실시간으로 Window Title이 변경되도록 하기 위함입니다.