데이타그리드(DataGrid) 샘플데이타 바인딩

회사에서 프로젝트를 하면서 표를 그릴 일이 있었습니다.
화면에 따라 상하 좌우 표의 크기가 늘어나야 했고, DB에서 텍스트정보를 불러와 표 안에 넣어야 하는 작업이었죵,
단 1초의 고민도 없이 그리드(Grid)를 그렸고 열심히 픽셀단위로 나누기 시작했고
가로 세로 선부분에 해당하는 1px을 열심히 확대 축소하며 표를 그렸더랬죠.
여기까지는 좋았습니다.

그!런!데!
두둥, 표를 쉽게 그릴 수 있는 DataGrid라는 컨트롤이 있었던 겁니다 ㅠㅠ힝
애증의 Grid 파일을 지우고 DataGrid를 이용해 쉽게 표를 표현할 수 있었고,
샘플데이타도 쏙 들어가 너무 쉽고 좋은 컨트롤 이였습니다.

서두가 길었지만, ㅋㅋㅋ
결론은 표를 그릴 때 쓰는 데이타그리드(DataGrid)를 소개하고, 샘플데이타를 바인딩을 해보겠습니다!



1. 데이타그리드(DataGrid) 꺼내오기

블렌드에서 제공하는 데이타그리드(DataGrid)을 꺼냅니다.
찾기 힘들면 검색창에 DataGrid라고 치면 바로 뜨네요!


2. 내가 바로 데이타그리드

데이타그리드(DataGrid)를 화면에 끌어다 놓으니 데이타그리드(DataGrid)의 레이어가 생성되었습니다.
그런데 컨트롤을 화면에 끌어다 넣었는데 아무것도 나타나지 않습니다.
이거 왜 안나오니!!!라고 생각하시겠죠?ㅋㅋ
어떤 값도 주어지지 않아서 아무것도 표현하지 못하고 있는 상태입니다.
그.래.서.
우리는 블렌드에서 제공하는 샘플데이타(임시로 만들어서 넣어보는 데이타랍니당.)를 바인딩(=넣어서)해서
표에 값이 들어가면 블렌드에서 표현된 데이타그리드(DataGrid)의 디자인을 변경할 수 있게 됩니당.


3. 데이타그리드(DataGrid)에 샘플데이타를 넣자!

오른쪽 상단에 있는 ①데이타탭을 누르고 ②버튼을 누릅니다. 그러면 팝업창이 뜨는데요,
③새 예제 데이터 정의를 눌러 샘플데이터용 폴더를 하나 만들게 됩니다!

샘플데이타용 폴더 이름을 지정하고 확인을 누릅니다.

그러면 내가 지정한 폴더 이름인 SampleDataSource라는 폴더 안에
Collection 폴더가 생기고
그 밑에는 property1, property2가 생깁니다.

property1, property2 -> 이 부분의 텍스트가 데이타그리드(DataGrid) 머리(표의 그룹상단 -> 표의 제일 위!)가 됩니다.
저는 property1, property2를 더블클릭 해-> Header1, Header2로 이름을 수정해주었어요.

그리고 Header1, Header2 오른쪽에 ABC라고 적힌 작은 아이콘이 있는데
샘플데이터를 만들 때 문자인지 숫자인지 체크박스인지 이미지인지를 세팅할 수가 있습니다.
저는  Header1, Header2 의 세팅값을 모두 문자열로 했어요.

이렇게  Header1, Header2 의 문자값이 어떤 모습으로 들어가 있는지 한번 볼까요?
Collection의 오른쪽에 예제값 편집이라는 버튼을 클릭해보아요!
그러면

내가 지정한  Header1, Header2 의 머리를 가진 표가 나타납니다.
① 하단의 레코드 수를 설정해 데이타그리드(DataGrid)의 표의 상하로 쌓아지는 갯수를 설정합니다.
② 를 더블클릭하면 텍스트를 수정할 수 있게 되어 있습니다. 각자 원하는 텍스트를 집어 넣으면 됩니다.
③ 확인버튼을 클릭!!

이렇게 열심히 만든 샘플데이타를  데이타그리드(DataGrid)에 바인딩해(넣어) 봅시다!
꼭★ Collection의 폴더를 잡아서 데이타그리드(DataGrid)안쪽으로 드래그 해서 넣으면!!!!!


4. 데이타그리드(DataGrid)에 샘플데이타를 넣기 완료!

내가 넣은 표머리와 설정한 텍스트가 갯수만큼 들어가서 표가 완성됩니다!!!

이렇게 넣은 샘플데이타를 넣어 보면
텍스트가 차지하는 영역을 미리볼 수가 있고, 디자인 스타일을 입히는데 편리합니다 :-)