본문 바로가기

Epxression Blend/WPF / Silverlight

[Expression Blend WPF강좌] 버튼을 만들어보자 - 2



저번시간까지는 버튼을 만드는 디자인을 했습니다. 그래서, 이번에는 버튼을 클릭했을때와 클릭하지 않았을때 달라지는 이벤트를 강의하겠습니다.

1) 버튼을 선택한 상태에서 오른쪽 버튼 클릭-> 컨트롤 구성요소 편집을 클릭합니다.

 


그러면 밑의 사진과 같이 인터렉션 패널이 바뀌고 보이지 않던 트리거 및 이벤트가 보이게 됩니다.
맨 처음 버튼을 만들었던 사각형들이 보이시죠? :) 메인화면에서 버튼속성으로 들어왔습니다. 

 
IsFocused = True 일때 : 클릭하고 난 뒤의 이벤트가 발생한다. (내가 이 버튼을 눌렀었는지, 안 눌렀었는지 구분되게)
IsDefaulted = True 일때 : 최초 설정값 설정이 발생한다.
IsMouseOver = True 일때 : 마우스 오버될 때 이벤트가 발생한다
IsPressed = True 일때 : 버튼을 클릭할 때 이벤트가 발생한다.
IsEnabled = True 일때 : 버튼이 비활성화 되었을 때 이벤트가 발생한다.

* True가 아닌 False이면 [어떠어떠한 이벤트가 발생하지 않는다.] - 로 이해하시면 됩니다.


2) 자주 쓰는 MouseOver와 Press만 설정 해 보겠습니다. MouseOver를 클릭합니다.


그러면 위의 그림과 같이 녹화 버튼이 나옵니다. 지금 자신이 변경하는 것을 녹화하겠다는 신호 입니다.
나중에 버튼 변경 했는데 안된다고 하는 경우, 내가 녹화 중인 상태에서 버튼을 변경했는지 먼저 생각해 보시길 ~,
(녹화 안 된 상태에서 색을 변경해도 색은 바뀌지 않습니다) 자, 자신이 만든 버튼의 색을 바꾸어 줍니다. :)
 

3) 파란색상이 들어가 있는 사각형을 선택 하시고 색을 변경해 줍니다. 그라데이션의 꼭지점을 선택하시고 원하시는 색상으로 바꿔주세요-
적용하면서 녹화버튼 옆에 번개 표시가 나타납니다. 속성을 적용해 주었다는 표시입니다- 




4) 녹화되어 있는 상태에서 밑에 있는 Press를 클릭하시면 녹화버튼이 넘어갑니다.
-3번의 방법대로 - 클릭 시에 바꾸고 싶은 색상을 설정해 줍니다.
색을 바꾸시고 완료 되셨으면 녹화버튼을 클릭하여 녹화를 끕니다.
그럼 왼쪽 속성도 꺼지는 것을 보실 수 있습니다.


저는 연두색 계열로 했어요 :)



5) 그럼 버튼의 효과가 완료 되었습니다. 이제 버튼 밖으로 빠져나오시고 빌드해서(F5를 클릭) 작업물을 확인해 보시기 바랍니다 :)