[WPF] 이미지를 버튼으로 만들기!

어제 세미나때 요청하신 분이 계셔서
간단히, 이미지로 버튼을 만들어보도록할께요.

Normal, Over, Press 이미지를 만들어 보았습니다.

토끼죠- 네 ~
토끼입니다!

1. WPF application 프로젝트를 하나 만들어 줍니다.

2. 프로젝트에 Add Existing Item 메뉴를 이용하여, 만들어 둔 버튼 디자인 토끼를 프로젝트에 추가 해줍니다.

3. Normal이미지 하나를 아트보드 위에 떨어트려줍니다.

4. 이미지를 Button Control로 만들어주기위해 마우스 우클릭해서 Make Into Control 메뉴를 선택합니다.

5. Button Control을 선택하고 OK 를 누릅니다.

6. 제가 만들 버튼에서는 ContentPresenter가 필요없기 때문에 Content Presenter를 없애버립니다.
(Content Presenter가 필요할때는 적당한 위치에 Content Presenter를 레이아웃해주면 되겠죠.)

7. 프로젝트에 추가 해둔 Over와 Press이미지도 아트보드위에 추가 해줍니다.

8. Normal상태에서는 Over와 Press이미지는 보이지 않게 -  둘을 선택하고 Opacity를 0으로 바꿔줍니다!

9. Triggers 패널을 봅시다!!
이 Triggers 를 이용하여 MouseOver, Press, Enable등등을 설정 할 수 있습니다.

11. MouseOver 상태를 설정하기위해 IsMouseOver=True를 클릭하고. MouseOver이미지의 Opacity를 100%로 바꿔줍니다.
Trigger패널의 Properties when active부분에 image.Opacity=1 이 추가 된 것을 볼 수있습니다.
MouseOver상태가 되었을 때 Property가 변경된다는 내용입니다.

12. 그리고 저는 투명부분을가지고 있는 PNG이미지를 썼기 때문에, MouseOver상태에서는 Normal 이미지는 보이지 않게 Opacity를 0%로 바꿔줍니다.

13. 같은 방법으로  Press의 상태도 설정해줍니다. IsPressed=True를 선택하고 Press 이미지의 Opacity를 0 으로 만들어 줍니다.

14. Press는 마우스 오버된 상태에서 일어나는 이벤트 이기 때문에, Over이미지와 Normal이미지 둘다 Opacity를 0으로 바꿔 줍니다.

15. Properties when active에 이미지 opacity에 관한 프로퍼티들을 확인 할 수 있습니다.


16. F5를 눌러 Run Project로 실행 해보면, 버튼을 확인 할 수 있겠죠?!



프로젝트 파일 추가합니다!

WpfButton.zip