[Windows 8] Building Data-Bound Metro Style Apps (2)

어제에 이어서 오늘도 지난 프로젝트를 가지고 계속 진행해보고자 합니다. 이번에 삽입할 것은 흔히 매트로 스타일 앱에서 많이 볼 수 있는 GridView입니다. HOL에서는 그냥 StackPanel로 ListView를 감싸서 표현했지만 저는 지난시간에 활용했던 rowDefinition을 응용해서 해보겠습니다. 이번에 할건 가로로 보여지는 것이기에 설정해야 될것이 바로 ColumnDefinition입니다. 비율을 40:60 정도로 주면 적당하지 않을까 생각합니다.

 

 

이렇게 하면 화면상에 매트릭스가 형성됩니다.

 

 

그럼 GridView는 저 매트릭스 중 (1 1)에 해당하는 곳에 삽입해주면 됩니다. 자 ListView 아래쪽에 다음과 같이 작성해줍니다.

 

 

우선은 GridView의 전체적인 패널규격을 지정해줘야 합니다. 지금 위와 같이 설정한건 최대 화면에 뿌려주는 결과를 3x3의 규격으로 보여주겠다는 겁니다. 이제 내부에 들어갈 Item의 Template도 지정해줘야 합니다. ItemsPanel아래에 다음 부분을 추가해줍니다.

 

 

이부분은 앞의 ListView와 동일한 부분이죠. 참 저는 ListView의 가독성을 높이기 위해서 Width와 Height을 수정했습니다. 그래서 제걸 그대로 따라하시면 결과가 조금 이상할겁니다. 그걸 수정하는 건 읽는 분의 판단에 맡기겠습니다. 아무튼 여기까지 하면 대략적인 틀이 완성되었습니다. 이제 할건 코드 구성입니다.

 이렇게 구성을 해봅시다. ListView에서 사진을 선택했을 때 그 이미지에 관한 다른 이미지를 GridView상에서도 보이게 끔 해보겠습니다.  일단 그렇게 하기 위해서는 PhotoList에 대한 이벤트 핸들러를 작성해야 되겠지요.

 

 

이제 ListView에서 선택된 값을 GridView에 보여지게 하기 위해서는 지난 포스팅에서 만들었던 FetchBingPics의 control을 PhotoGrid로 하면 될겁니다.

 

똑같은 작업을 PhotoGrid에 대해서 하나더 생성해줍니다.

 

 

이렇게 받은 이미지를 GridView로 보내주기 위해서는 FetchBingPics로부터 받은 images를 Gridview의 Item으로 넣어줘야 합니다.

 

 

결과를 한번 확인해보겠습니다.

 

 

엇.. 아까 MaximumRowOrColumns를 한 영향이 없네요. 아마 width가 조금 큰 것 같습니다. 이를 수정하고 해보면

 

 

자 이것으로 사진첩이 하나 나왔네요. 여기까지가 Data Binding에 관한 Hands On Lab을 consumer Preview로 바꿔서 언급한 내용이었습니다.