[Expression Blend] Organizing_Your_Blend_Project_using_Layout_Containers

 

자 오랜만에 다시 블로그를 시작합니다. 이번시간에 다룬 내용은 Expression Blend를 이용해서 Layout Container를 사용하는 겁니다.

 Layout이라는 개념은 매우 중요합니다. 사람이 프로그램을 실행하면 가장 처음으로 접하는 것이 메뉴 UI와 그 바닥에 깔려있는 Layout이 되겠지요. 그래서 디자이너가 이런 개발을 함에 있어서도 중요한 역할을 차지하는 것이지요. 우선은 지난시간에 만든 Panel이 필요하는데 이는 첨부해드리겠습니다.

 

SL02SP1EN010_Organizing_Your_Blend_Project_using_Layout_Con.zip

 

첨부된 파일중 폴더에 있는 Solution을 Expression Blend를 통해서 열면 다음과 같은 창이 뜨게 됩니다.

 

 

여기다가 이제 Layout을 구성하고자 합니다. 참고로 디자인을 하기 위해서는 전체 윈도우를 Design으로 해주는 것이 좋겠지요. 지난 시간에도 언급했지만 이 항목은 Window-WorkSpace에서 찾을 수 있습니다.

 

 

지금 LayoutRoot에 Rectangle이 하나 달랑 삽입되어 있는데 이안에 지난 시간에 만든 logo와 비슷한 Video player를 넣고자 합니다. 그전에 그런 요소를 넣기 위해서는 이 포스트의 주제이기도 한 Layout Container가 삽입되어야 합니다. 왼쪽 툴바중 다음 항목을 마우스로 꾹 누르면 5개의 항목이 나열됩니다. 이게 바로 Layout container입니다.

 

 

기본 Default는 Grid로 되어 있는건데 한번 Canvas를 설정하고 집어넣도록 하겠습니다.

 

 

자 이렇게 삽입하면 옆의 Object and Timeline에서도 LayoutRoot 하단에 Canvas가 깔리는 것을 확인할 수 있습니다. 이 Canvas설정은 우측의 Properties에서도 바꿀 수 있습니다. 한번 Width와 Height도 바꿔보세요. 저는 예제에서 주어진 대로 400x325로 바꿨습니다. 참고로 당연히 Canvas가 선택된 상태이어야 겠지요.

 이상태에서 만들어진 Canvas안에 Rectangle을 하나 삽입합니다. 미리 그릴 판을 지정한다랄까요? 만들어둔 Canvas가 가득차게끔 Rectangle을 만듭니다. 물론 블랜드의 특성상 선택된 개체의 색상을 마음대로 수정할 수 있습니다.

 

 

역시 Object and timeline을 보시면 Rectangle이 하위개념으로 들어간 것을 볼 수 있습니다. 코너에 곡률을 주는 것도 가능합니다. 지난 시간에 했었지요. 가장자리에 아이콘 두개가 배치되어 있는데 그 아이콘을 선택하면 다음과 같이 변합니다.

 

 

저 아이콘이 생겼을 때 마우스를 누르면서 드래그하면 위와 같이 곡률이 형성됩니다.

 이번에 또 만든 Rectangle안에 Canvas를 삽입합니다. 아까와 같은 방법으로 다음과 같이 생성합니다.

 

 

뭔가 벌써 만들어진듯한 느낌이네요. 당연한 결과겠지만 지금 생성한 Canvas는 아까 생성한 Canvas의 하위 개념으로 삽입되게 됩니다. 이 Canvas의 색상을 검정색으로 바꾸는 것 역시 Properties에서 해줍니다. 바로 background 항목을 조절해주면 되지요.

 

 

이제 이렇게 함으로써 지금의 Panel은 두개의 Canvas를 가지게 되었습니다. 각각의 Canvas는 하위의 Child를 가질 수도 있고 그안에 item을 삽입함으로써 그룹처럼 사용할 수 있습니다. 이 Canvas 내에 삽입한 item들은 그 위치가 fixed된다는 특징을 가집니다. 그전에 미리 지정한 Canvas의 크기에 따라서 말이지요. 물론 Canvas 크기를 조절하면 그에 따라서 다시 배치됩니다.

 이제 버튼을 배치하는게 좋겠지요 이를 위해서는 또 Layout Container를 하나 삽입해야 되는데 이번에는 StackPanel을 삽입합니다. 역시 앞의 canvas를 삽입하는 것과 마찬가지로 좌측의 Tool에서 선택해서 원하는 크기만큼 지정해주면 됩니다.

 

 

역시 다음과 같이 Canvas의 하위로 들어가게 됩니다. 앞에서 말씀드린 것처럼 이런 Container에는 많은 개체를 삽입할 수 있습니다. 일단 버튼을 삽입해야 되겠지요? 좌측에 있습니다.

 

 

그런데 뭔가 좀 이상합니다. 버튼을 두개 이상 삽입해야 되는데 처음건 잘 삽입되는데 비해서 두번째 건 원하는 위치가 아니라 그 밑에 생성됩니다. 이는 바로 StackPanel의 Orientation이 고정되어 있기 때문입니다. 지금과 같은 경우는 Orientation이 Vertical로 되어 있는 겁니다. 이설정은 다른 요소와 마찬가지로 Properties에서 수정할 수 있습니다.

 

 

StackPanel을 선택한 상태에서 Layout을 보면 Orientation이 있습니다. 이를 Horizontal로 바꾸시면 짠!

 

 

이제부턴 가로로 배열되게 됩니다. 여기서 볼 수 있듯이 StackPanel은 내부 개체들의 속성을 한번에 변경시킬 수 있다는 특징이 있습니다. 그래서 일일이 고칠 필요없이 StackPanel에서 Layout만 수정하면 아이콘의 배치가 다같이 수정됩니다. 잘쓰면 좋은 툴이지요. 일단은 버튼 3개를 삽입하고 각각 Play Stop Rewind로 수정합니다. 이름 수정은 Properties의 CommonProperties의 Content를 수정하면 됩니다.

 

 

 

자 이제는 버튼이 가로로 깔끔하게 나타납니다. 그런데 재미있는건 이 배치가 고정이 아니라는 겁니다. 한번 Stop 버튼을 선택한 후 Properties의 Appearance의 Visibility를 Collapse로 수정합니다. 어떻게 될까요?

 

 

어 가만히 있어야 할 Rewind가 옆으로 들어왔습니다. 이는 StackPanel에선 개체의 위치를 동적으로 지정해준다는 것을 의미합니다. 개체의 갯수를 파악해서 차례대로 배열해준다는 의미지요.

 

이제 전반적인 배치가 끝났습니다. 그런데 아까 맨처음에 만든 Canvas 속성을 다른 속성으로 바꿀 수 있습니다.

 

 

맨처음 Canvas를 선택한 후 마우스 우클릭을 통해서 보면 Change Layout Type가 있습니다. 여기서 Grid로 바꿔봅니다.

 이제 이것은 Grid라는 하나의 틀안에 담겼습니다. 이 grid는 사용자가 어떤 모양을 지정하던 위치를 자동으로 지정해주는 특징을 가지고 있습니다. 가령 크기를 늘리고 줄여도 기존의 개체가 거기에 맞춰서 수정이 된다는 것이지요.

 

 

앞의 것과 같은 것임에도 크기가 작아지면서 전체적인 배치가 그대로 유지된 것을 확인할 수 있습니다.

이 Grid의 장점은 바로 테두리에 가이드 라인을 선택할 수 있다는 겁니다. 뭔가 테두리에 두꺼운 선이 있는 것이 바로 Grid로 둘러싸져 있다는 겁니다. 거기에 마우스로 갔다 대면 주황색 선이 생깁니다. 그게 바로 가이드 라인 입니다. 가로 세로로 지정할 수 있겠지요.

 

그럼 디자이너는 여기에 맞춰서 아이콘들을 배치하면 됩니다. 그런데 이게 그 가이드라인의 역할만 하는 것이 아닙니다. 가장 중요한 역할인 행과 열을 구분하는 기능이 됩니다. Grid의 좌측 젤 위에 보면 표가 하나 있습니다. 이표!

 

 

보통 WPF 해보신 분은 아시겠지만 Grid의 Column과 Row를 지정할 수 있지요. 여기서는 이게 그 역할을 합니다. 이 상태라면 갑자기 각 칸에 자물쇠가 생성되게 됩니다. 여기서 Video의 Viewport를 고정하려면 그 화면에 해당하는 칸의 자물쇠를 채워주면 되지요.

 

 

자 이렇게 고정된 상태는 전체 Grid의 크기가 바뀌어도 그대로 유지됩니다.

 

 

좀 느껴지시나요? 해당칸의 크기는 고정된 채로 나머지 칸들이 확장되는 걸 볼 수 있습니다.

 

---------------------------------------------------------------------------------------------------------------

자 이제 Expression Design에서 작업한 결과물을 가져오려고 합니다. 첨부 파일에 보면 Design용 파일이 있습니다. 열어보면 다음과 같이 있습니다.

 

여기서 로고만 따오려고 하는데 이때는 로고만 선택하고 복사하면 됩니다. 단 그냥 복사가 아니라 xaml형태로 복사해야 되는데 해당 로고를 선택한 상태에서 다음 메뉴를 골라주면 됩니다.

 

 

Expression Blend의 특징은 바로 디자인으로 만들어낸 자료를 코드로 바꿔준다는 겁니다. 거기에 쓰이는 기술중 하나가 바로 WPF라는 것인데 그 기반에는 xaml이라는 언어가 있습니다. 당연히 앞에서 만든 VideoPlayer역시 xaml로 구성되있는 겁니다. 그건 다음칸에서 확인할 수 있지요.

 

 

위에 그린 그림이 모드 xaml이란 언어로 구현되어 있습니다. 따라서 아까와 같은 로고도 역시 xaml형태로 복사해와야 합니다. 그래서 붙여넣기를 하면.... 안되네요...

 

그래서 찾아본 답안이 이거네요.

CUTTING AND PASTING INTO EXPRESSION BLEND

Before you can accurately copy and paste from Design to Blend there is an option that you will need to change.

1.   Select Edit > Options > Clipboard (XAML). The Options dialog box appears.

2.   From the Clipboard format drop-down menu select XAML Silverlight Canvas.

 

<Image not included>

Change your Options to copy Design content more accurately.

3.   Select the object(s) that you wish to place in Blend and then choose Edit > Copy XAML, or use the keyboard shortcut Ctrl+Shift+Z.

4.   When in Blend choose Edit > Paste, or use the keyboard shortcut Ctrl+V.

 

참고로 Design에서 설정을 바꿔줘야 하는데 이 프로젝트에서만 해당되고 다른 프로젝트 하실때는 다시 원래 옵션대로 하실것을 추천드립니다. 일단 Design에서 위 옵션대로 하면 다음과 같은 창이 뜨는데 역시 XAML Silverlight3 canvas로 선택해주시고 다시 앞의 과정을 수행하시면 됩니다.

*꼭 다시 원래 설정으로 돌리시기 바랍니다.

 

그후 다시 블랜드에 돌아와서 LayoutRoot가 선택된 상태에서 붙여넣기를 하면 로고가 정상적으로 삽입됩니다.

 

이제 로고를 선택한 상태에서 이동하고 alt키를 누르면 자신이 원하는 Container안에 삽입할 수 있습니다. 앞에서 배운걸 조금 응용해보자면 LayoutRoot안에 StackPanel을 하나 삽입하고 다음과 같이 배치할 수 있다는 것이지요.

 

 

 

이런식으로 간단하게 삽입할 수도 있습니다.

 

----------------------------------------------------------------------------------------------------------------