텀이 너무 길었습니다, 저번 편에 이어서 진행하겠습니다.
1. 이번에는 버튼 안에 들어갈 아이콘을 가져와 보겠습니다. 맨 처음 포토샵으로 제작한 아이콘을 Png파일로 불러와서
사용할 수도 있지만 블렌드는 벡터형식이기 때문에 일러스트레이터에서 그린 아이콘을 가져올 수도 있습니다.
저는 후자의 방법으로 아이콘을 불러오겠습니다.
Expression Blend는 어도비 패키지처럼 자기의 제품군이 있는데, 그 중 Expression Design이라는 프로그램은 일러스트레이터와 아주 흡사한 역할을 합니다. 저는 이 프로그램에서 Ai파일을 불러와서 쓰기도 합니다.
아래의 그림이 바로 Expression Design 프로그램을 열었을 때 보이는 화면입니다.
저는 여기서 벡터로 그린 것을 [Ctrl+C]로 복사해서 블렌드로 가져오겠습니다.
이미지가 편하신 분은 이미지 사이즈를 통일 시킨 상태로 Png형식의 파일로 가져와서 불러오도록 합니다.
2. [Ctrl+C][Ctrl+V]로 붙여넣기 해서 블렌드에 가져온 모습입니다.
디자인 된 버튼에는 아이콘 하단의 버튼 이름이 새겨져 있습니다. 툴에서 텍스트 블록을 더블 클릭하여 추가합니다.
3. 아이콘과 텍스트 블록을 하나의 그룹으로 묶기 위해 두 레이어를 선택 후 우 클릭 > Group Info > StackPanel을 선택합니다.
StackPanel이 세로 정렬로 되어있어야 합니다. Orientation에서 Vertical로 설정하시면 됩니다.
이렇게 묶는 이유는 버튼 안에 컨텐츠를 넣으려면 하나의 레이어만 들어갈 자리밖에 없기 때문에 그룹으로 하나의 레이어로 만들어주면 n개를 버튼 안에 넣을 수 있기 때문입니다.
4. 이렇게 묶은 스택 패널을 선택 후 버튼으로 드래그 하면 다음과 같이 툴 팁이 뜹니다.
"드래그 하는 중에 이 버튼 안에 스택 패널을 넣고 싶으면 Alt 키를 눌러라" 입니다.
Alt를 누른 상태로 버튼 안에 그림과 같이 넣도록 합니다.
5. 버튼 안에 넣게 되면 오브젝트 및 타임라인 패널이 다음과 같은 트리구조가 됩니다.
6. 마찬가지로 다른 버튼들도 이렇게 추가해 나가도록 합니다.
하단의 버튼들도 이와 같은 방식으로 진행할 수 있겠습니다. 완성된 화면입니다.
다음 시간에는 App-Title 큰 타이틀을 템플릿 변경을 하도록 하겠습니다.
