WPF로 툴 만들기. MVVM은 부록! #3 (Collection 활용해보기 1)

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

3회입니다. 이번엔 뷰모델에서 Collection을 선언하고 뷰와 연결해서 사용하는 방법을 알아보겠습니다.

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

여기서 Collections라고 써있는놈을 한번 사용해본다는거죠 ^^;

이번에 해야 할 일을 먼저 나열해보겠습니다.

1. 뷰모델에 Collection하나를 선언합니다.

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

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

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

5. 뷰에 TextBlock을 하나 올리고 Collection 중 선택된 Data가 어느것인지 표시해봅니다.

우선 2-2회를 보시고 기본틀을 준비해 주시기 바랍니다^^;

준비 되셨나요?

순서대로 갑시다!

1. 뷰모델에 Collection 하나를 선언합니다.

MainViewModel.cs 를 열어서 선언합시다!

지난 2-2 에 있던 코드조각을 사용하면 편리합니다.  그냥 타이핑하시는것도 좋고요^^;

Collection 이름은 Names라고 했습니다. 저는 주로 뒤에 s를 붙혀서 복수형으로 표시합니다.

어라? 근데 ObservableCollection에 밑줄이 가있죠?

맨 위로 올라가셔서 

using System.Collections.ObjectModel;

을 추가해주시면 사라질껍니다.

그나저나... Names를 활용하려는데 아무것도 없는 빈 Collection이니... Names에 뭔가를 넣어놔야겠죠?

실제 프로그램에서야 이런저런 경로로 Item들을 넣겠지만 지금은 그냥 생성자에서 넣어보겠습니다.

이렇게요^^;

코드는 따로 설명 안드려도 될만큼 쉽습니다.

그럼 Collection 선언이 끝났으니 뷰로 가볼까요?

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

MainWindow.Xaml 파일을 열고 도구상자에서 ComboBox를 더블클릭해서 ComboBox를 추가합니다.

그리고 Xaml코드를 보시면 Combobox를 찾으실 수 있을텐데요 그 맨 뒤쪽에 

 ItemsSource="{Binding Names}" 

를 추가해 주세요.

이렇게요.

ComboBox, ListBox, DataGrid 등의 컨트롤에는 ItemsSource라는 속성이 있습니다.

Collection은 바로 ItemsSource에 연결(Binding)하는 Property의 일종이라고 생각하시면 됩니다.

ItemsSource가 없는 컨트롤은요??? 당연히 연결 안됩니다^^;

자~~~ 이제 실행! 

이렇게 잘 연결된걸 보실 수 있습니다.

3. 이번엔 ListBox를 올려볼 순서네요.

이번에도 간단하게 도구상자에서 ListBox를 더블클릭! 후 마우스를 이용해 대~충 위치를 잡아보시고요^^;

이렇게~

Xaml코드에서 ListBox에 마찬가지로 

 ItemsSource="{Binding Names}" 

를 추가해 주세요.

끗~! 

그리고 실행해서 한번 보시죠^^;

아~ 이뿌다~~~ 잘했어요~~~

4. 자~이번엔 자신감 완충해서 DataGrid ~GOGO~!

똑같은걸 3번 하려니 짜증도 나시죠?

도구상자에서 이렇게 DataGrid추가해 주시고~~~

누가 안시켜도 이렇게 DataGrid Tag 찾아서 ItemsSource 딱! 추가해주시고~

GOGO! F5!!!!!

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

자... 뭐가 문제인가.

문재인이 문제인가.....................아 이건아닌데-_-

ㅎ 너무 좌절하실건 없고요, DataGrid의 사용법이 잘못된 문제입니다. 

우리가 알고 있는 DataGrid는 맨 위에 회색줄로 Data 이름이 써있잖아요? 뭐 그런것도 입력해줘야 하고... 등등 아무튼!

사용법을 좀 보시죠.

수정한 xaml 입니다.

빨간색 사각형 부분이 전부 바뀐겁니다.

우선 /> 가 >로 바뀌었습니다.

그리고 마지막줄에 </DataGrid>가 들어갔죠.

이건 xaml의 기초에 해당하는 부분인데요(html을 조금 보신분들은 이해하실겁니다.) <DataGrid> 가 한줄에 모든걸 다 표현할 수 있으면 /> 로 끝났다는걸 표시하는거고, 지금처럼 추가해야 하는 속성이 많거나 하위속성이 있다면 </DataGrid>로 끝을 표시합니다.

음... 별거 아닌데 설명이 길어지니 이정도로만 하고 넘어가겠습니다.(부끄러워서 글씨가 작아지네요 ㅜㅜ)

아무튼!!!

그리고 <DataGrid.Columns>와 </DataGrid.Columns> 사이에

<DataGridTextColumn Header="이름"   Binding="{Binding .}"/>

가 추가되어있는거죠.

이 DataGrid의 칼럼을 정의하는겁니다.

우리는 이름밖에 없으니 이름 한줄이 들어가있는거고요.

칼럼에는 DataGridTextColumn 외에도 

DataGridHyperlinkColumn - URI 데이터를 표시하는 데 사용합니다.

DataGridComboBoxColumn - 열거형 데이터를 표시하는 데 사용합니다.

DataGridTextColumn - 텍스트를 표시하는 데 사용합니다.

DataGridCheckBoxColumn - 부울 데이터를 표시하는 데 사용합니다.

등의 칼럼을 사용할 수 있습니다.

출처: MSDN

Header는 설명 안드려도 대충 눈치채셨을거라 믿습니다^^;

Binding="{Binding .}" 

을 설명드려야겠네요.

"Binding = 연결" 이라고 몇번 보셨더니 아시겠죠?

자 연결을 하는데... 이전엔 Property이름이나 Collection이름을 적었는데 왠 쩜??!? 

점-_-??

아............ 이건 다음회에 설명드려야 겠네요.

다음에 하려고 계획한걸 먼저 하면 이해가 쉬울꺼 같아서요.

강좌 마지막에 민소희가 나오더니... 드라마같은 찝찝한 마무리가 되겠군요.

왜 너는 나를 만나서~~

아 아무튼 실행을 해보시면 

좀 찝찝하지만 성공~

5. 그러면 마지막! 선택된 데이타를 TextBlock에 표시해보죠,

뷰에 TextBlock추가!(이건 쉽죠? 화면캡쳐도 뺄께요 ㅎ)

그다음 ViewModel에 SelectedName이라는 Property를 하나 추가해줍니다.

선택된 데이타가 뭔지를 저장하려고 만든 Property입니다.

그럼 이 SelectedName을 뷰와 연결해보겠습니다.

TextBlock의 Text 속성을 Text="{Binding SelectedName}" 으로 수정해줍니다.

각 컨트롤(ComboBox, ListBox, DataGrid)에 SelectedItem="{Binding SelectedName}" 을 추가해줍니다.

어어 힘들다~~

자~~ 이제 실행~~~ F5 해보시면 마지막 결과물을 보실 수 있습니다.

특정 이름을 선택하면 TextBlock에 선택된 이름이 나올뿐 아니라 다른 컨트롤의 선택된 아이템도 같이 변경되는 모습을 보실 수 있습니다.

아.............. 연두를 재워놓고 열심히 써봤는데... 지금 1시 25분이네요.

오류고 뭐고 이제 올려놓고 자야겠습니다 ㅜㅜ

놀게영(http://gamedevforever.com)에 글 올려주시는 필자님들 너무 수고가 많으세요.

글 하나 올리기 이렇게 힘든데 ㅜㅜ

아무튼 오늘도 

달땡님... 소고기가 필요해요~