최고보다,최선을...

ㅁ 도메인 서비스 호출

 이제 실버라이트 프로젝트에서 도메인 서비스를 호출하고, 데이터를 받아서 해당 컨트롤에 뿌려주는 작업에 대해서 알아 보도록 하겠다. 기존에 WCF 서비스를 이용하였거나, WebService를 통해서 작업을 해보셨던 분들이라면 금방 익숙해질 것이라고 생각이 든다.

[코드 3] MainPage.xaml

MainPage.xaml에 DataGrid 컨트롤은 간단하게 데이터를 호출해서 뿌려주기위해 올려놓은 것이다. 호출 내용은 아래 코드와 같다.

[코드 3] MainPage 코드 비하인드

위 코드를 간단하게 설명하자면,

- 생성자에서 도메인서비스로 지정한 Currency_DS를 생성후 로드메소드를 구현해 주었다.

- service.Load메소드는 해당 서비스를 호출하고 받은 반환값 엔티티쿼리(EntityQuery)를 해당 엔티티클래스로 로드를 해주는 역할을 하는데, 위 코드에서 첫번째 파라미터로 GetCurrencyQuery 메소드를 호출하고 있는 것을 확인 할수 있을 것이다. 이 메소드는 도메인서비스의 GetCurrency메소드와 같다. 두번재 파라미터로는 콜백함수를 지정하였다. 세번재 파라미터는 userstate를 지정하는 것인데 null 지정해도 무관하다.

- Currency_LoadCompleted는 콜백메소드로 파라미터로는 LoadOperation<Currency>를 받는다.

LoadOperation<Currency>의 Entities속성을 DataGird 컨트롤의 ItemsSource로 지정해 주어 데이터를 채워주었다.

[그림 7] 프로젝트 실행모습

[그림 7]은 지금까지의 작업을 실행해본 모습으로, 도메인 서비스에서 데이터를 잘 받아서 뿌려주고  있음을 보여준다.

지금까지 작업을 기존에 서비스참조해서 작업하는 거하고, 얼마나 편해졌는지 대충 감이 왔을 것이라 생각이 든다. 위에서도 말했듯 WCF RIA Service에서는 서비스 참조 같은 작업이 없어서, 서비스를 수정하거나 했을 때 서비스 업데이트하는 번거로운이 일이 없다. 그래서 유지 보수가 편하고, 개발하기가 편하다고 하는 이유이다. 또한, 도메인서비스에서 기본적인 CRUD 작업을 만들어주니 개발해야할 부분이 일부, 약간 줄어든 샘이다. 하지만, 필요에 따라 도메인 서비스부분도 수정되어야 할때도 있을 것이다. 이를 적절이 이용해서 사용하면 개발하기 편리한 서비스가 될 것이다.

ㅁ Flickr API 키 발급 받자.

플리커(Flickr) API를 받는 방법은 간단하다. 기본적으로 우선 플리커에 가입을 해야 하며, 로그인후 API관련 페이지로 이동해서 키 발급을 신청하면 된다. (http://api.flickr.com/services/api)

[그림1] 플리커(Flickr) API 관련 페이지

위 그림은 플리커 API관련 페이지이다. App제작 링크를 클릭해서 넘어가면 API키를 발급 받을 수 있는 링크가 나올 것인데, 그 링크를 클릭해서 키 발급 절차에 따라 내용을 작성하면 정상적으로 플리커 API키를 발급 받을 수 있을 것이다. (App 제작 >> API 키 요청 >> 항목 작성)

ㅁ 프로젝트 구성 및 UI구성

-      프로젝트 구성

 키 발급이 끝났다면 이제 VS2008(VisualStudio2008)를 이용해서 실버라이트 프로젝트를 하나 만들자. 프로젝트 이름은 마음대로 짖도록 한다. (필자는 Flickr.MyPhotoGallery로 프로젝트를 만들었다) 그런 다음 위에서 설명했던 휴즈플로우(HugeFlow) CommandPattern 어셈블리(.dll)파일을 추가 해주어야 한다. 그리고 플리커 로그인은 로그인(인증)관련 파라미터(Parameter)를 넘겨줄 때 MD5로 암호화해서 보내줘야 하기 때문에 이를 위한 어셈블리파일을 추가해 주어야 한다. 어셈블리 파일은 아래 주소를 통해서 다운로드 받을 수 있을 것이다.

(http://cid-22bbf65162c68537.skydrive.live.com/self.aspx/.Public/Assemblies.zip 또는 위 블로그 주소 참고)

[그림 2] 프로젝트 구조

 위 [그림 2]는 프로젝트 파일구조를 보여주는 모습이다. 위에서 참조파일을 다운받았다면 위 그림에 References폴더와 같이 참조파일을 추가해 주자. 그리고 나머지 파일들은 이름만 봐도 대충 어떤 내용인지 짐작 할 수 있을 것이라 생각이 든다. 일단, 이렇게 구성이 되어 있구나 하고 봐주길 바란다.

-      UI구성

간단하게 UI디자인 해보자. 물론, 만들고 싶은 데로 디자인해도 상관없다. 필자는 개발자라 디자인 감각이 조금 떨어진다. 이상하더라도 이해해 주길 바란다!!

위 [그림 2]에서 View폴더가 있을 것이다. 그 안에 MainView.xaml 파일이 보일 것인데, 그 파일에 디자인 내용을 넣도록 하자. (디자인은 블렌드(blend)를 이용하면 편할 것이다.)

[그림 3] 디자인모습

 위 [그림 3]는 간단하게 디자인해 본 모습이다. 정말 간단하게 디자인 되어 있기 때문에 [그림 3]과 같이 디자인하기는 어렵지 않을 것이라고 생각이 든다.

ㅁ 커맨드(Command)연결

 위에서 우측을 보면 로그인 버튼이 있을 것이다. 이제 이를 클릭하면 해당 커맨드가 발생 하도록  해보자. 먼저 MainView를 만들었으므로 ViewModel도 만들도록 하자. 위 [그림 2]를 보면 View폴더에 MainViewModel.cs 클래스(Class)파일과 ViewModelBase.cs 클래스파일이 있는 것을 봤을 것이다. ViewModelBase 클래스는 ViewModel에서 있어야 하는 기본적인 코드는 넣어두고, 자식클래스에서 상속받아서 사용 할 수 있도록 하기 위해 만든 클래스이다.

[코드 1] ViewModelBase 클래스(Class)

 ViewModelBase 클래스에서 간단하게 INotifyPropertyChanged 인터페이스(Interface)를 상속받아서 OnPropertyChanged 메소드(Method)를 만들어 주었다. 이는 프로퍼티(Property)가 변경이 되면 바인딩요소가 변경이 될 수 있도록 알려주기 위해 이벤트를 발생시키는 메소드인 것 이다.

[코드 2] MainViewModel 클래스(Class)

 [코드 2]는 MainViewModel 클래스를 정의한 것이다. ViewModelBase클래스를 상속 받아서 OnPropertyChanged를 호출할 수 가 있다.

[코드 2]에서 보면 LoginCommand가 정의되어 있을 것이다. 이는 휴즈플로우 커맨드 패턴을 참조했기때문에 사용할수 있는 것인데, 휴즈플로우 커맨드에서 주로 StaticCommand와 InstantCommand를 사용할 수가 있다. StaticCommand는 이름 그대로 전역에서 이벤트를 받아야 할 때 사용하면 될 것이고, InstantCommand는 인스턴스가 생성이 되었을때만 사용할 것이면 InstantCommand를 사용하면 될 것이다. MainViewModel 클래스는 생성 될 때, 그리고 MainView에서만 커맨드를 받을 것 이기 때문에 InstantCommand를 사용했다.

이렇게 코드가 짜여졌다면 뷰와 뷰모델을 바인딩을 엮여주자.

[코드 4] MainView.xaml

 [코드 4]는 MainView XAML 코드이다. DataContext를 보면 MainViewModel이 바인딩 되어 있는 것을 알 수 있을 것이다. 이렇게 함으로서 뷰와 뷰모델이 바인딩 처리가 되었다. 이제 뷰모델에서 선언했던 LoginCommand를 이벤트 연결을 하도록 해보자.(블렌드를 이용하면 편리하다.)

[그림 4-1] Command 등록

 커맨드 연결하는 것은 비헤이비어 연결하듯 드래그해서 해당 객체에 붙어 주기만하면 된다.

[그림 4-2] 커맨스(Command) 속성 설정

 커맨드 속성 설정도 비헤이비어와 비슷하다. 먼저, SourceName과 EventName은 로그인 버튼을 선택하고, 어떤 이벤트가 일어났을 때 커맨드를 발생 시킬 것 인지를 지정하는 것이다. 그리고 Command를 현재 DataContext로 바인딩되어 이는 뷰모델에서 LoginCommand를 선택해주면 된다. 이렇게 하면 버튼 클릭했을 경우 해당 뷰모델로 이벤트가 들어 올 것인데, 그럼 그 이벤트를 받아서 로그인 관련 코드를 짜주면 되는 것이다.

지난 연재 내용을 통해서 비헤이비어(Behavior)에 대해서 간단히 알아 보았고, 예제를 통해서도 어느 정도 어떻게 사용되면 되는지 익혔을 것이다. 이는 실버라이트(Silverlight)를 처음 접하신 분들이라면 정말 편리한 친구이라는 것을 잘 실감할 수 없을 것 인데, 실버라이트2에서부터 계속 하셨던 분들이라면 정말 편이한 친구라는 것을 공감 할 수 있을 것이다.

 이번 시간에는 실버라이트3를 이용해 간단한 나만의 포토 갤러리는 만들어 보고자 한다. 이 내용은 2010년을 맞이하여 처음으로 실버라이트를 배우고자 하는 열정적인 분들에게 도움이 되는 자료가 되지 않을까 싶다. 물론, 기존에 실버라이트를 이용해서 개발하고 계신 분들에게도 조금은 유익한 정보도 있지 않을까 하는 생각이 든다.  다들 실무에서 잘 사용하고 있는 MVVM + Command패턴 이야기도 해보려 하기 때문이다. 또한, 지난 시간에 배웠던 비헤이비어(Behavior)도 같이 복습하면서 적용할 것 이기 때문에 기존 실버라이트 개발자들에게도 조금은 도움이 되는 자료가 있지 않을까 싶다.

ㅁ MVVM & Command 패턴

-      MVVM 패턴 ??

MVVM (Model-View-ViewModel)패턴은 MVC(Model-View-Controller)패턴과 비슷하다.

뷰(View)를 따로 두고, 뷰는 모델(Model)을 몰라도 되며, 모델 또한 뷰는 몰라도 된다. 뷰는 어디에도 종속적이지 않아야 하며, 모델 또한 그러하다. 뷰는 언제든지 변경이 가능하다는 것을 염두 해 두어야 하며, 그로 인해 Model이 영향을 주면 안 되기 때문이다. 이렇게 하면 좋은 점이 디자이너와 협업이 편리해 진다. 디자이너는 뷰만 신경 써서 이뿌게 디자인해서 결과물을 만들어 주면 되고, 개발자는 모델과 뷰모델(ViewModel)를 잘 관리해 주면 되기 때문이다. 나중에 개발자 또는 디자이너가 바인딩(Binding)만 잘 엮어 주면 정말 편리한 패턴이다. 또한, 유지보수하기가 편리해진다는 장점도 있다. 수정사항이 들어오면 디자이너는 뷰만, 개발자는 뷰모델만 확인해서 수정하면 될 것 이기 때문이다.

[그림 1] MVVM 패턴

 위 그림을 보면 이해가 더 빠를 것 이다. 우리가 XAML를 만들면 코드 비하인드(Code-Behind)와함께 XAML이 생겨 날 것이다. 보통은 XAML파일에서 디자인을 하다고 객체에 x:Name을 주어 코드 비하인드에서 여러 가지 코드를 작성했을 것 이다. 이렇게 되면 차후에 새로운 디자인 수정 요청사항이 나오면, 새 XAML파일에서는 꼭 x:Name으로  명시 한 객체가 있어야 하며, 개발 코드 또한 복사해서 붙어 넣기 하거나, 객체 이름을 찾아서 다시 값을 세팅해 주어야 할 것이다.  하지만, MVVM에서의 View는 XAML과 Code-Behind를 하나의 뷰로 본다. 그리고 모델은 DB또는 XML에서 가지고 온 데이터모델(DataModel)을 의미한다. 아까 위에서도 말했듯, [그림 1]에서도 보듯 뷰와 모델은 독립적이어서, 서로 연관되어 있지 않다. 다만 중간에 뷰모델만 있을 뿐이다. 그렇다면 뷰모델은 어떤 일을 하는 녀석인지 알아 보자!!

뷰모델은 모델이 생성되거나, 변경 되었을 때 바인딩으로 엮여져 있는 뷰에게 값을 변경시켜주는 역할을 한다. 뷰모델과 뷰는 바인딩(Binding)식으로 데이터를 주고 받기 때문에 뷰 객체에 x:Name을 지정해 줄 필요가 없다. 그럼 뷰에서 이벤트처리는 어떻게 할 것 인지에 대한 고민이 생길 것 이다. 이 해결 방법은 MVVM패턴과 찰떡궁합인 커맨드(Command) 패턴으로 해결 할 수 있다.

-      Command 패턴??

 커맨드(Command)패턴이란 주로 애플리케이션(Application) 전역에서 동일하게 받을 수 있는 사용자의 제어 명령에 대한 이벤트를 효과적이고, 표준적으로 받기 위한 구현 방법이다. 커맨드패턴은 특히 MVVM처럼 뷰와 모델이 분리된 환경에서 매우 효과적으로 코드를 짤 수 있게 도와주는 역할을 한다. 또한, 커맨드패턴은 실버라이트 3에서 새롭게 등장한 비헤이비어와 만나 조금 더 쉽게 이용할 수 있게 되었다. 이는 휴즈플로우(HugeFlow)에서 오픈 소스로 올려놓은 HugeFlow.CommandPattern 어셈블리 파일(.dll)을 이용하면 된다. 물론 소스까지 공개되어 있으니 받아서 변경해도 된다.

 그럼 이제부터 본격적으로 MVVM + Command 패턴, 비헤이비어를 이용해서 나만의 포토 갤러리를 만들어 볼 것인데, 코드 하나하나 다 설명하기에는 시간이 많이 걸리고 내용도 많아서 주요 내용만 알아보도록 할 것이다. 하지만, 필자가 만든 소스는 블로그를 통해 올려 놓을 것이니, 참고해서 만들어도 괜찮을 것이다.

우선 Flickr API 키를 발급 받도록 하자. 이 예제에서는 따로 DB나 서비스(Service)를 만들지 않고 Flickr API를 이용할 것이기 때문에 키 발급을 꼭 해야 한다.

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

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은 블랜드에서 대충 디자인한 모습을 보여주고 있습니다. 그럼 이제 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과 사용법이 비슷하니, 나중에 사용해 보시면 도움이 되실 겁니다.