ZZANGMYON BLOG♡

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

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



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

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

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



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



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

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



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

ButtonImageBinding.zip

다양한 색으로 만들어 봤어욤..^^

VistaButton.zip

다운받아서.......색깔 바꿔 쓰셔두 되고...암튼...필요한데로 가져다 쓰세요 ㅋㄷ
 
그런데 ㅠ_ㅠ;;;; 크기가 큼 -.-; 제 해상도에 맞춰 하다보니... 이런 이기적인 ㅠ_ㅠ;;

마우스 오버 효과만 넣었습니다..ㅠㅠ 워..

안녕하세요^^ 따뜻한 주말입니다......(사실 아직 밖에 안나가봤다는...오후 2시입니다.ㅋㅋ)
이전 시간에 File메뉴를 살펴 보았는데요. 그 중 Export 메뉴에 대해서 자세히 알아볼께요..

디자인에서 작업한 파일들은 PSD,JPG,PNG와 같은 여러 포맷형태로 내보낼수가 있습니다.
그 중 주목할 만한 것은 생성한 오브젝트들을 "XAML"이라는 코드로 내보내는 것인데요.
디자인에서 내보내진 xaml 파일 소스코드는 블렌드나 비주얼 스튜디오에서 불러들여 모션작업이나,
프로그래밍 작업을 합니다.

그렇다고 xaml코드가 다 똑같이 내보내지는것도 아니에요..상황에 맞추어 내보내야합니다.
XAML 내보내기 대화상자를 살펴보죠.



왼쪽에..제가 디자인으로 그린 강백호 캐릭터를 XAML로 내보내려고 합니다. 탭이 두개가 있습니다.
Graphics와 XAML이 보이시죠? Graphics 탭으로 선택하면 위의 그림과 같이 내보내진 컨텐츠가 렌더링
되는 방식을 볼 수 있습니다. 확대,축소 그리고 이동 도구가 포함되어 있구요,
Background로 배경색을 선택할 수 있습니다. 투명한 이미지를 볼 때 유용할거에요.
XAML 탭을 선택하면 아래와 같은 XAML 소스 코드가 보여집니다.



그럼 이제 오른쪽 항목들을 살펴보겠습니다.

Document Format(문서 형식)

------------------------------------------------------------------------------------------

Canvas(캔버스) : Expression Blend의 개체와 같이 대화형으로 애니메이션 효과를 적용하거나
조작할 수 있는 개체를 만들경우에 선택합니다.

Export editable TextBlocks(편집 가능한 TextBlock 내보내기) : 텍스트 모양이 변경되더라도
텍스트가 편집 가능한 개별 문자로 유지됩니다.

Export flattened paths(병합된 패스 내보내기) : 문자가 윤곽선으로 변환되어 텍스트의 모양은
유지되지만 더 이상 편집할 수 없게 됩니다.

------------------------------------------------------------------------------------------

Silverlight(실버라이트) : Silverlight용으로 제작된 응용 프로그램에서 표시할 수 있는 파일을 만들경우
선택합니다. 우리가 실버라이트로 작업할 경우 이 옵션을 선택하면 이렇게 내보내진 코드를 가지고
비주얼 스튜디오와 같은 개발툴로 프로그래밍을 합니다.

------------------------------------------------------------------------------------------

Resource Dictionary(리소스 사전) :  콘텐츠를 다시 사용할 수 있는 자산 모음으로 취급할 경우
선택합니다.

Group by(그룹화 기준) : 자산을 리소스 그룹으로 묶는 세 가지 방법 중에서 선택할 수 있습니다.
전체 문서를 단일 리소스로 생성하려면 Document(문서) 그룹화를 선택합니다.
문서의 각 레이어를 개별 리소스로 생성하려면 Layers(레이어) 그룹화를 선택합니다.
문서의 각 개체를 단일 리소스로 생성하려면 Objects(개체) 그룹화를 선택합니다.

Path output type(패스 출력 형식) : 두 가지 패스 출력 형식 중 하나를 선택할 수 있습니다.
브러시 형식을 사용할 수 있는 경우에는 언제든지 XAML에서 사용할 수 있는 리소스를 만들려면
Drawing brush(드로잉 브러시) 형식을 선택합니다.
브러시 안에 래핑되어야 하지만 렌더링 속도가 더 빠른 리소스를 만들려면 Drawing image
(드로잉 이미지) 형식을 선택합니다.

------------------------------------------------------------------------------------------

Effects(효과)

Rasterize life effects(라이브 효과 래스터화) : 라이브효과를 래스터화(비트맵 이미지로 변환) 할
경우에 선택합니다. 효과를 래스터화 하면 아트워크의 모양을 최대한 동일하게 유지할 수 있고, 선택을
취소하면 일부 개체가 실선 또는 채우기로 내보내질 수 있습니다.

Vectorize image strokes(이미지 스트로크 벡터화) :  비트맵 이미지를 기반으로 하는 브러시 스트로크
를 중첩된 단색 채우기 개체로 벡터화하여 내보낼 수 있습니다. 벡터화 수준을 낮게 하면 내보내는 이미지
스트로크가 단순화되고 벡터화 수준을 높이면 이미지 스트로크가 보다 세밀하게 내보내집니다.

이렇게 옵션 선택을 마치고 Export(내보내기)를 누르면 옵션에 맞추어 XAML 소스코드가 내보내집니다.
* Export 옆의 Hide(숨기기) 버튼을 누르면 Preview(미리보기)가 사라지고 미리보기를 숨긴 경우에는
버튼을 눌러 다시 볼 수 있습니다.


사실 이렇게 봐도 이해안가는 부분들이 있을테지만, 이런게 있다는건 알아두시면 좋아요..^^
시작은 낮 2시에 시작했는데..-.-하다말고 이짓저짓; 하다가 마저 쓰고 보니..새벽 2시가 되었네요..
ㅋㅋ 뜻하지않게 장장 12시간에 걸친..ㅡ_ㅡ..
^ㅡ^ 내일은 짜모게티 먹는 날이네요~ 모두 즐거운 주말 되시기 바래요 ^^