꽃미남 프로그래머 김포프가 창립한 탑 프로그래머 양성 교육 기관 POCU 아카데미 오픈!
절찬리에 수강생 모집 중!
프로그래밍 언어 입문서가 아닌 프로그래밍 기초 개념 입문서
문과생, 비전공자를 위한 프로그래밍 입문책입니다.
jobGuid 꽃미남 프로그래머 "Pope Kim"님의 이론이나 수학에 치우치지 않고 실무에 곧바로 쓸 수 있는 실용적인 셰이더 프로그래밍 입문서 #겁나친절 jobGuid "1판의내용"에 "새로바뀐북미게임업계분위기"와 "비자관련정보", "1판을 기반으로 북미취업에 성공하신 분들의 생생한 경험담"을 담았습니다.
Posted by zinzza

안녕하세요 zinzza, 연두父, 이경배입니다.

4회입니다. 이번엔 지난번과 동일하게 뷰모델에서 Collection을 선언하고 뷰의 DataGrid와 연결해서 사용하는 방법을 알아보겠습니다.

Collection을 만들면서 모델도 하나 만들어보고요.(거창해보이지만 그냥 클래스입니다)


일단... 프로그래머 분들께서는 이 글의 오류를 찾아 저에게 제출해주시고, 그럴 목적이 아니시라면 읽지 말고 나가주세요.(부끄로아요ㅜㅜ)


  1. Model(Class)을 하나 선언하겠습니다.

  2. 뷰모델에 생성한 Model의 Collection 을 선언합니다.

  3. 뷰에 DataGrid를 하나 올려서 Collection과 연결합니다.

  4. 뷰에 TextBlock 컨트롤을 올려서 선택된 Collection 중 선택된 Data가 어느것인지 표시합니다.

  5. DataGrid에서 수정한 데이타가 Collection에 반영되는것을 확인합니다.


바로 시작합시다!!!!!!!

당연히! 2-2회를 보시고(이젠 안보셔도 되려나?) 기본틀을 준비해 주시기 바랍니다^^;


1. Human Model(Class)을 하나 선언하겠습니다.


드디어? 처음으로 Model을 만드는군요. 근데 사실 Model은 별게 없습니다.

Class죠^^;

가벼운 마음으로


솔루션 탐색기에서 마우스 오른쪽 버튼을 눌러 클래스를 추가해 줍니다.


클래스 이름은 GDFMember.cs 로 하죠.

CgdfMember.cs 처럼 클래스 접두사를 붙이지 않는걸 이상하게? 생각하시는 분들도 있으실껍니다.

저도 처음에 어떻게 해야 하나(제가 다른 언어를 많이 안해봐서요) 고민했는데 저희 회사에서는 특별히 접두사를 붙히지 않습니다.

그저 클래스, 프로퍼티 이름은 대문자로 시작하고, 컬렉션은 s를 붙혀서 복수형으로, bool 타입은 is를 붙히는 정도?(int나 double같은건 아무것도 안붙힙니다.)

그냥 그런가보다 하고 썼는데 C# + VS 는 마우스만 올려도, 커서만 가도 어떤 형태인지 바로 알 수 있기 때문에 접두사를 쓰지 않아도 되는 정도더군요.

단점은 다른 사람들 코드를 볼때 상당히 거슬린다는거-_-?


아무튼 이번 강좌는 제 습관대로 갑니다^^


그 다음 프로퍼티들을 선언합니다. Name, Job, Career 3개만 선언하겠습니다.


) ObservavleObject를 상속받았습니다.


Job과 Career는 접어놨습니다.(공간 아껴보겠다고... 가 아니고 모니터 밑으로 내려가서 캡쳐하기 귀찮아요 -_-;)



2. 뷰모델에 생성한 Model의 Collection 을 선언합니다.


다들 아시리라 보고~~~ MainViewModel에서 GDFMember를 갖고 Collection을 선언하겠습니다.

Collection은 지난번에 설명드렸죠? ㅎㅎㅎ


아~! using System.Collections.ObjectModel; 를 추가해주는걸 잊지 마시고^^;

ObservableCollection에 밑줄가는분들!ㅋㅋㅋ


그리고 Members에 뭔가를 채워줘야겠죠. 놀개영 사이트의 필자분들 프로필을 보고 대충... 


신상정보따위 ㅋ


아! 그 전에 다시 GDFMember에 가서 생성자를 하나 만드는게 편하겠군요!

요딴식으로 ㅋ


그리고 자꾸 왔다갔다 해서 죄송한데^^;

MainViewModel의 생성자로 가서 자료를 추가 해 줍시다.


위 내용은 실제와 다를 수 있습니다.


아~~~~ 다 된거 같네요.

이젠 익숙치 않은 XAML로 갈 차례입니다. ㅜㅜ



3. 뷰에 DataGrid를 하나 올려서 Collection과 연결합니다.


먼저 MainWindow.xaml 을 열고 DataGrid를 하나 올려놓고 사이즈를 적당히 조정합니다..


아... 그리고 DataGrid.Colimns 태그와 DataGridTextColumn 을 넣어줘야 Header가 나오는거~

기억하시죠^^?

이렇게 말이죠^^;


일단 DataGrid 컨트롤을 올렸으니 이제 ViewModel과 연결을 해볼까요?


ㅎㅎㅎ 소스를 보면요.

이렇게~~~~


방법을 설명하자면~

1. 지난번에 해본거처럼 DataGrid 태그 안에 ItemsSource를 Members로 Binding 합니다.

2. 각 Column에 GDFMember의 프로퍼티를 Binding 합니다.


쉽죠~~~?


지난 시간에 설명하기 귀찮아서 이번으로 넘긴 "쩜" 기억하시나요?


기억 안나신다고요? 그럼 이 이미지는요?

아... 이제 기억나시죠^^?



오늘 설명한걸 보면 ItemsSource에 Members를 binding 하고, 각 Column에 GDFMember의 프로퍼티를 하나씩 써줬죠?

하지만 지난번 설명한 예제의 경우 ItemsSource에 Binding 된 Names의 경우 string 의 컬렉션이기 때문에 Column에 Binding해줄 프로퍼티가 없죠.

아니! 정확히 말하면 Column에 Binding 될 프로퍼티? 가 컬렉션 멤버(string) 자체가 되겠죠.

그런 경우 "쩜"을 찍어줍니다^^;


두가지를 같이 설명해야 편할꺼 같아서 뒤로 미뤄뒀던거에요~~~~




4. 뷰에 TextBlock컨트롤을 올려서 선택된 Collection 중 선택된 Data가 어느것인지 표시합니다.


자~~~ 힘드네요.

이제 거의 끝입니다~~


우선 선택된 Data가 뭔지 알아야 하는 거 같으니 MainViewModel에 SelectedMember라는 프로퍼티를 하나 추가해줍니다.



그리고 이건 MainWindow.xaml에서 DataGrid의 SelectedItem에 바인딩해줘야 합니다.



이렇게 하면 선택된 데이타는 자동으로 SelectedMember가 되겠죠.

이제 TextBlock을 추가해서 선택된 데이타가 잘 나오는지만 확인하면 되겠네요^^;


TextBlock은 이왕 하는거 6개를 추가합니다-o-;

많은거 같지만 3개의 프로퍼티를 다 보여주려고 그런겁니다.

근데 왜 3개가 아니고 6개냐구요?

제목 써야죠 제목!


이런식으로 배치해줍니다^^;


그리고 뒤에 3개는 SelectedMember의 프로퍼티를 Bindgin해줘야겠죠?

이런식으로 "." 을 이용할 수도 있습니다. 


자~~~ 이제 F5!!!!!!!!!!!!!!!!!!

실행 해서 선택된 값이 잘 나오는걸 확인합니다! 

...........................................................................................

...

.

.

.

.

.

.

..

.

.

.

.

.

.

.

.

.

..

.

.

.

.


헉!  실행해보니 제가 실수를 했네요.

TextBlock을 올려야 되는데 제가 실수로 TextBox를 올렸습니닼ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 

역시 정신잌ㅋㅋㅋㅋㅋㅋ 자야됰ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

ㅜㅜ


뭐 그레도 실행은 잘 됩니다^^;


자... 저처럼 아이템을 하나 선택하신 뒤 오른쪽에 잘 반영되는지 확인해 보세요^^;


5. DataGrid에서 수정한 데이타가 Collection에 반영되는것을 확인합니다.


이번엔 수정하실게 없습니다.

4에서 다 끝났어요^^


그럼... 이번엔 확인만 해보면 되는거겠죠?


* 셀? 을 하나 선택하신 후 값을 수정해보세요. 그러면 값이 잘 바뀝니다.

이것저것 수정해보세요^^;


이렇게 경력(int 형)에 문자열을 넣으면 자동으로 막아주기도 합니다.^^;



* 저처럼 실수하셨던지, 아니면 저를 따라하셨던지, 혹시 만들어놓고 또 수정하셨던지...

오른쪽에 TextBox를 올리신 분은 오른쪽 선택된 데이타가 표시된 부분에서 수정하시면 DataGrid의 값도 수정되는걸 보실 수 있습니다^^; 

이것이 데이타가 변경된 이벤트를 따로 구현하지 않아도 되는 MVVM의 묘미! 입니다.


자~~ 오늘은 여기까지만 하겠습니다.


다음을 기대!!!!!!!!!






















하지 마세요ㅜㅜ








반응형
,