무효 클릭 IP 추적 중...
c#/wpf

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

꼬예 2022. 5. 31.

 

(해당포스팅은 데이터바인딩 포스팅을 읽고 왔다라는 전제로 작성되었습니다.)

 

지금까지는 바인딩을 할때 아래와 같은 방식으로,

 

 

UI ControlSource 태그와 Target태그를 서로 연결 해주는 식이었습니다.

 

그런데 지금부터 우리가 하고 싶은건, UI Control이 아닌 우리가 직접 만든 클래스 객체 정보xaml태그에서 출력 되도록 하고 싶습니다.

 

이때 사용하는 것이 DataContext입니다.

 

이해를 돕기 위해 예를 들어보겠습니다.

 

1. DataContext 사용 예제

우리가 만든 Person이라는 클래스가 있습니다. 그리고 멤버변수로 "kevin"이라는 값을 가진 Name 프러퍼티가 지정되어있네요.

 

 

여기서 우리가 원하는건 xaml에서 Label 엘리먼트 Content 속성에 해당 Name을 출력하고 싶습니다. 

 

 

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

우선 Code-behind단(MainWindow.xaml.cs) 에서 앞서 만든 클래스의 객체를 생성 합니다.

 

 

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

 

 

이때 주의 깊게 보실점은 .DataContext앞에 label인데요 이 값은 앞서 xaml에서 지정했던 x:Name명입니다.

 

 

만약 x:Name을 label2라고 한다면 code-behind단에서도 label2.DataContext = p;이렇게 적어 줘야 겠지요?

 

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

지금까지 한작업은 Source(Person클래스)Target(Label태그)를 연결을 한것입니다.

 

다음 작업으로는 Source의 어떤 속성값Target의 어떤 속성값을 연결시킬지 정해야합니다.

 

먼저 xaml에서 아래 코드를 추가해줍니다.

 

 

이 코드를 적어줌으로써 Label의 Content부분Source(Person 클래스)의 Name속성이 연결됩니다.

 

참고로 우리에게 익숙한 기존 바인딩은 ElementName을 사용했습니다.

 

 

하지만 DataContext에서는 Code-behind단에서 이미 연결 시켰으니 적을 필요가 없는 것입니다.

 

 

Output :

 

 

윈도우를 실행시켜보면 정상적으로 출력이 되는걸 확인할 수 있습니다.

 

3) xaml에서 DataContext 연결 시키기

앞 예제에서는 c# 코드우리가 만든 클래스DataContext를 연결 시켰다면,

이번에는 c# 코드는 지우고, xaml상에서 연결 시키는 방법입니다.

 

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

 

참고로  줄이 그어지면서 에러가난다면 솔루션 다시 빌드를 해주시면 해결 되실겁니다.

 

+ 보너스

이외 다른 방법으로 DataContext 연결시키는 법은 해당 포스팅을 참조하기바랍니다.

2.this.DataContext 란?

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

그런데 아래와 같이 this를 통해 Window 전체를 대상으로 바인딩도 가능합니다.

 

 

여기서 thisMainWindow를 가리킵니다. 사실 엄밀히 말하면 MainWindow는 껍데기이고 Window를 상속받은 형태이니까 Window객체라고 보는게 더 정확합니다. 

 

그리고 그 값에 this(Window)를 할당시킵니다.

이게 무슨말일까요?

 

xaml 윈도우 태그 전체를 대상으로 Window 엘리먼트 속성값을 쓰겠다라는 의미입니다.

 

사용 예제

윈도우 전체를 타겟으로 하기 때문에 {Binding 속성명}을 어느곳에서든 자유롭게 사용할 수 있습니다..

 

 

우리 예시에서는 Window의 속성값 중 하나인 WidthTextBox에 출력하는 예제를 만들어 보았습니다.

 

 

그리고 윈도우를 실행시켜보겠습니다.

 

Output:

 

 

Width값으로 우리가 최초로 설정한 디폴트값이 출력되는걸 알 수 있습니다.

 

 

그리고 윈도우 크기를 한번 조절해보겠습니다.

 

 

DataContext를 통해 바인딩 시켰기 때문에 실시간으로 값이 변경됩니다.

 

 

 

이 글과 읽으면 좋은글

  • 트위터 공유하기
  • 페이스북 공유하기
  • 카카오톡 공유하기
이 컨텐츠가 마음에 드셨다면 커피 한잔(후원) ☕

댓글