[Expression Blend WPF강좌] Stack 패널을 이용하여 메뉴바 만들기

이번강좌는 Stack Panel을 이용하여 옆에서 슬라이드 되어 나오는 가로 메뉴를 만드는 것이다.
예전 강좌 때 [Grid]패널과 [Canvas]패널 강좌를 올렸었는데, 그때는 그것만 주구장창 썼기 때문에 다른 것은 Skip하고 지나갔었다.
Stack 패널은 이런 아이콘을 가진 레이아웃 패널이다

이 패널의 특징은 이 패널(그룹)안으로 들어오는 모든 객체들은 전부 일렬로 정렬된다.
그래서 이 Stack Panel을 선택하고 속성창에서 Orientation 을 Vertical :세로 로 할지 Horizontal: 가로 로 할지
설정을 하면 객체들이 세로로 혹은 가로로 무조건 한줄로 정렬된다.
레이아웃 패널의 대략의 개념을 알고 싶으면 [Grid] 패널 강좌 때 설명을 간략히 했는데, 아직 레이아웃 패널의 개념을
못잡고 있으시면 그 강좌부터 보시길..

이렇게 상자를 여러개 만들어놓은 상태에서 전체선택(ctrl+A) 하시고 오른쪽 클릭 > 그룹으로 묶기 > Stack Panel 클릭
하시면 어지럽게 정렬된 상자가 마치 군기 잡힌 듯 일렬도 나열된다.

Horizontal 상태일 때

Vertical 상태일 때

Stack 패널 선택 후> 오른쪽 속성 > 레이아웃 >Orientation 속성
Horizontal : 가로로 정렬
Vertical : 세로로 정렬

정렬 순은 박스를 만들 때의 차례 순으로 정렬된다(레이어 상위순)
Stack 패널도 적절한 때에 쓰면 캔버스나 그리드보다 훨씬 쓰기 좋다.
다른 프로그램에서 없던 기능 (레이아웃 패널)이였기 때문에 어떨 때 쓰고 어떨 때 써야 할지 잘 구분이 안갔었는데
쓰다보면 이런 기능이 왜 진작에 없었나.. 하는 생각도 든다.
어쨌거나, Stack 패널을 이용, 하여 메뉴를 만드는 것이기 때문에 패널에 대한 설명은 여기까지... 하기로 하고.

일반적인 웹 페이지에 롤오버 하면 슬라이드 되어서 화면에 나타나는 그런 메뉴들이 많다.
메뉴라는 것은 어떤 링크를 편하게 들어가기 위해서 만드는 것이기 때문에,
아까 넣었던 사각형이 아닌 버튼 객체를 넣어서 해보려고 한다.

1) 메뉴를 구성할 버튼을 만든다. (버튼 만드는 강좌도 예전 강좌에)
펜툴로 따고 메뉴의 그림이 다 다르기 때문에 각각 버튼으로 저장해 주었다.

위와 같이 5개 정도의 버튼을 만들었다.

3) 버튼을 다 만들면 버튼을 전체 선택 (Ctrl+A) 후 오른쪽 클릭 > 그룹으로 묶기 > Stack Panel 선택 한다.
그러면 일렬로 정렬이 된다. 세로로 정렬이 되면 속성에서 아까와 같이 가로로 설정해 준다.
설정해 주니 버튼 사이가 다닥다닥 너무 붙어있어서 버튼에다가 왼쪽 오른쪽 마진을 주려고 한다.