최고보다,최선을...

ㅁ 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]

Silverlight 3에서 가장 실무에서 활용 성이 좋고, 또한 개발에 편리함을 주는 비헤이비어(Behavior)라는 녀석을 알아 보고, 예제를 통해서 어떻게 사용하지는 살펴보도록 하겠습니다.

 비헤이비어을 살펴보기 앞서 사전적 의미를 찾아보면, 행동, 거동, 행실 등으로 나타나는데요, 즉 비헤이비어는 행동의 개념이라는 것을 예상 할 수 있을 겁니다. 간단히 예를 들어 설명하자면, 남자들이 군대에 가면 자신이 군생활 동안 맡아야 할 보직이란 걸 정해 주는데요, 그렇게 보직이 정해지면 군생활 마치는 그날까지 그 일(행동)을 해야 하는 것 입니다. 이 비유를 풀어 보자면, 남자들은 객체들을 의미하고요, 보직은 비헤이비어라고 생각하시면 될 것 같아요. 즉, 객체에 비헤이비어를 붙어 주면 그 객체는 정해진 행동을 취하는 것이지요. 적절한 비유가 되었는지 모르겠습니다만, 대충 객체에 비헤이비어를 붙어서 쉽게 행동을 정의 할 수 있다는 것만 이해하고, 밑에서 나올 예제들을 통해서 좀더 자세히 알아보도록 하겠습니다.

비헤이비어 예제를 살펴보기 앞서 비헤이비어는 크게 3종류로 나눌 수 있는데요, 이는 아래와 같습니다.

-       TargetedTriggerAction

-       TriggerAtion

-       Behavior

위 3종류를 통틀어 Behaviors라고 합니다. 그럼 예제 소스를 통해서 어떻게 사용하면 좋은지 알아 보도록 하겠습니다.

ㅁ TargetedTriggerAction

 TargetedTriggerAction은 액션(Action)을 적용할 대상을 설정할 수 있도록 되어 있습니다. 액션을 적용할 대상을 가리키기 위해서 ‘TargetName’ 프로퍼티(Property)를 가지고 있으며, 이 프로퍼티에 대상 컨트롤의 이름을 명시하면 됩니다. TargetedTriggerAction에는 ChangePropertyAction, GoToStateAction,  RemoveElementAction 3가지 액션이 포함 되어 있습니다. 이 3가지 액션 중에서 자주 사용 할 수 있는 ChangePropertyAction에 대해서 알아 보도록 하겠습니다.

-       ChangePropertyAction

 ChangePropertyAction은 Target 컨트롤의 속성 값을 변경하기 위해 사용됩니다. 즉, 내가 변경하고자 하는 객체의 속성을 버튼클릭 이벤트나 어느 특정 이벤트가 발생했을 때 변경해주고 싶다라고 한다면 ChangePropertyAction을 사용하면 좋을 것 같습니다. 예를 들어 상황을 가정해 볼게요.

 “이미지(Image)컨트롤이 하나 있고, 버튼(Button)컨트롤이 2개 있습니다. 첫 번째 버튼은 클릭하면 이미지를 안보여 주고, 두 번째 버튼을 클릭하면 이미지를 보이게 해 주고 싶다”

위 내용과 같이 만들기 위해서는 보통은 버튼 클릭 이벤트를 XAML페이지의 CS파일에서 열심히 이벤트를 정의해서 작성하실 겁니다. 아래 코드와 같이 말이지요.

[코드 1-1] XAML 파일 내용

[코드 1-2] 코드비하인드(CodeBehind)

 위 XAML 파일은 버튼에 이벤트를 걸어주고, 코드 비하인드에서는 해당 이벤트에 이미지 컨트롤이 어떻게 보여줘야 하는지 정의해 놨습니다. 아주 간단한 코드 입니다만, 이를 ChangePropertyAction을 이용하면 더 쉽게 구현 할 있습니다. 그럼 ChangePropertyAction을 이용해서 똑 같이 만들어 보도록 하겠습니다. 이는 블랜드로 작업하는 게 아주 편하니, 블랜드를 이용해서 만들어 보도록 하지요.

[그림1-1]

 그림1-1은 블랜드에서 대충 디자인한 모습을 보여주고 있습니다. 그럼 이제 Behaviors 메뉴에서 ChangePropertyAction을 찾아 설정해 보도록 하겠습니다.

[그림1-2]

 그림1-2는 블랜드 왼쪽 상위부분 탭 메뉴를 보여줍니다. 탭 메뉴에 보시면 Assets라는 메뉴가 있는데요, 이를 선택하고 아래 보시면 Behaviors라는 메뉴가 있을 것 입니다. 이를 선택하면 ChangePropertyAction이라고 바로 보이실 겁니다. 그럼 ChangePropertyAction을 드래그해서 버튼 컨트롤에 붙이도록 합니다. (그림1-3 참고)

[그림1-3]

 버튼 2개 모두 붙어 넣었다면 이제 속성을 설정해 보도록 하겠습니다. 버튼에 붙어 넣은 ChangePropertyAction을 선택하고, 오른쪽에 있는 속성 창에서 설정을 하도록 하겠습니다.

[그림1-4]

속성 창(그림1-4 참고)을 보면 Trigger, Common Properties, Animation Properties 3종류의 속성이 보일 겁니다. 간단하게 설명하자면 아래와 같습니다.

위와 같이 설정을 하고 실행해 보시면, 앞 전에 코드로 작성했던 부분과 똑같이 동작하는 걸 보실 수 있을 겁니다. 또한 XAML의 코드 비하인드애서 코드를 작성하지 않아도 되니 깔끔한 코드가 나올 수 있습니다. 나머지 GoToStateAction,  RemoveElementAction은 간단히 설명하고 넘어 가도록 하겠습니다.

GoToStateAction은 객체의 State가 변경하고자 할 때 사용되는데요, 실버라이트로 개발을 해보셨던 분이라면 “VisualStateManager.GoToState “ 라고 기억하실 겁니다. VisualStateGroup을 만들어서 코드비하인드에서 해당 이벤트가 들어오면 GoToState함수를 이용해 애니메이션을 실행시켰을 것입니다. GoToStateAction을 이용하면 또한 코드 비하인드에서 따로 코드를 작성해 줄 필요가 없습니다.

 RemoveElementAction은 객체를 삭제 하고자 할 때 사용됩니다. 즉, 어떤 버튼을 클릭했을 경우 해당 객체가 삭제되도록 하고 자 할 때 사용하면 유용합니다.

 위 2가지 컨트롤 모두 ChangePropertyAction과 사용법이 비슷하니, 나중에 사용해 보시면 도움이 되실 겁니다.