지난 번에 만들었던 Behavior를 사용해 보겠습니다.
이름은 ChangeRotation이라는 Behavior이며 TargetTriggerAction입니다.
ChangeRotation Behavior의 목적 ?
- Rotation 변경을 특정한 조건이 발생할 때마다 일으키고 싶을 때에 사용합니다.
- 예를 들어, Target의 RotationY를 버튼이 클릭 될 때마다 90도씩 회전하고 싶을 때 이 Behavior를 사용합니다.
이 Behavior를 사용하는데에는 몇 가지 제약 있습니다.
1. Target의 type은 Grid여야 합니다.
2. Rotation 변경이 되는 Target은 두 종류 입니다.
2. Rotation 변경이 되는 Target은 두 종류 입니다.
- Grid 본인
- Grid의 Children
- Grid의 Children
그럼 이제 실제로 Blend 3에서 Behavior를 어떻게 사용할 수 있는지 보도록 하겠습니다.
이미 만들어놓은 SketchFlow Project를 열어 트리 구조를 보면, 아래 사진과 같이 보입니다.
녹색 박스 안의 ImageSlideViewerContainer는 Grid이며 안에는 4장의 이미지가 있습니다.
첫번째 이미지의 RotationY는 0
두번째 이미지의 RotationY는 -90
세번째 이미지의 RotationY는 90
네번째 이미지의 RotationY는 180
이런 식으로 설정되어 있으며 4장의 이미지들의 CenterRotationZ를 Image의 Width의 절반으로 값을 주었습니다.
원하는 움직임은 btnLeft (왼쪽 방향 화살표)를 눌렀을 때, 이 이미지들이 90도씩 RotationY가 변하여 회전하길 바라는 것입니다.
Assets의 Behaviors로 들어가면 ChangeRotation이 있습니다. 이것을 마우스로 Drag하여 btnLeft에 Drop을 하면 됩니다.
Drop을 하면 오른쪽 Properties창에 Behavior를 설정할 수 있도록 아래 사진과 같은 내용들이 나타납니다.
이미 만들어놓은 SketchFlow Project를 열어 트리 구조를 보면, 아래 사진과 같이 보입니다.
녹색 박스 안의 ImageSlideViewerContainer는 Grid이며 안에는 4장의 이미지가 있습니다.
첫번째 이미지의 RotationY는 0
두번째 이미지의 RotationY는 -90
세번째 이미지의 RotationY는 90
네번째 이미지의 RotationY는 180
이런 식으로 설정되어 있으며 4장의 이미지들의 CenterRotationZ를 Image의 Width의 절반으로 값을 주었습니다.
원하는 움직임은 btnLeft (왼쪽 방향 화살표)를 눌렀을 때, 이 이미지들이 90도씩 RotationY가 변하여 회전하길 바라는 것입니다.
Assets의 Behaviors로 들어가면 ChangeRotation이 있습니다. 이것을 마우스로 Drag하여 btnLeft에 Drop을 하면 됩니다.
Drop을 하면 오른쪽 Properties창에 Behavior를 설정할 수 있도록 아래 사진과 같은 내용들이 나타납니다.
- Trigger
- TriggerType : Trigger를 설정할 수 있습니다.
- SourceName : Event를 발생시키는 Object입니다.
- EventName : Event를 설정할 수 있습니다.
- Common Properties
- TargetName : Action을 일으키는 Object입니다.
사용자가 btnLeft를 마우스 외쪽 버튼으로 클릭하게 되면 ImageSlideViewerContainer가 ChangeRotation을 일으킵니다.
그 하위에 Rotation, Rotation Properties, Target은 Behavior 소스 코드 상에서 직접 Catalog를 만든 것입니다.
ImageSlideViewerContainer의 Children인 4장의 이미지를 회전시키고 싶은 것이기 때문에, Target Catalog에서 isChildren을 체크합니다. 그 후에, RotationY를 체크하고 DeltaY에 90을 입력하게 되면 모든 설정을 마친 것입니다. ^_^
이제 직접 프로젝트를 빌드하고 수행해보면 이미지들이 90씩 왼쪽으로 잘 돌아가게 됩니다 ^ㅁ^)/
'Tech > Silverlight' 카테고리의 다른 글
[Blend 3 Element Binding] (0) | 2009.10.12 |
---|---|
[SketchFlow를 만들자 2] (0) | 2009.10.09 |
[Sketch Flow를 만들자] (0) | 2009.10.06 |
[Behavior 만들기] (0) | 2009.10.01 |