짱묜's Blog
꿀모닝짱묜의 에너지 버스^0^

뜨하~~ 참으로 오랜만인것 같은 기분이!! ㅋㅋ
1차 프로젝트가 어느정도 마무리 되면서..긴장이 풀어져서..며칠동안 늘어졌네요..-ㅅ-;;
그래도..좀 쉬는 동안..간만에 친구도 만나고..훈쓰 식구들도 만나공~ 태오닷넷 쑈미나도 다녀오고..
ㅡㅡㅋ 여기저기 잘돌아다녔네요..히히
오늘 쓰기로 한 강좌 예제도..ㅡ.ㅡ 만들어둔지는 좀 됐는데..이제서야 쓰는군여..

오늘은 컨트롤 템플릿 안에 들어있는 이미지 소스를 변경해보도록 하겠습니다.
단, 이미지 소스의 경로를 직접 넣는 것이 아니라 C#코드에서도 변경이 가능하도록 만들꺼에요.



먼저 위와 같이 캔버스를 하나 만들어주고 그 안에 버튼 컨트롤을 넣었습니다.
이미지 변경을 보여주기 위해서 토글버튼을 썼어요.

그런 다음에는 버튼의 스타일을 만들어 주어야합니다. 오늘은 이미지를 넣은 버튼을 써야겠죠?
저는 ㅡㅡ; 작업하면서 눈이 즐겁도록 제가 좋아하는 공유 사진을 넣었습니다 하하핫!!

버튼 컨트롤 템플릿을 생성한 후(이전 강좌 참고) Images 폴더 안의 이미지를 불러 넣고,
하트모양 패스를 그려준 후 Cliping 하였습니다. Cliping에 대해서는 다음에 다루도록 하고 일단 진행합니다.
그리하여 아래와 같이 하트모양의 이미지가 버튼이 되었습니다.



그리고 버튼의 상태에 따라 효과를 주었습니다. 역시나..귀차니즘의 압박으로..오버효과만 -_-;;



이러한 작업들을 마친 XAML 코드는 다음과 같습니다.

여기서 중요한 것은 빨간 네모를 친 부분입니다. 버튼 컨트롤 템플릿의 디자인을 이루고 있는 이미지 소스를
직접 경로를 입력해 주지 않고 TemplateBinding을 사용했습니다.
Tag 속성을 이용하여 이미지개체를 가져옵니다. <ToggleButton.Tag></ToggleButton.Tag> 사이에 들어간
이미지 경로가 버튼 컨트롤 템플릿 안의 이미지 소스로 들어가게 되는것이죠..
그리고 템플릿 안이 아닌 화면 XAML에서 제어가 가능하다는 것은 C# 코드로도 제어할 수 있다는 소리입니다.
토글버튼을 이용하여 이미지변경을 해보도록 하겠습니다. 이부분은 C#으로 만들어야 합니다.



버튼을 클릭할때마다 이미지가 번갈아가면서 나오게 됩니다. 물론 오버 상태가 적용되어있구요. ^^
소스를 첨부할테니 받아서 실행해보시기 바랍니다.

버튼 템플릿 안에 이미지를 두개 넣었다면, 이제 남은일은 버튼 상태에 따른 스토리보드를 만드는 일입니다.
Base 즉 평소상태의 흑백톤 버튼 이미지의 Opacity 값을 100으로 하고 오버상태의 파란 버튼이미지
Opacity 값을 0으로 해줍니다.

Normal 상태는 따로 작업을 하지 않아도 되니, Over 일 경우의 스토리보드를 만들어 주겠습니다.



위와같이 타임라인의 0초 지점에서 흑백 버튼 이미지의 Opacity 값을 0으로 오버될 파란 버튼 이미지의
Opacity 값을 100으로 해줍니다.

자 F5 버튼을 눌러서 실행해봅니다. 그러면 오버했을 경우 파랗게 변하는 버튼을 확인할 수 있습니다.

코드를 따로 올려볼께요.



이렇게 비트맵 이미지를 활용한 버튼 템플릿 만들기를 해보았습니다.
좀 더 자연스러운 애니메이션 처리를 위해서는 여러장의 이미지가 필요할 것 같습니다.
샘플소스를 첨부할테니 필요하신 분은 받아가세요.

 궁금하신 부분은 글을 남겨주세요.

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

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

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

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

디자인이 다 되었다면 블렌드에서 프로젝트를 열도록 합니다.
그리고 프로젝트를 선택하여 Add Existing Item 메뉴로 제작한 이미지를 불러옵니다.
참고로 저는 Images라는 폴더를 프로젝트 내에 생성하여 그 안으로 불러왔습니다.



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

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

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



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



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



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