[Silverlight 3][월간 Web. 2010.01] 실전활용!! - Behavior를 사용하자 (2)
이 내용은 월간 Web에 2010년 01월호에 기고했던 내용 입니다!!
[바로가기]
실전활용!! - Behavior를 사용하자 (1)
실전활용!! - Behavior를 사용하자 (2)
실전활용!! - Behavior를 사용하자 (3)
ㅁ TriggerAction
TargetedTriggerAction이 ‘TargetName’을 이용해 액션 대상을 지정해, 다른 컨트롤(액션을 발생 할 컨트롤)에서 제어 할 수 있었습니다. 반면, TriggerAction은 액션 대상을 자기 자신으로 설정하도록 합니다. TargetedTriggerAction에는 ControlStoryboardAction,
HyperlinkAction, PlaySoundAction 3가지가 포함 되는데요, 이 또한 블랜드로 작업하시면 쉽게 사용하실 수 있습니다.
- ControlStoryboardAction
ControlStoryboardAction은 스토리보드를 만들어서 쉽게 실행 시킬 수 있도록 도와줍니다. 예를 들어 보자면 이미지 컨트롤이 위치가 이동되는 애니메이션이 있다고 가정했을 때 이를 실행하기 위해서는 XAML파일의 코드비하인드에서 [StoryboardNaem].Begin()이라고 Begin함수를 불러 주었을 것입니다. ControlStoryboardAction을 이용하면 역시 코드비하인드에서 코드를 쓸일이 줄어 듭니다. 특히 프로그래밍 언어를 모르는 디자이너들도 자신이 만든 스토리보드를 ControlStoryboardAction을 이용해 쉽게 실행해 볼수 있습니다. 그럼 아래 예제를 보면서 알아보도록 하겠습니다.
|
<!-- Storyboard1 : 회전하면서 이동하는 Animation --> <Storyboard x:Name="Storyboard1"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)"> <EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="540"> <EasingDoubleKeyFrame.EasingFunction> <CircleEase EasingMode="EaseOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"> <EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="450"> <EasingDoubleKeyFrame.EasingFunction> <CircleEase EasingMode="EaseOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> </Storyboard> <!-- 중간 생략... -->
<!-- Target Image Control--> <Image x:Name="image" Source="/Demo;Component/Resource/Image01.JPG" Height="456" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5"> <Image.Projection> <PlaneProjection/> </Image.Projection> <Image.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform/> <TranslateTransform/> </TransformGroup> </Image.RenderTransform> </Image> |
[코드 2-1] XAML파일 코드
위 코드는 간단한 스토리보드를 만들 코드입니다. 간략하게 설명하자면 이미지 컨트롤을 오른쪽으로 이동하면서 도는 애니메이션입니다. 이를 실행하기 위해서 버튼 컨트롤을 생성하도록 합니다. 그리고 블랜드에서 ControlStoryboardAction을 드래그해서 버튼 컨트롤에 붙어 주도록합니다.
( ChangePropertyAction 예제 참고.)
[그림2-1]
버튼 컨트롤에 ControlStoryboardAction을 붙이고, [그림 2-1]화면에서 속성을 설정 하도록합니다. Trigger 관련 속성 설정은 위에서 설명한 ChangePropertyAction과 동일하며, Common Properties 관련 속성은 아래와 같습니다.
|
- Common Properties 관련 속성 |
속성을 모두 설정했다면 컴파일 후 실행해 보면 아래 그림과 같이 잘 움직이는 걸 보실 수 있을 겁니다.
[그림2-2]
- HyperlinkAction
HyperlinkAction은 HTML에 A태그와 비슷하다고 생각하시면 됩니다. 기존에는 버튼 클릭 같은
이벤트를 받아서 코드비하인드에서 아래와 같은 코드를 짜서 페이지를 이동했을 것입니다.
|
HtmlPage.Window.Navigate(new Uri("http://www.naver.com", UriKind.RelativeOrAbsolute)); |
[코드 3-1]
그러나 이제는 HyperlinkAction을 이용하면 코드비하인드에 위와 같은 코드를 번거롭게 짜실 필요가 없어 집니다. 간단한 예제를 만들어 보도록 하겠습니다. 예제 내용은 이미지 컨트롤을 클릭하면 네이버(http://www.naver.com)로 이동하도록 하는 예제입니다.
|
<!-- 중간 생략... --> <Image Source="/Demo;Component/Resource/Image01.JPG" Height="456" Cursor="Hand"></Image> <!-- 중간 생략... --> |
[코드 3-2]
XAML파일에 이미지컨트롤을 하나 올려 놨습니다. 이제 이미지컨트롤을 클릭했을 경우 네이버 사이트로 이동하도록 HyperlinkAction을 걸어 보도록 하겠습니다. 위에서 했던 예제들과 같이
Assets >> Behaviors >> HyperlinkAction을 선택해서 이미지컨트롤에 드래그에서 붙이도록 합니다.(그림3-1 참고)
[그림3-1]
그림3-1과 같이 이미지컨트롤에 HyperlinkAction을 붙어 넣었다면, 속성 창에서 링크로 연결할 주소를 입력해주도록 합니다.
[그림3-2]
Trigger 관련 속성 설정의 위의 예제들을 참고하시면 되고, Common Properties는 아래와 같습니다.
|
- Common Properties 관련 속성 |
그림3-2와 같이 속성 내용을 다 지정하고 실행시켜 보면 그림3-3과 같이 잘 실행되는 것을 확인 하실 수 있을 것 입니다.
[그림3-3]