ZZANGMYON BLOG♡ :: [Expression Blend 2.5 활용강좌] 비트맵 이미지를 활용한 버튼 만들기 1

[Expression Blend 2.5 활용강좌] 비트맵 이미지를 활용한 버튼 만들기 1

Expression Blend/Blend 활용강좌 2008/06/26 22:06

안녕하세요. 오랜만에 글을 쓰네요. ^^; 폭풍전야같던 프로젝트 마감이 거의 끝나갑니다..
한달을 어떻게 보냈는지도 모르겠어요..ㅠ_ㅠㅋㅋ 3주동안 3년은 늙은것 같습니다;; 하핫;;

오늘은 벡터가 아닌 비트맵 이미지를 활용한 버튼 만들기를 해볼께요.
물론 벡터타입 버튼과 만드는 방법은 비슷합니다. 그러나 될 수 있는 한 벡터방식이 좋다고 봅니다.
일단, 확대/축소시에 깨짐현상이 없습니다. 그리고 유지보수가 편리하기 때문입니다.
비트맵 타입의 버튼을 만든다면, 이미지나 텍스트 수정시에 재작업을 해야하니까요.
간단하게 텍스트를 고치는 정도라면, 디자이너가 없을경우에 개발자가 수정이 가능하지만,
비트맵방식은 개발자가 포토샵을 켜서 고치기는 좀 힘들겠죠? 원본도 있어야하구요. ^^
물론 유지보수가 필요하지 않고, 비트맵 효과를 내야하는 경우라면 이미지 처리를 해야겠죠.

그럼 본격적으로 시작해보겠습니다.
먼저 바탕이 투명한 PNG 파일(비트맵방식)로 만든 버튼 이미지 2개를 만듭니다.

저는 다음과 같이 Normal 상태와 Over 되었을때 상태를 준비했습니다.

디자인이 다 되었다면 블렌드에서 프로젝트를 열도록 합니다.
그리고 프로젝트를 선택하여 Add Existing Item 메뉴로

제작한 이미지를 불러옵니다.
참고로 저는 Images라는 폴더를 프로젝트 내에 생성하여 그 안으로 불러왔습니다.

이렇게 이미지가 추가되었다면 버튼을 생성하도록 합니다.

참고로 이번에 블렌드에서 코드에 직접 추가하지 않고, 툴에서 템플릿을 생성할 수 있도록 업데이트 되었습니다.
자세한 기능 설명은 차후에 하도록 하고 버튼 만들기를 일단 진행하도록 할께요.

페이지에 버튼 컨트롤을 하나 얹어줍니다. 그리고 비주얼 트리에서 버튼 컨트롤을 선택한 후
마우스 오른쪽을 클릭하여 템플릿을 생성합니다. 아래의 그림처럼요.

그리고 스타일 이름을 지어줍니다. 리소스가 생성될 곳은 현재 문서로 합니다.

그럼 템플릿이 생성됩니다. 왼쪽은 기본으로 생성되는 템플릿이고 오른쪽은 제가 사용할 부분만 남겨놓은
템플릿입니다. 모든 기능을 다 사용하지 않기 때문에, 불필요한 부분은 지워주는것이 좋겠죠?
아래의 비주얼 트리 또한 다릅니다. 블렌드에서 기본적으로 생성되는 버튼 컨트롤의 디자인을 다 지우고
이미지 두개를 넣어주었습니다. Grid 안에 이미지를 넣는것은 프로젝트 파일에서 이미지를 선택한 후
더블 클릭 하는것만으로도 가능합니다.

다음장에 이어서 하도록 할께요.

Posted by 짱묜

Expression Blend, 비트맵이미지버튼, 실버라이트, 익스프레션 블렌드, 템플릿

TRACKBACK 0 AND COMMENT 4

TRACKBACK http://zzangmyon.tistory.com/trackback/97

헤헤 2008/06/27 10:16
이렇게 감사할데가...
질문 올리자마자 포스팅까지 해 주셔서 너무 감사드려요!
넙죽-
- 짱묜 2008/06/27 11:30
  도움이 되시길 바랍니다. ^^
헤헤 2008/08/13 15:26
focusstate는 어떻게 삭제하나요? state 원하는 것만 남기고 삭제하는 법을 잘 모르겠어요...
>.< (전 2.5 프리뷰버전)
- 짱묜 2008/08/15 13:29
  음 저는 xaml 모드에서 쓰지않는 상태의 코드들을
  직접 삭제해 주었어요. ^^