[c# wpf] 데이터 바인딩 기초 개념/ 예제 완벽 정리

 

이번 포스팅에서는 텍스트박스에 텍스트를 입력하면 바로 밑에 해당 내용이 그대로 작성되도록 하고 싶습니다.

이때 바인딩을 사용해볼거에요.

 

바인딩이라는 단어 뜻에서 유추할 수 있듯이 바인딩은 서로 묶는 기능을 제공합니다.

 

우리 예시에서는 입력부분인 TextBox와 출력부분인 Label을 함께 묶어, 한쪽에서 변경이 일어나면 그대로 다른 곳에서도 일어나는 효과를 만들어 주었습니다.

 

 

1. Target은 뭐고? Source는 뭐야?

우선 바인딩을 이해하기 위해선 목적지를 나타내는 Target과 출발지를 나타내는 Source , 이 두 가지의 개념에 대해서 항상 염두해 두셔야 합니다.

 

우리 예에서는 출발지를 의미하는 Source는 무엇이고 도착지인 Target은 무엇일까요?

 

당연히 입력을 하는 부분이 Source , 그 입력한 부분이 출력되는 부분이 Target입니다.

 

 

 

 

2. XAML에서 바인딩 구현

1) 기본 레이아웃

//MainWindow.xaml

 

2) 바인딩 구현

기본 레이아웃에 바인딩을 통해 Text와 Label을 연결시켜보겠습니다.

 

 

Label Content 속성 안에 {}로 이루어진 이상하게 생긴 코드가 들어가 있네요.

 

이 코드는 항상 Target 엘리먼트에 위치합니다.

 

앞서 제가 Source와 Target을 구분해드렸죠?

 

다시 말하면 우리의 목적지가 Label Content 속성이기 때문에 그 안에 {Binding ~}을 넣은 것입니다.

 

이어서해당 코드가 구체적으로 무엇을 의미하는지 알아보겠습니다.

 (1) Binding

 

 

Binding은 내가 Binding을 하겠다라고 알려주는 용도입니다.

 

 (2) ElementName

 

 

ElementName은 "Target을 가리키는 Source가 어디냐?" 라고 묻는 겁니다.

 

여기서 Source는 TextBox죠?

 

그런데 TextBox가 많을 경우 문제가 생기기 때문에, 우리는 txt라는 x:Name을 부여하여 정확한 TextBox의 위치를 알려주었습니다.

 

 (3) Path

 

 

앞서 ElementName을 통해 Source가 어떤 엘리먼트인지는 알았습니다.

하지만 그걸론 부족하죠.

엘리먼트의 어떤 속성인지도 정해줘야 합니다. 

 

이때 사용되는것이 Path인데요. TextBox의 Text속성이 우리의 Source이니까 Path에 Text를 기입합니다.

 

이해를 돕기 위해 코드를 조금 비틀어 보겠습니다.

 

Target과 Source의 위치를 반대로 바꿔보면 어떨까요?

 

 

이젠 TextBox가 Target이니까 해당 위치에 {Binding~}가 위치할겁니다. 

 

이전과 차이가 있다면 Path에 Text가 아닌 Content가 들어갔습니다. 

왜냐하면 Label에는 Text라는 속성이 없으니까요.

 

문제는 Label이 Source가 될 경우 사용자가 특정 값을 입력할 수 없는 구조이기 때문에, 이러한 형태는 잘 쓰이지 않는 다는점도 참고하시기 바랍니다.

 

 

3. c# 코드로 바인딩 구현

 

 

기존에 작성했던 binding 구문은 지워주고 code-behind단에서 사용하기 위한 Label의 이름을 추가해줍니다.

 

 1) 바인딩 객체 생성

 

 

xaml에서 작성했던 Binding 객체를 오른쪽과 같이 정의 해줍니다. 

 

 2) Elementname 지정

 

 

xaml에서 ElementName은 Source 엘리먼트를 가리킨다고 말씀드렸죠?

c# 코드에서는 좀더 직관적으로 binding객체의 Source 프러퍼티에 x:Name=txt 를 할당 해줍니다.

 

 3) Path 지정

Source 엘리먼트의 속성을 가리키는 부분은 어떻게 작성할까요?

 

 

new PropertyPath()라는 클래스로 한번 감싼 다음 Text속성을 이용하기위해  TextBox.TextProperty를 인자로 넣어서 객체를 생성합니다. 그리고 그 객체를 binding.Path에 할당 하는것이죠.

 

 4) Source와 Target 연결 시키기

지금까지 작성한 코드는 Source에 대한 것만 적었지 아직 Target은 지정해주지 않았습니다. 

 

드디어 앞서 라벨의 x:Name을 사용할 때가 되었네요.

 

 

해당 Name을 제일 앞에 위치 시키고, SetBinding을 통해 Source와 연결 시켜줍니다.

 

첫번째 인자에는 구체적으로 Label의 어떤 속성을 Target으로 잡을지를 의미하고,

 

 

두번째 인자에는 Source정보가 저장되어있는 binding 객체를 넣어줍니다.

 

+ 보너스 

참고로 Source의 Path부분은 아래와 같이 더 간단하게 축약할 수도 있으니 참고바랍니다.

 

 

이 글과 읽으면 좋은글

• [c# wpf] 데이터바인딩에서 mode 사용법