자, 그럼 지금까지 만든 버튼을 스타일로 만들어서 아주 사용하기 좋은놈으로 만들어 보겠습니다.
일단 버튼을 멋지게 만들기위에 이벤트를 만들겠습니다.
버튼은 기본적으로 아래와 같은 이벤트를 가지고 있는데요,
－Normal State : 보통상태 <Storyboard x:Key="Normal State">
－MouseOver State : 마우스를 올려놨을때 <Storyboard x:Key="MouseOver State">
－Pressed State : 마우스를 눌렀을때 <Storyboard x:Key="Pressed State">
－Disabled State : 버튼의 활성화여부 <Storyboard x:Key="Disabled State">
Flash의 버튼 속성과 비슷합니다. 각 이벤트는 스토리보드로 짜서 키값으로 지정하는데 기본적으로 XAML에서 정해놓은 버튼의 이벤트 키값은 위에 적어놓은 것들입니다. 저렇게 적어놔야 작동합니다. 기본적인 버튼 속성이 그러한데요, [Checkbox]의 경우엔 더 많은 이벤트가 있을겁니다. 다 외워놓으면 좋겠죠?ㅋㅋ
자, 요딴식으로 이제 제가 만든 버튼에 이벤트를 넣어줄 겁니다. 아! 버튼을 스타일로 만들면 디자인만 스타일화 되는것이아니라 이벤트나 모션들도 스타일화 됩니다.w
그럼, 버튼을 선택하고 Storyboard를추가 합니다.
빨간 선의 +버튼을 누르면 Storyboard가 추가되는데요, 전 Normal 이라는 이름으로 하나 만들어 놨습니다. 이것은 보통때의 버튼을 만든것입니다. 이제 마우스가 올려졌을때의 버튼을 만들어보겠습니다.
마찬가지로 Storyboard를 추가해서 버튼을 눌렀을때(Pressed)의 모션을 만듭니다. 그 후에,
여기서 우리는 수정을 할껍니다. ^^
........................................................자..... 어떻게 설명해야 할까요? wwwwwwwwwww
자, 모두 아실테지만 Blend툴은 모든 오브젝트와 그의 속성들이 xaml로 보여집니다. 예를들어
-------------------------------------------------------------------------------------
VerticalAlignment="Top" Width="101">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF40C4BD"/>
<GradientStop Color="#FF0074FF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
-------------------------------------------------------------------------------------
이해되시죠? 네모상자에 그라데이션 하나 줬을뿐인데 저정도로 나왔습니다. 그럼 이제 제가그린 버튼의 xaml코드를 보겠습니다.
참고로 제버튼은 원과 화살표(*2)와 빛과, 총4개의 도형을 가지고 있습니다. 꾀 길어졌습니다.
그 전에, 저는 버튼을 제작할때 Grid로 묶어 줬었습니다. 코드를 보시면
<UserControl..>
<UserControl.Resources>...</UserControl.Resources> 요것은 리소스 Storyboard 내용
<Grid> .... </Grid> 요것은 버튼
</UserControl..>
간단하게 요정도로 되어 있습니다. 자, 그럼 CSS를 짜보신 분들은 아실텐데요 웹페이지 코딩을할때 모든스타일정의를 페이지마다 써주지 않습니다. 이유는 아실테고요 ^^ 따라서 어느 한곳에 스타일을 지정해 놓고 class 이름을 불러와 적용시키는데요, 이와같이 여기에선 APP.xaml파일에 스타일을 넣습니다. Visual Studio 화면 오른편에보시면 있습니다. 더블클릭!
그럼 page.xaml 에 있는<Grid>...</Grid> 요것만 딸랑 가져다붙이면 되느냐?! 아닙니다~
정해진 형식이 있는데요 자, App.xaml 에 가보면요 대략 아래와 같은 형식으로 추가 합니다.
-------------------------------------------------------------------------------------
<Application..........>
<Application.Resources>
<Style x:Key="PlayButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootElement"> LayoutRoot를 RootElement로 바꿉니다.
</Grid.Resource....> 버튼이벤트
<Grid...............> 버튼이미지
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
</Application>
-------------------------------------------------------------------------------------
보시면 대략 아시겠나요? 대략풀어보면 style의 key를 PlayButton으로 했습니다. 타입은Button이구요 (타입형식은 약속되있는겁니다.) 그리고 'Setter' 이것은 말그대로 셋팅을 해주는 거구요.
글고 타입을 Button으로 했기때문에 컨트롤탬플릿을 갖는것 같습니다. ;; 암튼,
다음에 우선 Page.xaml을보면 Grid로 그룹핑이 되어있는 버튼코드를 복사해서 위에 파란색 박스같이 App.xaml에 넣어줍니다. 사실은 엄청길지만 큰단위로 나눈겁니다. (버튼이미지들의 마진값이나 widht값은 없어야 합니다.) 그리고 Page.xaml에 <UserControl.Resource>...</UserControl.Resource> 이부분이 버튼 이벤트입니다. 이것을
<Grid.Resource>...</Grid.Resource>로 이름을 바꿔서 위에 파란색 박스같이 App.xaml에 넣어줍니다. 그리고 여기서도 약간의 코드의 수정이 있는데요, 이벤트는 아까말했듯이 key 값이 있습니다. 'MouseOver State'와 같은 것이죠, 그런데 Blend에서 Storyboard 작업을 할때 스토리보드의 이름을 'MouseOver' 라고만 주었습니다. 그러면 실행이 되질 않습니다.
그래서 규칙대로 나머지 보통상태나 눌렀을때의 상태의 Storyboard도 key값을 바꿔 줘야 합니다. 그럼 일단 스타일 등록은 된겁니다.
다시 page.xaml로 옵니다. 이미 스타일을 지정해 놨기때문에 그 많은 코드들이 필요 없습니다.
-------------------------------------------------------------------------------------<UserControl.....어쩌구 저쩌구>
<Grid x:Name="LayoutRoot" Background="White">
<Button Style="{StaticResource PlayButton}" Width="200" Height="200"> </Button>
</Grid>
</UserControl>
-------------------------------------------------------------------------------------
이렇게 바꾸어 주시면 되겠습니다. ^^;; 그럼 아래와 같은 결과물이 나옵니다.
댓글을 달아 주세요
길버트 2008/04/18 13:45 댓글주소 수정/삭제 댓글쓰기
아싸 1등!
정리하느라 힘들었을 텐데, 수코했어요.
hihanguk 2008/05/21 08:53 댓글주소 수정/삭제 댓글쓰기
아주 자세히 설명해주셔서 개발자도 충분히 시도할 수 있겠습니다 ^^;;;
stryper 2008/06/02 19:46 댓글주소 수정/삭제 댓글쓰기
쩝.. 디자이너인데요... 비주얼스튜디오 안깔면 안되나요?
안녕하세요~ 쩝..
비쥬얼스튜디오.. 안깔아도..
블렌드의 XAML View에서도 코드로 작성하실 수 있습니다.
다만, 굉장히 불편하구요, 이게 또 거지같은게 스펠하나만 틀려도 오류가 나는게 있어서요. Blend에서는 인텔리센스(자동완성) 기능을 지원하지 않습니다. 할것같긴 합니다만..
단지 위에 예제를 따라해보시는건 문제없을것 같습니다.
stryper 2008/06/06 22:42 댓글주소 수정/삭제 댓글쓰기
그렇군요...
stryper님, 요번에 툴이 업그레이드 됐습니다.
디자이너가 비쥬얼스튜디오를 쓸 경우가 많이 줄것으로 보입니다. ^^
난이 2008/06/30 16:52 댓글주소 수정/삭제 댓글쓰기
//
Project 탭에서 page.xaml 을 오른클릭을합니다. 그러면 목록에서 Edit in Visual Studio를 클릭하여 Visual Studio 를 엽니다.
여기서 우리는 수정을 할껍니다. ^^
//
저는 이부분에서 비활성화 되서 안되는데 어떻게 해야 할까요?
음...왜그럴까요...^^
비쥬얼스튜디오는 당연히 설치 하셨을테고.. 근데,
요번에 Expression Blend 2.5 June Preview가 발표되었지요, 그중 Visual State Manager란 기능(?)이 추가 되었는데요, 굳이 비쥬얼스튜디오에서 xaml을 편집하지 않아도 몇번의 클릭질로 States를 만들어 Style로 등록 시킬수 있습니다. 완전 편해졌고...따라서 위에 있는 예제는 틀린것은 아니지만 아주 번거로운 방법이 되버린거져~^^
자세한내용은 http://cafe.naver.com/expressionstudio
여기에 있는 글에서 참고해보세요