[Blend for Windows] Editing an ItemTemplate

 

 

지난 포스트에 이어서 Blend for Windows에서 ItemTemplate을 수정하는 방법을 다뤄봅시다. 위에처럼 ContosoCookbook이 있으면 좋겠지만 시간적인 여유가 없는 분은 지난 시간에 했던 프로젝트를 그대로 써봅시다. 저도 그대로 따라가보고자 합니다.

 

 

우리가 하고 있던건 Grid App 프로젝트를 생성하면 자동으로 만들어지는 템플릿을 사용해서 자기 마음대로 수정하고 있던 것이었습니다. 일단 지금 열린 페이지는 GroupedItemPage.xaml에 들어 있습니다. 그런데 뭔가 Item을 담는 네모가 너무 투박하고 크기를 자기 마음대로 수정하고 있습니다. 하지만 Object창에서 개체를 다 열어봐도 Item을 선택할 수 없습니다.

 

 

여기서 item들이 담겨있는 itemGridView를 건드려야 해당 item의 모양을 수정할 수 있습니다. 다음과 같은 방법을 취해봅시다.

 

 

마우스 우클릭을 통해서 Edit Additional Template을 고르면 여기안에 ItemTemplate을 수정할 수 있는 항목이 있습니다. 이중 바로 수정하는 것인 Edit Current를 선택하면 다음과 같이 뜹니다.

 

 

사실 유심히 보신분은 아시겠지만 이런 ItemTemplate의 크기나 모양에 대한 정의는 project창에서 확인할 수 있듯 StandardStyle.xaml에 되어 있습니다. 물론 이 건 블랜드에서만 있는게 아니라 Windows 8 store style로 프로젝트를 생성하면 항상 item에 대한 속성이 StandardStyle.xaml에 정의되게 됩니다. xaml로도 분해해보면 위에 포함된 개체가 모두 표현됩니다.

 

 

그러고 보니까 위의 Item은 250x250으로 선언된 Item이고 내부에 Title과 Subtitle로 된 Textblock이 있는 것을 확인할 수 있습니다. 그런데 일단은 위와 같이 StandardStyle.xaml을 수정하는 방안이 아니라 이 ItemGridView에서만 쓸 수 있는 특정한 템플릿을 만들고자 합니다. 아래와 같이 진행하고 이름을 RecipeTemplate이라고 해봅시다.

 

그러면 화면이 바뀌지 않은 상태에서 드디어 Item만 선택할 수 있게 됩니다. 한번 사이즈를 조정해볼까요?

 

보다시피 하나의 Item을 수정하면 전체적인 Item배치가 달라집니다. 즉 결론적으로 한가지 Item에 대해서 정의만 한다면 나머지도 그 속성을 따라간다는 말이지요. 우선 나중에 뭔가를 넣어보기로 하고 우선 ItemTemplate의 Grid를 선택하고 공간을 나눕니다.

 

 

이게 이전에도 나왔던 RowDefinition이겠지요. 이제 여기에 맞게 여러가지를 바꿔보고자 합니다. 우선은 맨 밑에 있는 SubTitle을 지금 있는 StackPanel에서 한단계 위에 있는 Grid의 최상단으로 옮기도록 합시다. 그러면 밑의 StackPanel의 크기가 작아지면서 안보이게 됩니다.

 

 

그런데 지금 잔상으로도 남아 있다시피 옮긴 TextBlock은 Grid의 2번째 Row에 있습니다. 이걸 수정하려면 Properties의 Row값을 0으로 바꿔주면 됩니다.

 

 

다음은 Border를 선택해서 Row를 1로, RowSpan도 1로 바꿔줍니다. 그러면 거기에 맞춰서 이미지들이 내려가게 됩니다.

 

 

아마 Title이 들어있는 StackPanel은 정상적으로 되어 있을겁니다. 자그럼 중간중간에 여백이 있는데 이건 지금 Grid의 RowDefinition이 정해져있기 때문입니다. 자동으로 맞춰주기 위해서는 다음과 같이 Auto로 맞춰주면 됩니다.

 

 

여기서 Star는 일정 Scale을 곱한 비례 값이고 Pixel은 그냥 말 그대로 pixel 단위입니다. 우리는 자동으로 맞춰주는 거니까 Auto로 해주면 됩니다. 똑같이 위쪽 Grid.Row도 Auto로 맞춰주세요. 그러면 다음과 같이 됩니다.

 

 

아까까지만 해도 안보이던 SubTitle이 이제 나타나기 시작합니다. 그런데 너무 SubTitle이 차지하는 영역이 크다고 생각하시면 해당 Layout을 Reset하면 됩니다.

 

 

그러면 큰 여백이 아래와 같이

 

 

확 줄어버립니다. 지금은 이미지가 아니라서 효과가 안나타나겠지만 이미지가 커져서 subTitle을 넘어서는 것을 막기 위해서 textBlock을 border로 감쌉니다.

 

 

그다음 위에서 했던 것처럼 Layout을 모두 Reset을 하면 이미지들이 정상적으로 나타나게 됩니다. 지금은 TextBlock이라서 안나타납니다.

그런데 이렇게 하고 보니까 Subtitle이 Image와 너무 붙어있는 것 같습니다. 조금만 Margin을 준다면 조금 떨어져보이겠지요. 지금은 Layout을 Reset한 상태이기 때문에 좌우 이동이 안됩니다. 아무튼 Margin을 상하로 10정도 주면 다음과 같이 나옵니다.

 

 

뭐 Border의 BackGround색에다가 자신이 원하는 색상을 집어넣어주면 됩니다. 저는 조금 응용해서 지난번에 사용했던 이미지를 넣어봤습니다.

 

 

조금 어색하기는 하지만 예시니까 어쩔 수 없네요.

 

앞에서 언급한 것처럼 전체 Item에 다 적용된 것을 확인할 수 있습니다. 예제에 있는 내용에는 더 있긴 하지만 아직 Databinding이 들어가지 않았기 때문에 그 부분은 생략하겠습니다.