ZZANGMYON BLOG♡

11. 다시 Brush Transform 툴을 선택하여 그라데이션의 중심을 뒤로 이동시킵니다.



12. 이제는 애니메이션을 만들어 줄 차례에요. 먼저 스토리보드를 생성하도록 하겠습니다.



13. 스토리보드의 키프레임을 0초, 1초, 2초에 삽입해 주도록 합니다.



14. 1초가 되는 키프레임에서 그라데이션의 중심을 이동시킵니다.



15. CS 파일에서 다음과 같이 코드를 추가해줍니다.



다됐습니다!!  실행하면 다음과 같이 실행됩니다 ^_^ 여러분의 감각으로 ~ 여러가지 색을 적용해보세요.

소스 첨부할께요.

안녕하세요. 짱묜입니다!! 드디어 부활했어요~! ㅎㅎ

오늘은 텍스트에 그라데이션이 흐르도록 해보겠습니다.

1. 먼저 Expression Design 에서 텍스트를 한 줄 써주고 Object 메뉴의  Convert Object to Path 를
사용하여 텍스트를 패스로 변환시킵니다.
2. 그리고, XAML 로 Export 한 후 Blend에서 불러들입니다. (이 부분은 전에도 자주 다루어서 넘어갈께요)
위의 작업까지 마치면 블렌드의 비주얼 트리에 다음과 같이 패스가 나타나게 됩니다.



3. 이 텍스트를 이루는 패스들은 낱개로 쓰일 일이 없기 때문에 패스를 묶어서 하나로 합쳐주도록 하겠습니다.
패스를 모두 선택하여 아래의 그림처럼 합쳐줍니다.



4. 위의 작업을 마치면 다음과 같이 패스가 하나로 합쳐져 있는것을 확인할 수 있습니다.



5. 그리고 텍스트 패스가 들어있는 캔버스 안에 사각형을 하나 그려줍니다.



6. 이 사각형의 Stroke를 없애고 Fill을 그라데이션으로 채워줍니다.



7. Brush Transform 툴을 선택하면 그라데이션의 방향을 조절할 수 있어요.



8. 화살표를 이용하여 그라데이션의 방향을 바꾸고 드래그하여 길이를 늘려줍니다. 그런 다음, 포인트를 생성
하여 여러가지 색을 넣어줍니다.



9. 색을 다 넣었다면, 사각형과 텍스트 패스를 선택하여 Clipping 시켜줍니다.



10. 그러면 다음처럼 텍스트와 그라데이션만 보여지게 됩니다.




자, 여기까지 잘 따라오셨나요? ^^ 다음장으로 이어서 하도록 하겠습니다.

뜨하~~ 참으로 오랜만인것 같은 기분이!! ㅋㅋ
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 안에 이미지를 넣는것은 프로젝트 파일에서 이미지를 선택한 후
더블 클릭 하는것만으로도 가능합니다.



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

오늘은 묜이가..디자인이 아닌, C#에 도전을 하였습니다.
하하하 C#이라고 하기엔 너무 부끄러운.......-.-.....ㅋㅋ
마우스를 슥슥 긁으시면~ 사진이 나타납니다. ^^
사진은 훈스닷넷 UX 캠프때 단체사진입니당 ㅋㄷㅋㄷ~

오늘은 Stack 패널에 대해서 알아볼께요.

Stack패널은 자신만의 첨부 프로퍼티를 가지지 않고 자식 엘리먼트가 추가되는 순서대로 누적됩니다.
오직 Orientation 프로퍼티만을 가지고 있는데요. Horizontal 과 Vertical로 설정할 수 있고
기본값은 Vertical입니다. 예제에서 자주 볼 수 있는 편리한 패널이에요.



그림을 보면 사각형이 5개 나열되어 있습니다. 코드를 보면 아주 간단합니다.
Stack패널 안의 오브젝트들에는 어떠한 프로퍼티도 들어있지 않지만 자식개체가 생성되는 순서대로
자동 배치됩니다.

마진값으로 각 개체간에 공백을 줄 수 있습니다. 그러나 Grid나 Canvas와 같은 패널과 달리
마진값을 주게 되면 다음 객체들의 위치가 밀리게 됩니다. 즉 Grid나 Canvas에 들어있는 오브젝트는
다른 오브젝트의 마진값에 영향을 받지 않지만, Stack패널에 들어있는 오브젝트는 다른오브젝트의
마진값에 영향을 받게되는 것입니다.

^^ 어제 회식에서 무리를 좀 하는 바람에..오늘 종일 시체놀이 하다가 하루가 다 갔네요 ㅠ_ㅠ..ㅋㅋ
좋은 주말 되세요.

날씨가 점점 여름에 가까워지고 있네요..모기도 출몰하고 -.-;;
훈스 시삽들이 나오는 ReMix 행사에 다녀오고 싶었지만 못갔습니다 ㅠ_ㅠ 엉엉~ㅋㅋ

오늘은 Canvas패널에 대해서 알아보도록 하겠습니다.
짱묜이 아주..만만하게 봤다던 그 패널입지요...-.-ㅋㅋ

Canvas 패널은 가장 기본적인 패널이고 쉽게 사용할 수 있습니다.
지난 강좌에 말씀드렸듯이 익스프레션 블렌드와 비주얼 스튜디오에서는 기본 레이아웃이 Grid 패널이지만,
디자이너들이 주로 사용하는 익스프레션 디자인툴에서 XAML 로 코드를 내보낼 경우 기본 레이아웃은
Canvas 입니다.

Canvas패널은 명시적인 좌표값을 이용하여 엘리먼트의 위치를 결정합니다.
Left, Top, Right, Bottom 프로퍼티를 가지고 있는데요. 실버라이트에서는 Left와 Top만 지원합니다.



XAML 코드는 아래와 같습니다.



Canvas.Left 와 Canvas.Top 속성을 이용하여 사각형을  Canvas 패널에 배치한것입니다.
간단하죠? ^^

다음시간에는 StackPanel 에 대해서 알아보도록 하겠습니다.

안녕하세요~ 여러분^^ (안녕이라고 하기엔 새벽1시잖냐!!;;)

지난시간까지 블렌드 튜토리얼 강좌를 마치고 활용강좌를 쓰려고 했으나,
단순한 설명만으로는 부족한 부분들이 많을것 같아서 실제로 작업에 쓰이는 경우에 꼭 필요한
내용을 더 쓰려고 합니다. 중간중간 활용강좌도 진행할께요 ^^
이것은 전적으로 제가 블렌드를 다루고 실무에서 무한삽질(?)을 하면서
겪은 부분을 쓴 것이기에 지극히 개인적일 수도 있지만, 도움이 되시리라 생각합니다.

블렌드에서는 레이아웃 패널을 이용하여 다양하게 오브젝트를 배치할 수 있습니다.
제가 처음 작업하였을 때는 무조건 Canvas만 썼습니다. 왜냐구요? 이유는 아주 단순하게도,
그냥 평범해보였기 때문입니다. -_-;; 하하;;
솔직히 다른 패널은 뭐하는 애들인지도 잘 모르겠고, 아무 모양도 없이 오브젝트들이 잘 들어가는
Canvas만 주구장창 썼드랬죠.. 그런데 알고보니 그에 맞는 용도가 다 있더군요.^^;
그러나 레이아웃 패널은 눈에 보이는 속성이 아니기 때문에 각 패널의 속성을 알지 못하고서는
쓰기가 어려웠습니다. 그래서 오늘부터 레이아웃 패널에 대해서 하나씩 알려드릴께요.

레이아웃 패널에는 Grid, Canvas, Stack, ScrollViewer, Border 이렇게 5가지 패널이
있고 WPF용에서는 몇 개의 패널이 더 있지만, 실버라이트를 기준으로 하여 설명합니다.

먼저 Grid 패널을 첫 주자로 파헤쳐봅시다 -_ -+

Grid 패널은 비주얼 스튜디오나 익스프레션 블렌드의 기본 레이아웃 패널입니다.
그렇기 때문에 제일 자주 쓰일수 있습니다. 이녀석의 큰 특징은 HTML의 테이블과 아주
비슷하다는 것입니다.

테이블처럼 행과 열을 가지고 있으며 divider를 이용하여 행과 열을 조절할 수도 있습니다.



위의 저 빨간 네모 친 부분이 디바이더이고, 드래그로 움직일 수 있습니다.

Grid 패널은 기본적으로는 행과 열의 값을 0으로 가지는 하나로 된 레이아웃이지만
RowDefinition과 ColumnDefinition 엘리먼트를 사용하여 행과 열을 추가할 수 있습니다.

먼저 코드를 살펴보겠습니다.



Main이라는 이름을 가진 Grid를 생성하고 가로가 200이고 높이가 100인 행과 열을 2개씩 생성 하였습니다.
그리고 그 안에는 사각형 4개와 텍스트박스 4개를 넣었는데요. 주목해야할 부분은 Grid.Row와 Grid.Column
입니다. 값이 "0,0" "0.1", "1,0", "1,1" 을 가지고 있죠?
기본적으로 행과 열은 기본값을 "0"으로 가지고 있습니다.

그리하여 코드대로 디자인된 패널을 살펴보면 다음과 같습니다.



물론 "Grid.Row="0" Grid.Column="0" 의 사각형이 행과 열을 변경하지 않고도
"Grid.Row="0" Grid.Column="1"의 위치에 놓이게 할 수는 있습니다.
그러나 정렬기준에 맞추어 Margin 값이 변경되게 됩니다.

Grid 패널이 좌측 정렬일 경우,
"Grid.Row="0" Grid.Column="0"의 사각형의 LeftMargin 값이 0인 상태에서
행과 열을 변경하지 않고 "Grid.Row="0" Grid.Column="1"의 위치에 놓인다면
LeftMargin 값이 200이 되겠죠? (Column 가로길이값 200을 더해서)

흠..^^ 이해가 잘 되셨는지 모르겠네요. 테이블의 개념을 생각하면 이해가 쉬울듯 싶습니다.

오늘은 이렇게 Grid 패널에 대해서 알아보았구요. 다음시간에는 Canvas 패널에 대해서 알아보겠습니다.

로딩 애니메이션을 만들어봤습니다.

다운로드 받아서 가져다 쓰시면 됩니다..^^