기본적인 버튼의 모양은 엄청 투박합니다.
WPF씩이나 쓰면서 이런 버튼을 그냥 쓸순 없죠 ㅋㅋㅋㅋ

블랜드를 사용하여 간단하게 이미지 버튼을 만들어 봅시다.

1.프로젝트 생성
WPF프로잭트를 하나 생성한후 버튼을 하나 추가 합시다.(꼭 버튼이아니여도 상관없습니다.)
버튼으로 사용할 이미지를 '프로젝트 탭'으로 드레그하여 추가합니다.



2.컨트롤로 만들기
버튼에서 오른쪽 클릭을 한후 '컨트롤로 만들기(Make Into Control...)' 를 누릅니다.


콘트롤 타입(Control type)을 버튼으로 해주시고 이름(Name)을 적당이 넣어주세요.
디파인 인(Define in)는 이 버튼 스타일을 어디에 선언할지를 선택하는 것입니다.
일반적으로 이런 스타일들은 App(Application)에 선언합니다.


OK를 누르면 템플릿(Template)페이지로 넘어가게 됩니다.
아래 스크린샷을 보시면 못보던 경로가 생기는 것을 확인할수 있습니다.
이것은 위에서 지정한 이름의 버튼스타일로 활용이 가능하기 때문입니다.




2-2.컨트롤로 만든 컨트롤에 접근

컨트롤로 만들면 템플릿으로 변환이 됩니다.
이 템플릿은 2가지 방법으로 접근이 가능합니다.

2-2-1.리소스(Resources)로 접근

리소스탭에서 해당 탬플릿을 찾아 수정하는 방법입니다.


해당 탬플릿을 찾은후 오른쪽에 있는 아이콘을 누르면 탬플릿을 수정할수 있습니다.

2-2-2.탬플릿이 적용된 컨트롤로 찾기

해당 탬플릿이 적용되어있는 컨트롤을 찾아 오른쪽 클릭을 한후
Edit Template > Edit Current
를 눌러 탬플릿 수정창으로 들어갈수 있습니다.

 

3.버튼안에 이미지 컨트롤 넣기
이제 버튼안에 이미지컨트롤을 넣어 그럴싸하게 만들어 봅시다.
일단 오브젝트과 타임라인(Objects and Timeline)에서 보이는 그리드 안의 내용이 버튼이 화면에 표시되기 위한 컨트롤 들입니다.
모두 지우고 이미지컨트롤 3개를 넣습니다.


이 이미지컨트롤에 이미지를 넣습니다.
지금 보이는 버튼의 모양이 버튼의 모습이됩니다.
버튼의 노멀이미지를 위해 노멀이미지가 들어있는 이미지 컨트롤을 제외한 모든 컨트롤의 속성(Properties)에 'Visibility'를 하이든(Hidden)으로 바꿔 줍니다.



4.반응하는 버튼
버튼이라면 당연이 마우스가 올라갔을때와 클릭했을대 반응이 있어야 겠지요?

트리거(Triggers)탭을 선택합니다.
만약 트리거 탭이 없다면
Window > Triggers
를 선택해 줍니다.


트리거에 보면 여러가지가 있는데 이중
'IsMouseOver = True'가 마우스오버
'IsPressed = True'가 마우스 클릭시 표시되는 화면입니다.

'IsMouseOver = True'를 클릭하신후 마우스가 올라왔을때 보여줄 화면을 세팅합니다.
(마우스가 올라왔을때 보여줄 이미가 담겨있는 이미지 컨트롤의 'Visibility'속성을 'Visble'로 바꾸고 나머지 이미지 컨트롤은 'Hidden'으로 바꿔 주면 됩니다.)


'IsPressed'도 똑같이 마우스가 클릭됬을때 보여줄 화면을 세팅해 줍니다.


5.확인
이제 저장을 하고 메인 화면으로 나오기 위하여 위에 표시된 경로에서 맨앞을 눌러 줍니다.

요기

이제 실행해 봅시다.


잘동작을 하는군요.
셈플프로젝트도 올려드리겠습니다.



6.실버라이트에서는...
실버라이트도 같은 방법으로 이미지 버튼을 만들수 있습니다.
단지 'States'탭에서 해야한다는 것과 하이든이 없기때문에 콜라스(Collapsed)로 해야 한다는 점이 다릅니다.






실버라이트용 샘플 프로젝트도 올려 놓습니다.











  1. 2012.10.10 18:54  Address  Edit/Delete  Reply

    비밀댓글입니다

    • Favicon of http://blog.danggun.net BlogIcon 당근천국 2012.10.11 09:43 신고  Address  Edit/Delete

      마이크로 소프트 블랜드 라는 툴입니다.
      실버라이트나 WPF의 UI를 작성할때 쓰는 xaml편집툴입니다.

      보통 ui작업은 블랜드로 하고 비하인드 작업은 비주얼스튜디오로 합니다,

댓글 작성

이름
패스워드
홈페이지
비밀글

티스토리 툴바