1. 목표

더보기

1.

- 우선 MVVM 패턴을 고려하지 않고, DataBinding 개념과 사용법 자체에 집중하고, 이후 추가적인 개념으로 확장합니다.

- DataBinding 에서 TwoWay, OneWay 개념을 먼저 이해합니다.

 

 

2. 참고1

Data Binding  C# 소스코드 → XAML UI
(원본 → 복사본)  		 XAML UI → C# 소스코드
(복사본 → 원본)
TwoWay O O
OneWay O X
OneWayToSource X O
OneTime O  X

 

3. 참고2

 

2. UI 준비

더보기

1. 기본 XAML UI 틀을 가진 프로젝트를 다운받아 실행합니다.

DataBinding 준비.zip
0.17MB

 

 

 2. 새 WPF 프로젝트에서 "아래 XAML 소스"를 사용하셔도 됩니다.

    Title="Data Binding" 
    Height="150" Width="265"
    >
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height = "10" />
        <RowDefinition Height = "Auto" />
        <RowDefinition Height = "Auto" />
        <RowDefinition Height = "10" />
        <RowDefinition Height = "*" />
        <RowDefinition Height = "10" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width = "10" />
        <ColumnDefinition Width = "Auto" />
        <ColumnDefinition Width = "*" />
        <ColumnDefinition Width = "10" />
    </Grid.ColumnDefinitions>

    <Label Grid.Row="1" 
           Grid.Column="1" 
           Margin="2" 
           Content="Name"/>

    <TextBox Grid.Row="1" 
             Grid.Column="2"
             Margin="2" />

    <Label Content="Age" 
           Margin="2" 
           Grid.Column="1" 
           Grid.Row="2" />

    <TextBox Grid.Column="2" 
             Grid.Row="2" 
             Margin="2"/>

    <Button Grid.Column="1" 
            Grid.Row="4" 
            Grid.ColumnSpan="2"  
            Content="Load Info." 
            Click="Button_Click" />
</Grid>

 

3. Model 준비

더보기

이전 포스트에서 만들었다면, 생략해도 됩니다.

 

1.

 

 

2.

 

 

3.

 

4. 간단한 테스트 로직 구현

더보기

1.

Person person = new Person { name = "Richard", Age = 20 };

 

 

2. 테스트 준비

 

 

3. data-context

 

데이터 바인딩 개요 - WPF .NET

.NET용 Windows Presentation Foundation의 데이터 바인딩에 대해 알아봅니다. 데이터를 UI 요소에 바인딩하여 동적 앱을 만들 수 있습니다.

learn.microsoft.com

this.DataContext = person;

 

 

4. 버튼을 누르면, person 객체의 속성 값 출력확인

 

5. Data Binding 이해

더보기

1. 예시 실행 구조 확인

❶ 프로그램을 실행하면, ❸ person 객체의 속성값을 UI 에 가져옵니다.

❹ 버튼을 누르면, person 객체의 속성값을 접근해서, ❻ 메시지 박스에 출력하도록 구성합니다. 

❹ UI 버튼 클릭 → ❺ MainWindow 객체 내부의 person 객체의 Age, Name 값 → ❻ UI 메시지 박스

 

 

 

 

2. WPF UI Control 객체 이해

 

 

3. 자료형의 이해

언제나 하는 말이지만, 프로그램은, '데이터'와 '로직' 단, 2가지만 존재합니다.

 

데이터를 다루는 자료형은

"기본 자료형", "복합 자료형", "사용자 정의 자료형(Enum, Struct, Class, Model)"이 있습니다.

 

Person 이라는 객체는, 개발자가 만든 "사용자 정의 자료형" 중, Class 형태(Model)입니다.

Person 이라는 객체는 Age, Name 이라는 속성에 데이터(값)을 가질 수 있습니다.

 

 

4. Data Binding(데이터 바인딩) 용어 이해

>> Data를 묶는다.

>> [ TextBlock 객체의 Text 데이터]와, [ person 객체의 Name, Age 데이터] 를 묶는다.

>> Binding은 속성 데이터(값)과 속성 데이터(값)만 가능합니다.

 

WPF UI 를 구현하는 TextBox, TextBlock, Label 등 수많은 Control 또한 하난의 객체입니다.

TextBlock 이라는 객체는 FontSize, Margin, Text 등 속성에 데이터(값)을 가질 수 있습니다.


Person 이라는 객체는, 개발자가 만든 "사용자 정의 자료형"입니다.

Person 이라는 객체는 Age, Name 이라는 속성에 데이터(값)을 가질 수 있습니다.

 

데이터 바인딩은, TextBlock 객체의 Text 속성값과 person객체의 Name 속성값을 하나처럼 연동시키는 작업입니다.

 

참고) 링크에서와 같이, XAML을 사용한 UI 구현 코드는, C# 소스코드를 다르게 사용하는 방법입니다.

XAML 을 활용한 WPF UI Control 들은 C# 소스코드입니다.

 

 

5. 서로 다른 두 객체의 속성값을 묶는다면?

WPF UI 는 Person 객체의 Age, Name 요소의 값을 1)가져오거나, 2)할당(변경)할 때,

"Data Binding" 이라는 기술을 사용할 수 있습니다.

 

UI에서 입력해서, Person 이라는 객체는 Age, Name 이라는 요소에 값을 할당(변경) 할 수 있고,

비지니스 로직에서 변경된 속성값이 UI에 반영할 수도 있습니니다.

 

 

6. UI는 별개의 동작입니다.

TextBox의 객체와, Person의 객체를 별도의 프로그램처럼 분리시켜 머리속에 그림을 그리고

각각의 속성을 묶는 그림을 상상하여 머리속에 그릴 수 있어야 합니다.

 

UI 에서 동작이, C# 소스코드의 데이터와 어떻게 연동하는지 이해하는 것이

Data Binding 개념 이해의 첫번째 방향입니다.

티스토리툴바