[WPF] WPF 데이터 바인딩

안녕하세요.

 

오늘은 WPF에서 데이터 바인딩에 대해서 학습해 보려고 합니다.

 

데이터 바인딩이란 한마디로 데이터를 컨트롤에 결합? 한다는 뜻인데요.

 

WPF는 Xaml 부분과 비하인드 코드 2가지로 나뉘는데요.

 

비하인드 코드의 데이터를 UI인 Xaml에 겹합해서 데이터를 실시간으로 변경하고 보여주는 걸 해주는? 역할이 바로 데이터 바인딩이라고 이해하시면 됩니다.

 

그럼 예제를 통해서 어떻게 데이터 바인딩을 하는지 보여 드리도록 하겠습니다.

 

xaml 소스

<Window x:Class="DataBinding_01.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:DataBinding_01"
        mc:Ignorable="d"
        Title="MainWindow" Height="500" Width="500">
 
    <Window.Resources>
        
        <local:Customers x:Key="cu">
            <local:Customer Name="범범조조" Tel="000-1111-2222"/>
            <local:Customer Name="아이유" Tel="011-1111-2722"/>
            <local:Customer Name="정형돈" Tel="110-1311-2622"/>
            <local:Customer Name="유재석" Tel="220-1141-2522"/>
        </local:Customers>
    
        <!--스타일 지정-->
        <Style x:Key="uiTbStyle" TargetType="{x:Type TextBlock}">
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="FontWeight" Value="Bold"/>
        </Style>
        
    </Window.Resources>
    
    <Grid x:Name="uiGrid_Main" Margin="10, 10, 10, 10" DataContext="{StaticResource cu}">
        
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
 
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
 
            <Label Grid.Row="0" Grid.Column="0" Content="성명 : " Margin="10"/>
            <TextBox x:Name="uiTb_Name" Grid.Row="0" Grid.Column="1" Margin="10"
                     Text="{Binding Path= Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
 
            <Label Grid.Row="0" Grid.Column="2" Content="번호 : " Margin="10"/>
            <TextBox x:Name="uiTb_Tel" Grid.Row="0" Grid.Column="3" Margin="10"
                     Text="{Binding Path=Tel,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
        </Grid>
 
        <ListBox Grid.Row="1" ItemsSource="{Binding}" Margin="10"
                 IsSynchronizedWithCurrentItem="True">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="성명 : "/>
                        <TextBlock Text="{Binding Path=Name}" Style="{StaticResource uiTbStyle}"/>
                        <TextBlock Text="   "/>
                        <TextBlock Text="번호 : "/>
                        <TextBlock Text="{Binding Path=Tel}" Style="{StaticResource uiTbStyle}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
 
        <Button Grid.Row="2" 
                Content="Add" 
                x:Name="uiBtn_Add"
                Padding="5"
                Click="uiBtn_Add_Click"/>
        
    </Grid>
    
</Window>
 

 

비하인드 코드

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows;
 
namespace DataBinding_01
{
    /// <summary>
    /// MainWindow.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class MainWindow : Window
    {
        Customers customerList;
 
        public MainWindow()
        {
            InitializeComponent();
 
            customerList = (Customers)this.FindResource("cu");
        }
 
        private void uiBtn_Add_Click(object sender, RoutedEventArgs e)
        {
            customerList.Add(new Customer(uiTb_Name.Text.ToString(), uiTb_Tel.Text.ToString()));
        }
    }
 
    class Customers : ObservableCollection<Customer>
    {
 
    }
 
    class Customer : INotifyPropertyChanged
    {
        public Customer() : this("성명", "번호")
        {
 
        }
 
        public Customer(string name, string tel)
        {
            this.Name = name;
            this.Tel = tel;
        }
 
        private string name;
        public string Name
        {
            get
            {
                return name;
            }
            set
            {
                name = value;
                OnPropertyChanged("Name");
            }
        }
 
        private string tel;
        public string Tel
        {
            get
            {
                return tel;
            }
            set
            {
                tel = value;
                OnPropertyChanged("Tel");
            }
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
 
        void OnPropertyChanged(string propertyName)
        {
            if(PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}
 

 

실행 결과

 

위와 같이 바인딩 할 클래스를 선언한 후, 클래스의 고객 객체의 Property들을 컨트롤에 알맞게 바인딩 해줘서 값이 제대로 적용되는 것을 확인하실 수 있습니다.

 

저도 계속해서 바인딩에 익숙해 지려고 연습하는 중이니까, 여러분들도 이해가 안 되더라고 계속 예제 코드를 따라 하면서 익히시는 걸 추천 드리겠습니다.

 

감사합니다.^^