[Blend for Windows] Editing a Groupstyle

어김없이 블랜드로 하는 윈도우 8 디자인을 진행하고 있습니다. 참고로 이 자료들은 Expression Blend 공식 팀블로그에서 게시되고 있는 내용을 제 나름대로 정리해서 올리는 자료입니다. 혹시 영어로 보는게 더 편하다 하시는 분은 해당 동영상을 참고하시기 바랍니다.

 

 

생각해보니까 이 프로젝트에서 실습할 수 있도록 ContosoCookbook예제가 해당 페이지에 올라가 있습니다. 제가 만든게 마음에 안드시는 분이라면 해당 링크(http://code.msdn.microsoft.com/windowsapps/Cookbook-Sample-App-for-22e11395)로 가셔서 다운로드 받으시기 바랍니다. 저는 지금까지 한게 아까워서 계속 제 프로젝트로 진행해보고자 합니다.

 

이번에 해볼 일은 GroupStyle입니다. 원래 Grid App을 생성하면 다음과 같이 나옵니다.

 

 

Group title로 묶여있는 거 전체가 하나의 그룹인 것입니다. 그런데 보다보면 나만의 Group template을 만들고 싶을 수도 있습니다. 모든 사람들이 같은 Grid App으로 생성해서 만들면 뭔가 단조로울 겁니다. 이걸 수정하기 위해서 그룹 스타일을 선택하고 다음과 같이 선택해줍니다.

 

 

지난 포스트의 Item을 수정하는 방법과 거의 동일합니다. 다만 이건 타겟이 GroupStyle인 것이지요. 이름만 지정해주면 다음과 같이 나오게 됩니다.

 

 

지금 보면 Group은 전체가 Border로 쌓여있고 내부에 Header와 ItemControl이 Grid에 쌓여있습니다. 우선 이것들의 위치를 수정하기 위해서는 Grid를 나눠줄 필요가 있겠습니다. 그래야 그안을 또 감싸고 개체를 넣을 수 있겠지요.

 

 

참고로 RowDefinition은 삭제해주세요. 그래야 Grouptitle의 위치를 자유롭게 옮길 수 있습니다. 그러면 지금은 양쪽으로 그룹이 나눠진 것이 됩니다.

자 이제 Grouptitle을 옮겨봅시다. 옮기려면 마우스로 옮기는 것보다 사전에 Column에 대한 Definition이 이뤄졌으니 Layout의 Column을 수정해주면 좋겠지요. HeaderContent를 선택하고 다음과 같이 Properties에서 Layout을 수정해줍시다.

 

 

이러면 앞에 15*로 정의한 column에 들어가게 됩니다. 그 다음은 ItemControl을 선택하고 Column과 ColumnSpan을 각각 1로 수정합시다. 그러면 결과는 다음과 같이 나옵니다.

 

 

title이 한 Column을 차지하고 나머지 아이템들이 밀려났습니다. 이런식으로 Layout을 수정할 수 있습니다. 그런데 Title과 Item이 너무 붙어있는 거 같으니까 ItemContent의 Margin을 조금만 수정해줍니다. 당연히 왼쪽 마진을 늘리면 되겠지요.

 

 

뭔가 여유로워졌습니다.

이번에는 Header에 대한 template을 수정해보도록 하겠습니다. 그런데 이건 좀전에 지나친 메뉴에도 있었습니다. 바로

 

 

똑같이 Edit GroupStyle에 있다는 겁니다. 여기서 headerTemplate만 선택해주면 되는 것이죠. 그러면 해당 Title이 Button의 형식을 띄고 있다는 것을 알게 됩니다.

 

 

그런데 지금 이것도 Button이라는 개체 속성에 묶여 있기 때문에 안의 글자체나 틀을 수정하기 위해서는 또 다음과 같은 과정을 거쳐야 합니다.

 

 

바로 이 button의 Template을 수정해줘야 하는 것이죠. 오늘만 이런식으로 Style을 수정하는 방법이 여러번 나오네요. 아무튼 중요한 개념입니다. 블랜드 자체가 디자인과 개발의 협업을 도모하는 프로그램이기 때문에 둘 중 어느 하나라도 소홀히 할 수 없는 노릇이지요. 우선 위와 같이 하면 딱 가운데 버튼을 구성하는 Text만 출력됩니다.

 

 

보면 Text밑에 두가지가 더 있는데 저거는 해당 애니메이션에 대한 정의라고 보시면 됩니다. 일단은 버튼에 마우스를 올렸을 때 글자색이 바뀌도록 해보겠습니다. 우선은 위의 Project 창에서 State 창으로 넘어가면 다음과 같이 해당 조건에 대한 State를 선언해줄 수 있습니다.

 

 

지금은 딱 4가지 조건(일반적일때 / 눌렀을 때/ 풀었을 때/ 마우스를 올렸을 때) 에 대한 State만 보여주는데 밑에도 3가지 state가 더 있었고, 앞에서 봤던 fucus로 시작하던 개체는 이 State들이 바로 그것들입니다. 아무튼 지금 Normal을 선택하고 창에 붉은 테두리가 들어 있는 것을 확인합니다. 지금 이과정이 바로 아무것도 안했을 때에 대한 초기 단계입니다. 이제 다음 스테이트로 넘어갈때 어떤 애니메이션을 원한다면 해당 state를 누르고 결과값을 입력해주면 되지요.. 저같은 경우는 마우스를 올렸을 대 Text의 색상이 바뀌게 끔 해보고자합니다.

 

그러면 일단은 PointerOver를 선택하고 결과 색상을 선택해주도록 하겠습니다..

 

 

다른 State들에 대한 결과 값도 입력해보세요. 그러면 State에 대한 애니메이션을 설정한 것이 됩니다. 그걸 다했다면 이전 템플릿으로 돌아가서 원래의 itemGridView가 뜨는 object창으로 갑시다.

 

  

위의 버튼 한번만 눌러주시면 됩니다. 그러면 다시 원래의 하늘색 바탕이 나올겁니다. 한번 확인을 해보기 위해서 f5를 눌러봅시다.

 

 

보다시피 아까 적용했던 GroupStyle이 나타나고 추가적으로 state에 대한 효과도 같이 나타나고 있습니다. 그래서 title을 눌렀을 때 색깔이 바뀌게 되는 것이죠.

여기까지가 GroupStyle을 수정하는 방법이었습니다.