기본적인 버튼의 모양은 엄청 투박합니다.
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)로 해야 한다는 점이 다릅니다.
실버라이트용 샘플 프로젝트도 올려놓습니다.
마무리
툴은 마이크로 소프트 블렌드(Blend for Visual Studio)를 사용했습니다.
