최고보다,최선을...

ㅁ Behavior

 Behavior는 위에서 설명한 바와 같이 객체에 행동을 붙어 주는 녀석입니다. Behavior에는 MouseDragElementBehavior와 FluideBahavior가 포함되어 있습니다. 그럼 간단하게 쉽게 많이들 사용할 수 있는 MouseDragElementBehavior에 관해서 알아 보도록 하겠습니다.

-       MouseDragElementBehavior

MouseDragElementBehavior는 내가 원하는 객체에 붙어주기만 하면 드래그가 되는 것을 뜻합니다 .그럼 간단한 예제를 통해서 어떻게 사용하는지 알아보도록 하겠습니다.

예제 소스는 HyperlinkAction때 사용했던 이미지를 그대로 사용하도록 하고, 이 이미지 컨트롤에 MouseDragElementBehavior를 붙어서 이미지를 움직여 보도록 하겠습니다. XAML파일에 이미지컨트롤을 올려두고, 예전 예제들같이 Assets  >>  Behaviors >> MouseDragElementBehavior를 선택 한 후 드래그를 해서 이미지컨트롤에 붙어 두도록 합니다.

[그림4-1]

 예전 예제들과 비슷한 부분이 많아서 이젠 지루하면서도 능숙하게 잘하실 것이라 생각이 드는군요, 그럼 바로 이제는 속성 창에서 속성 내용을 지정하도록 하겠습니다.

[그림4-2]

 그림4-2를 보시는 거와 같이 MouseDragElementBehavior 속성이 별로 없는 것을 확인 할 수가 있는데요, 이렇게 노출된 속성도 안 아주 간단합니다.

간단하게 설정이 끝났습니다. 너무 쉽지요!! 마우스로 그냥 클릭클릭 몇 번으로 이렇게 드래그가 되다니! 정말 놀랍지 않습니까?? 예전 같았으면은 이벤트를 몇 개를 만들어서 Point로 객체의 위치 찾고 , 계산하고 등등에 아주 번거로운 일들을 했어야 했습니다. 그러나 Silverlight 3에서 기본적으로 MouseDragElementBehavior로 제공해 주니 재사용 성도 좋고, 어떤 객체든간에 쉽게 붙 일수 있으니 정말 편한 것 같습니다. 그럼 위 작성한 내용을 가지고 컴파일 후 실행을 해보도록 하겠습니다.

[그림4-3]

 그림4-3은 실행 모습을 보여주고 있으면, 1번 실행화면은 ConstraninTopParentBounds를 체크하지 않은 모습이고, 2번 실행화면은 체크한 모습입니다. 2번의 경우 부모 Grid에서 구역을 벗어나지 못하고 있는 것을 확인 하실 수 있을 겁니다.

-       FluideBahavior

FluideBahavior는 컨트롤의 위치가 변경될 때 애니메이션을 통해 부드럽게 움직이도록 도와주는 Behavior입니다. 즉, 레이아웃이 변경되었을 때 컨트롤이 자연스럽게 위치를 다시 잡을 수 있도록 하는 애니메이션을 지정해 주는 것 입니다. 이 예제는 따로 없습니다. 위 Behavior 예제와 비슷하므로 따러 예제코드를 만들지 않았습니다.

지금까지 Behaviors에 관해서 알아 보았는데요, 정말 쉽지 않습니까!! Silverlight 2에 비해서 Silverlight 3은 비헤이비어를 통해서 코드비하인드에서 작성해야 할 코드가 많이 줄어 들었습니다. 또한 비헤이비어는 요즘 각광 받고 있는 MVVM패턴에도 아주 잘 어울리며, 비헤이비어를 여러 가지 내용으로 만들어서 사용할 수도 있습니다. Silverlight 3에서 정말 편한고 필요했던 내용들이 많이 적용이 되었습니다. 비헤이비어는 그 중 제일 유용한 내용이라고 생각하며, 실무에서도 활용도가 제일 높을 것이라고 필자는 확신합니다.

Demo.zip

ㅁ TriggerAction

 TargetedTriggerAction이 ‘TargetName’을 이용해 액션 대상을 지정해, 다른 컨트롤(액션을 발생 할 컨트롤)에서 제어 할 수 있었습니다. 반면, TriggerAction은 액션 대상을 자기 자신으로 설정하도록 합니다. TargetedTriggerAction에는 ControlStoryboardAction,

HyperlinkAction, PlaySoundAction 3가지가 포함 되는데요, 이 또한 블랜드로 작업하시면 쉽게 사용하실 수 있습니다.

-       ControlStoryboardAction

 ControlStoryboardAction은 스토리보드를 만들어서 쉽게 실행 시킬 수 있도록 도와줍니다. 예를 들어 보자면 이미지 컨트롤이 위치가 이동되는 애니메이션이 있다고 가정했을 때 이를 실행하기 위해서는 XAML파일의 코드비하인드에서 [StoryboardNaem].Begin()이라고 Begin함수를 불러 주었을 것입니다. ControlStoryboardAction을 이용하면 역시 코드비하인드에서 코드를 쓸일이 줄어 듭니다. 특히 프로그래밍 언어를 모르는 디자이너들도 자신이 만든 스토리보드를 ControlStoryboardAction을 이용해 쉽게 실행해 볼수 있습니다. 그럼 아래 예제를 보면서 알아보도록 하겠습니다.

[코드 2-1] XAML파일 코드

 위 코드는 간단한 스토리보드를 만들 코드입니다. 간략하게 설명하자면 이미지 컨트롤을 오른쪽으로 이동하면서 도는 애니메이션입니다. 이를 실행하기 위해서 버튼 컨트롤을 생성하도록 합니다. 그리고 블랜드에서 ControlStoryboardAction을 드래그해서 버튼 컨트롤에 붙어 주도록합니다.

( ChangePropertyAction 예제 참고.)

 [그림2-1]

 버튼 컨트롤에 ControlStoryboardAction을 붙이고, [그림 2-1]화면에서 속성을 설정 하도록합니다. Trigger 관련 속성 설정은 위에서 설명한 ChangePropertyAction과 동일하며, Common Properties 관련 속성은 아래와 같습니다.

속성을 모두 설정했다면 컴파일 후 실행해 보면 아래 그림과 같이 잘 움직이는 걸 보실 수 있을 겁니다.

[그림2-2]

-       HyperlinkAction

 HyperlinkAction은 HTML에 A태그와 비슷하다고 생각하시면 됩니다. 기존에는 버튼 클릭 같은

이벤트를 받아서 코드비하인드에서 아래와 같은 코드를 짜서 페이지를 이동했을 것입니다.

[코드 3-1]

그러나 이제는 HyperlinkAction을 이용하면 코드비하인드에 위와 같은 코드를 번거롭게 짜실 필요가 없어 집니다. 간단한 예제를 만들어 보도록 하겠습니다. 예제 내용은 이미지 컨트롤을 클릭하면 네이버(http://www.naver.com)로 이동하도록 하는 예제입니다.

[코드 3-2]

XAML파일에 이미지컨트롤을 하나 올려 놨습니다. 이제 이미지컨트롤을 클릭했을 경우 네이버 사이트로 이동하도록 HyperlinkAction을 걸어 보도록 하겠습니다. 위에서 했던 예제들과 같이

Assets >> Behaviors >> HyperlinkAction을 선택해서 이미지컨트롤에 드래그에서 붙이도록 합니다.(그림3-1 참고)

[그림3-1]

그림3-1과 같이 이미지컨트롤에 HyperlinkAction을 붙어 넣었다면, 속성 창에서 링크로 연결할 주소를 입력해주도록 합니다.

[그림3-2]

Trigger 관련 속성 설정의 위의 예제들을 참고하시면 되고, Common Properties는 아래와 같습니다.

그림3-2와 같이 속성 내용을 다 지정하고 실행시켜 보면 그림3-3과 같이 잘 실행되는 것을 확인 하실 수 있을 것 입니다.

[그림3-3]