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

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

 


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

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

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


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


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

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




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


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



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



Posted by 진희쩜넷

Trackback Address :: http://blog.jinhee.net/trackback/10 관련글 쓰기

댓글을 달아 주세요

  1. 궁금해 2009/04/14 18:05 Address Modify/Delete Reply

    자세한 설명에 대한 아쉬움이 있내요...

    잘 이해 안되는 부분이 많습니다.

    그리고 위에 버튼의 이벤트들이라고 하신 것이 있는데 이벤트가 아니라 속성 아닌가요?...

    ㅡ.ㅡ;

  2. wpf맨 2011/06/27 09:46 Address Modify/Delete Reply

    좋은 강좌 잘보고 있습니다. 처음하는건데도 쉽게 따라할 수 있네요..
    근데 윗분은 머가 저리 불만이신건지~
    완벽한 강좌를 원하시면 걍 책을 사서 보시지... 쩝...

  3. 으나나형 2011/08/03 16:20 Address Modify/Delete Reply

    생성된 Button Text는 설정이 불가한가요? 크기라든가 컬러라든가..

    • 진희쩜넷 2011/08/03 16:34 Address Modify/Delete

      텍스트 설정을 하시려면 ContentPresenter를 삭제하고 컨트롤 중에 Textblock을 써주시면 설정할 수 있습니다.

      다만 그렇게 되면 텍스트가 버튼 밖에서 수정이 되지 않아서 글씨 속성을 밖에서도 수정할 수 있도록 연결 해주셔야 합니다.

      Textblock 속성에서 text 속성의 옆에 조그마한 박스가 있는데 그 조그만 박스를 선택 (고급옵션입니다) > 요소속성 바인딩 > Content로 바인딩 해주셔야 버튼 밖에서도 글씨를 수정할 수 있답니다.

  4. 샴베 2012/04/11 02:32 Address Modify/Delete Reply

    익스프레션 블렌드 4 사용자입니다. 예제 보면서 하다보니 Grid 밑으로 Rectangle 객체 3개가 보이는 것이 아니라 만든 blueBtn이라는 이름으로 보이는데 이런 경우에는 예제처럼 버튼 템플릿 안의 Rectangle 객체는 어떻게 선택할 수 있나요?

    • 진희쩜넷 2012/04/27 10:17 Address Modify/Delete

      안녕하세요, 제가 댓글을 잘 이해했는지 모르겠습니다만.. 이 예제는 버튼 컨트롤 안의 스타일을 수정하는 예제이기 때문에 blueBtn이라는 버튼으로 보여질 것입니다. 버튼 템플릿 안의 특정 Rectangle을 선택하기는 힘듭니다. 그것 자체가 이미 버튼이기 때문입니다.

    • 진희쩜넷 2012/05/18 07:41 Address Modify/Delete

      템플릿 안의 Rectangle 객체를 선택하시려면 버튼 안으로 들어가셔야 합니다. 들어가시는 방법은 버튼 우클릭 > 템플릿 > 템플릿 수정으로 가능합니다.