MVVM 사용할려면 알아야지

Data Binding(데이터 바인딩) 

바인딩 → 서로 묶는 기능을 제공한다.

 

* 쉽게 말해 입력부분TextBox와 출력부분인 Label을 함께 묶어, 한쪽에서 변경이 일어나면 그대로 다른 곳에서도 일어나는 효과를 만들어 준다.

 

Target? Source?

• Target -> 목적지 (출력되는 부분)
• Source -> 출발지 (입력하는 부분)

 

•  바인딩을 통해 Text와 Label연결

 

• 목적지가 Label Content 속성이기 때문에 그 안에 {Binding ~ }을 넣은 것이다.
• ElementName은 Target을 가리키는 소스가 어디냐 라고 묻는것이다.
• TextBox가 많을 경우 제가 생기기 때문에,  txt라는 x:Name을 부여하여 정확한 TextBox위치를 알려준다.

 

• 데이터 바인딩 출처

https://yeko90.tistory.com/entry/c-wpf-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EB%B0%94%EC%9D%B8%EB%94%A9-%EA%B8%B0%EC%B4%88-%EA%B0%9C%EB%85%90

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

 

Data Context

UI Control인 Source 태그와  Target태그를 서로 연결해주는 식

 

*UI Control이 아닌 직접 만든 클래스 객체정보를  xaml태그에서 출력되고록 하고 싶을때 DataContext를 이용한다.

 

DataContext는 일반적으로 ViewModel 또는 데이터 객체를 참조하는데 사용된다.

*ViewModel은 UI와 데이터간의 중간 계층으로 작동하며, 데이터를 캡슐화하고 UI에 필요한 데이터를 제공한다.

Person이라는 클래스에 kevin이라는 값을 가진 Porperty가 지정되어 있다. -> Label엘리먼트 Content 속성에 해당 Name을 출력하고자 한다.

 

1 ) Label과 클래스(Person)과 바인딩(연결)

 

behind-Code에 앞서만든 클래스의 객체를 생성한다.

그 후 해당 객체를 아래와 같은 방식으로 DataContext 에 할당 시킨다.

* 여기서 만약 label의  x:Name을 label2라고 한다면 behind-Code에서도 label2.DataContext = p;이렇게 입력해야한다.

 

2) Label속성값과 클래스 속성값 연결하기

Label 속성 값과 클래스(Person클래스)와 Target(Label태그) 를 연결을 한 작업이 1번 작업이다.

 

다음 2번 작업에서는  Source의 어떤 속성값과 .Target의 어떤 속성값을 연결시킬지 정해야한다.

 

xaml에 아래와 같이 추가해준다.

해당 코드를 작성하면 Label 의 Content의 부분과 Source(클래스)의 Name속성이 연결된다.

 

3)xaml에 DataContext 연결시키기 

앞 예제는 C# 코드로 클래스와 DataContext를 연결시켰다면, 이번엔 C#코드를 지우고 xaml상에서 연결시키는 방법이다.

 

 

먼저 <Window.DateContext> 태그로 감싼다음 <local:우리가 만든 클래스 이름/> 그안에 넣어주는 형태로 작성해주면 된다.

 

this.DataContext란? 

 

지금까지는 특정 엘리먼트를 대상으로 DataContext를 사용해보았다.

Window전체 대상으로 바인딩도 가능하다.

 

여기서 this는 MainWindow를 가리킨다.

 

• DataContext출처

https://yeko90.tistory.com/entry/c-wpf-DataContext%EB%9E%80-%EC%99%9C

[c# wpf] DataContext란? 왜 쓰는 것일까?