버튼 을 하나 만들어 보겠습니다. 저는 정말 쉽지 않았습니다. ㅜ,ㅜ
새로운 프로젝트를 만듭니다. ^^
Normal State (평소) MouseOver State (마우스오버)
Pressed State (다운) Disabled State (버튼의 활성화여부)
이러한 Storyboard 의 key 값이 들어가 있습니다.
(Storyboard는 이벤트나 모션을 지정한 것을 말하고요, key값은 MouseOver...같은 Storyboard를 가진것의 이름입니다.)
자, 그럼 Expression Design 이나 Illustrator에서 버튼 모양을 하나 만듭니다.
저는 위와같은 저질버튼 하나를 만들었습니다. 이것을 복사를 하고 Blend로 가져옵니다. 자, 그런데 한가지 문제가 있습니다. 저 버튼의 역할은 스타일로 정의 되어 쓰여질 막중한 임무가 있습니다. 후에 개발단에서 쉽게 사용하기 위해선 Grid로 묶어야 하는데요, 버튼은 보시는 바와 같이 백터 기반의 이미지로 초록색원, 검정색화살표, 빛, 이렇게 나눠져 있는데 각자의 width값과 margin값 등을 가지고 있습니다. 생각하지 않고 걍 수정에 들어가다간 ....
일단, Expression Design에서 가져온 저질버튼을 Grid로 한번 그룹핑 해줍니다.
1.Ctrl + G 를 이용하여 Grid로 묶고,
2.이하 Ellipse와 Path들을 선택하고
3.오른쪽버튼>Auto Size>Both선택
각자의 위치값과 사이즈를 초기화
해줍니다.
4.그 후 Layout을 이용하여 나누고
도형을 맟춥니다.
(하늘색라인에 마우스를 갖다대면 생겨납니다.)
이제야 비로소 스타일로 등록할 준비를 하였군요, (으아, 어렵당 ㅜ,ㅜ)
오늘은 여기까정 하겠습니다. ^^
다음엔 Storyboard를 이용하여, 마우스 이벤트를 만들겁니다.
크기와 색상들이 자연스럽게 변하게 하는 작업등을 할 것입니다.
후에 Visual Studio를 이용하여 버튼스타일 등록을 합니다. ㅋㅋ "초큼 복잡합니까~?"
댓글을 달아 주세요
자유와 2008/04/26 11:58 댓글주소 수정/삭제 댓글쓰기
피터씨~ 강좌 잘보고 있습니다^^
버튼을 그룹으로 묶고 layout을 이용하여 맞출때 자동으로 layout그리드들이 맞춰지는건 없는건가요? 매우 복잡한 버튼의 경우 불가능..아니 너무 비효율적인 작업이 되어서요^^;
그리고 Rectangle을 오른쪽버튼>Auto Size>Both선택하면 도형이 없어져 버리네요;;
버튼은 Ellipse나 Path로만 이루어 져야 하나요?
하하 안녕하세요~!! W
처음으로 모르는 분이 오셔서 기분이 묘하게 좋네요 ㅋㅋ 제가 알고있는거에 대해선 모두 말씀해 드리겠습니다.(벗으라면 벗겠어요)ww 혹시 디자이너 신가요? 그렇다면 정말 방갑습니다. ^^ 자,말이 길었는데요,
음, 생각해보니 그렇네요, 레이어를 자동으로 인식하고 그리드로 딱 나눠졌으면 좋았겠네요, 허나 전 아직 그런기능은 보지 못했습니다.ㅜ.ㅜ 따라서 그런 비효율적인 작업은 안하면 그만입니다.w (Peter C 쵝오!!) ㅋㅋ 사실 버튼의 경우 모양이 심하게 변할 경우가 없으니까요, 또한 저렇게 그리드로 나눈다고 해도 음.. 같은 비율로 변하지 않으면 별의미가 없습니다. 예로 간격등이 %로 정해지기 때문에 가로로만 심하게 늘어난다면 처음 의도와 많이 달라지기 때문이죠 ^^ 대신에 복잡한 버튼의 경우 .png같은 파일을 사용하시면 좋겠습니다. 수체화기법으로 버튼을 만들 수도 있으니까요^^ 아!, 한가지 저도 놀랬는데요 Silverlight에선 .gif를 지원하지 않는다고 합니다. 놀라셨죠??@@
우리가 버튼이라고 생각하는건 Control의 속성이 Button의 속성으로 되어 있기때문이죠? 그렇다면 무엇도 버튼이 될 수 있습니다.
마지막으로 Auto Size>Both 했을때의 문제는 그리드를 잘 맞춰주시면 됩니다. 그리고 버그인지 잘 모르겠지만 바로바로 그리드에 딱맞춰 들어 가지 않는 경우가 있습니다. 그땐 뭐든간에 Reset을 해줘야 합니다. (정렬같은거요) 뽀로꾸 입니다. ㅋㅋ