Chapter 7. 실버라이트 메뉴






이번 예제는 우리들이 많이 사용 할 수 있는 메뉴입니다...
활용도가 아주 높지요..
한번 따라해 보시고 각자 응용을 해보시기 바래요.
시작합니다.



1. sMenu 라는 이름으로 프로젝트를 생성합니다.



2. 아래와 같이 유저컨트롤을 선택하고 Width : 600 / Height : 200 으로 줍니다 .




3. 화면에 버튼을 올리고  Width : 80 / Height : 80 으로 줍니다 .





4. 아래와 같이 버튼에서 마우스 우클릭 > Edit Control Part > Edit a Copy 합니다.





5. Create Style Resource 창이 뜨면 스타일 이름을 menuButton 이라고 입력합니다.
This document를 선택하고 OK를 클릭합니다.
 
그러면 버튼 편집 모드로 들어가게됩니다.


6. Grid를 선택하고


Width : 80 / Height : 80을 줍니다.





7. 아래와 같이 MouseOver를 클릭하고,  Grid를 선택 후 Width : 120 / Height : 120을 줍니다.
(버튼에 마우스를 올렸을때 가로세로를 120으로 만들기 위함입니다.)


그러면 아래와 같이 됩니다. (분홍색 테두리 지점을 잘 확인하세요~)





8. 아래와 같이 Pressed를 클릭하고,  Grid를 선택 후 Width : 120 / Height : 120을 줍니다.
(버튼에 마우스를 클릭 했을 때 가로세로를 120으로 만들기 위함입니다.)


그러면 아래와 같이 됩니다. (분홍색 테두리 지점을 잘 확인하세요~)




9. 아래 지점을 클릭하고 0.2라고 입력합니다.
(이것은  80/80의  사이즈에서  120/120사이즈로 변하는데 0.2초가 걸리게 해라~~  그런 것 입니다.)

                      (변경 전)                                                                  (변경 후)



10. 손가락 끝 부분을 눌러 버튼의 편집 모드를 빠져 나갑니다.





11. 버튼을 선택하고 Width 와 Height의 오른쪽에 있는 Set to Auto를 각각 클릭하여 줍니다.
( * Set to Auto : 아래그림의 노란색 상자로 둘러진 버튼입니다. )


그러면 아래와 같이 Auto로 변합니다.





12. 버튼에서 마우스 우클릭 > Group Into > StackPanel을 선택합니다.
(말 그대로 버튼을 스택판넬 안에다가 넣겠다는 것입니다.)





13. 그러면 아래와 같이 버튼이 스택판넬 속에 들어 갔음을 확인 할 수 있습니다.




14. 스택판넬을 선택 후 아래와 같이 속성을 변경 해 줍니다.

( * 참고로 Orientation은 스택판넬 안에 담길 개체의 정렬 방향을 나타내는 것입니다.
우리는 가로방향으로 버튼을 나열할 것이므로 Horizontal로 합니다.)



15. 개체중의 스택판넬을 더블클릭하여 스택판넬에 노란테가 생기게 해줍니다.
(우리는 버튼을 복제할건데 스택판넬 안에 붙여지게 하기 위해서 입니다.)


그럼 화면은 아래와 같이 됩니다.





16. 아래와 같이 버튼을 선택하고 Ctrl + C한 후에  Ctrl + V 를 4번 합니다.


그러면 아래와 같이 되지요?





17. 아래와 같이 버튼을 복수 선택 후  Width : Auto,  Height : Auto로 바꿔줍니다.
(복수선택은 Ctrl 이나 Shift를 이용하는것 알고 계시죠?)





18. 첫번째 버튼을 선택하고 Content속성을 whitecoco라고 넣어주고 Cursor를 Hand로 바꿔줍니다.





19. 나머지 버튼들도 모두 Cursor를 Hand로 바꿔주고 Content를 순서대로 이것저것 적어줍니다.
하얀코코는 다음과 같은 순서로 넣겠습니다.( whitecoco / hoons / silverlight / expression / google ) 헤헤~




20. 각 버튼의 네임을 넣어줍니다.. 하얀코코는 순서대로 btn_0, btn_1, btn_2, btn_3, btn_4로 입력하였습니다.





21. 아래와 같이 btn_0을 선택하고 Click에서 더블클릭하여 클릭이벤트 함수를 생성합니다.




22. btn_1부터  btn_4도 마찬가지로 클릭이벤트 함수를 생성합니다.



23.그러면 아래와 같지 cs 코드가 생성됩니다.
(이부분이 익숙하지 않으신 분은 http://whitecoco.tistory.com/entry/디자이너를-위한-실버라이트-Chapter-1-페이지-링크하기 이곳을 먼저 보시기 바랍니다.)





24. 아래와 같이 소스를 추가 해 줍니다. (눌렀을때 새창을 띄워주는 것입니다)

저장하고 닫습니다.


25. F5를 눌러 실행합니다.
성공하셨나요??

소스를 첨부합니다.