[Silverlight 3] Projection 값을 이용하여 원근감있는 메뉴를 만들어보자

안녕하세요, 정진희입니다.
요새는 계속 실버라이트에 대한 강좌를 쓰고있는데요.
같은 익스프레션 블랜드로 작성하지만 WPF랑 실버라이트가
보이는 메뉴얼이 좀 다르다보니 왔다갔다 하니 헷갈리기도 하네요, ㅎㅎ

오늘은 실버라이트에서만 작업할 수 있는 3D 원근감처럼 보이기 위한 속성,
Projection 속성을 가지고 원근감 있는 실버라이트 메뉴를 만들어보도록 하겠습니다.

at First, What's mean perspective 3D?
중학교 시절 미술시간에 이런 것 많이 그려봤을 텐데요.
원근감 있는 사각형, 혹은 물체를 그리기 위해 1점 투시, 2점투시, 3점 투시로 하여 밑의 그림처럼 그립니다.
전 이런 거 디자인 제도 할 때 했었는데요, 제품을 입체적으로 보이기 위해서 이렇게 그리곤 했었습니다.
(잘 못그려서 문제지만)

마찬가지로, Expression Blend 특히 실버라이트에서는 이런 기능을 지원해주고 있습니다.
(WPF 프로젝트에서는 이러한 기능이 없네요.)
마치 종이위에 그리긴 하지만 그럴싸하게 3D 입체처럼 보이기 위한 기능입니다.

구글링을 해서 몇 가지 찾은 예인데요.

조금 다른 적용의 예이지만 멀리서 봤을때 마치 글자가 3D처럼 보이는 효과입니다.
오늘 작업할 예제를 미리 보여드리도록 하겠습니다.

-예제-

1) 먼저 실버라이트 프로젝트를 하나 생성합니다. 실버라이트로 클릭하고, 이름을 준 후 확인버튼을 클릭합니다.

2) 오늘은 실버라이트 메뉴를 만들기로 했으니, 메뉴를 클릭하기 위해서는 버튼으로 작업하는 것이 좋겠죠?
버튼을 하나 추가합니다. 뒤에 배경색은 잘 보이기 위해서 미리 깔아두었습니다.

그리고 추가적으로 메뉴를 클릭하였을 때, 보여지는 서브메뉴 버튼 3개와 서브에서 다시 메뉴로 돌아오기 위한 Back버튼을 하나 만듭니다.

3) 각각 버튼들이 따로따로 있는데요.. 메뉴가 다 같이 움직일 수 있도록 그룹으로 총 두번 묶어 줍니다.
①번처럼 서브 메뉴버튼 4개를 StackPanel의 Orientation을 Vertical로 설정하고 그룹을 지어줍니다.
②번은 서브메뉴를 묶은 StackPanel과 큰 메뉴버튼을 다시 Stack Panel로 묶는데요 이번엔 Orientation을
Horizontal로 설정해줍니다. (그룹묶는 방법은 객체 다중선택 후 우클릭 > 그룹 > Stack Panel)

여기서 좀 정렬이 제대로 안될 경우가 있을텐데요. width/Height, 마진값과 Alignment로 조정하시기 바랍니다.

4) 잘 묶으셨나요? 이제 Projection이라는 속성을 가지고 약간 입체적으로 움직이도록 하겠습니다.
서브메뉴들을 묶은 스택패널을 선택하시고 ①속성에서 Alignment를 왼쪽으로 설정하시고,
② 변형에서 Projection의 두번째 탭을 선택하신 후, ③ Y축 값을 1로 설정해줍니다.
방금 한 작업은 회전할 객체의 3D 중심을 잡은 것입니다.