Food ListBox 만들기 : 2. State와 StoryBoard, Opacity Mask

'1. Grid의 Column과 DataBinding' 에 이어서 '2. State와 StoryBoard, Opacity Mask'를 살펴 볼께요.

Visual State
Visual State를 설정하는 State패널을 봅시다.

1. Base가 선택되어 있습니다.
Base 상태의 디자인 설정합니다.

2. Base 상태에선 보이지 않을 BigImage 를 선택하고 Visibility 프로퍼티를 Collapsed시켜둡니다.
 

3. 보여지고 있는 TextBlock과 SmallImage의 레이아웃을 설정해줍니다.

4. Silverlight 프로젝트의 VSM 에서는 각 State 간의 Transition을 손쉽게 설정 할 수있습니다.
Common States간의 Transition 값을 0.2초 가량 설정 해줍니다.

5. MouseOver State를 설정해 봅시다.
MouseOver가 되었을 때 TextBlock의 Foreground Color를 조금 진한 색으로 변경하여,
MouseOver시 글씨의 색이 진해지게 설정합니다.

Storyboard
State별로 애니메이션, 모션 등을 작성 할 수 있는  StoryBoard를 설정 해 봅니다.

6. Selected State를 설정해봅니다.
List의 Item이 Select 되었을 때의 플레이될 스토리보드를 만들어 주기 위해
Objects and Timeline panel에서 Selected 오른쪽의 Show Timeline 버튼을 눌러 줍니다.

7. TextBlock을 선택하고 타임라인의 0.2초 지점을 선택한 후 keyframe을 추가 해준 뒤
TextBlock의 font size 프로퍼티를 32px정도로 커지게 조정 해 줍니다.

8. SmallImage의 Opacity는 0%로 변경해줍니다.

9. BigImage는 0% 에서 서서히 보이기 위해 0초의 keyframe에는 opacity 를 0%, Visibility를 Visible로 -

10. 0.2초의 keyfram에서는 작아졌다가 커져 보이기 위해 BigImage의 Scale을 x,y 0.5초로 설정해줍니다.

11. 그리고 0.4초에 KeyFrame을 추가하고 Opacity를 100%, Scale을 1, 1로 설정해 줍니다.

12. 이제 아트보드위의 ListBox버튼을 클릭하여 Template을 빠져나갑니다.

ListBox자체의 디자인과 ScrollBar등의 디자인을 적용하기 위해 ListBox 의 Template를 설정해줍니다.

13. ListBox > Edit Template > Edit a Copy... 로 기본컨트롤로 부터 복사된 ListBox Template를 만듭니다.

14. FoodListBoxStyle이라고 이름을 지어주고 OK

15. Border안에 ScrollViewer가 들어있는 구조의 ListBox에서 Border 속성을 Reset시켜버리면 ListBox의 테두리가 없어집니다.

처음 디자인의 스크롤들이 스르륵 없어지는 모양을 만들어 주기위해 ScrollViewer의 Presenter 부분에 Opacity Mask를 줄거에요.
16. 그래서 ScrollViewer > Edit Template > Edit a Copy... 를 선택하여 ScrollViewer의 Template을 만듭니다.

17. FoodScrollViewerStyle이라고 이름을 지어 주었습니다.

Opacity Mask
색과는 상관없이 표시 Color의 Alpha값의 %에 따라 엘리먼트를 Mask해주는 기능을 설정해봅니다. 

18. ScrollViewer의 Template는 그림과 같은 구조를 가지고 있고
그 중 제목 그대로 ScrollContentPresenter라는 부분이 Scroll할 Content를 보여 주는 부분입니다. 

1) 이 ScrollContentPresenter를 선택하고
2) 오른쪽 Brushes에서 OpacityMask를 선택하고
3) Editor의 하늘색 표시된 컬러바 위를 클릭해주어 색을 추가 해줍니다.

19. 컬러의 양쪽 끝을 선택하여 각각 alpha값을 0%로 설정 해줍니다.

20. Gradient tool을 선택하면 아트보드위의 엘리먼트에서  Gradient의 영역, 방향을 조절 할 수 있습니다.
동그라미들을 선택하여 적당하게 Opacity Mask를 설정해줍니다.


이제 ,  ScrollBar에 디자인을 적용하고 약간의 설정을 해 주면 끝입니다.
3번에서 이어서!

------------------------------------------------------------------------------
1. Grid의 Column과 DataBinding
2. State와 StoryBoard, Opacity Mask
3. ScrollBar Template