이 내용은 월간 Web에 2010년 01월호에 기고했던 내용 입니다!!
[바로가기]
실전활용!! - Behavior를 사용하자 (1)
실전활용!! - Behavior를 사용하자 (2)
실전활용!! - Behavior를 사용하자 (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파일에서 열심히 이벤트를 정의해서 작성하실 겁니다. 아래 코드와 같이 말이지요.
|
<StackPanel>
<!-- Target Image Control-->
<Image x:Name="image" Source="/Demo;Component/Resource/Image01.JPG" Height="300"/>
<!-- Button 모음 -->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button Content="안보이게" x:Name="Button01" Click="Button01_Click" ></Button>
<Button Content="보이게" x:Name="Button02" Click="Button02_Click" ></Button>
</StackPanel>
</StackPanel> |
[코드 1-1] XAML 파일 내용
|
private void Button01_Click(object sender, RoutedEventArgs e)
{
image.Opacity = 0;
}
private void Button02_Click(object sender, RoutedEventArgs e)
{
image.Opacity = 1;
} |
[코드 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종류의 속성이 보일 겁니다. 간단하게 설명하자면 아래와 같습니다.
|
- Trigger 관련 속성
. TriggerType : TriggerType은 액션(Action)이 일어나기 위한 특정 조건의 타입을 지정한다고 생각하시면 될 것 같습니다. 즉, 지금 버튼 컨트롤에 ChangePropertyAction이 붙어 있으니깐, 버튼 컨트롤에서의 조건 타입을 말하는 것이겠지요, 그래서 저는 EventTrigger을 선택했습니다. (New 버튼을 클릭해서 선택 함.)
. SourecName : 액션을 발생 시킬 컨트롤을 선택합니다. 이는 이미 버튼컨트롤에 붙어 놨기때문에 따로 지정하지 않으셔도 됩니다.
. EventName : 버튼 컨트롤에서 어떤 일이 일어났을 때 액션을 줄 것인지 이벤트를 선택합니다. 저는 버튼컨트롤의 기본 이벤트인 Click을 설정했습니다.
- Commom Properties 관련 속성
. TargetName : 액션을 발생 시킬 컨트롤의 이름을 지정합니다. 이름을 지정하는 텍스트박스 옆에 동그란 버튼이 있을 텐데요, 이를 이용해서 원하는 객체를 선택합니다.(클릭한 후 드래그해서 원하는 객체를 선택합니다.)
. PropertyName : 액션이 일어났을 때 변경 할 속성 이름을 지정합니다. 저는 버튼 클릭했을 때 Opacity를 0(또는 1)으로 만들 것이기 때문에 Opacity속성으로 지정했습니다.
. Value : 변경될 속성의 값을 지정 합니다.
- Animation Properties 관련 속성
. Ease : 컨트롤의 값이 변경될 때 사용할 애니메이션을 지정할 수 있습니다.
. Duration : Duration은 Ease 프로퍼티가 설정된 경우에만 의미가 있는 프로퍼티로, 애니메이션의 재성 속도를 의미합니다. |
위와 같이 설정을 하고 실행해 보시면, 앞 전에 코드로 작성했던 부분과 똑같이 동작하는 걸 보실 수 있을 겁니다. 또한 XAML의 코드 비하인드애서 코드를 작성하지 않아도 되니 깔끔한 코드가 나올 수 있습니다. 나머지 GoToStateAction, RemoveElementAction은 간단히 설명하고 넘어 가도록 하겠습니다.
GoToStateAction은 객체의 State가 변경하고자 할 때 사용되는데요, 실버라이트로 개발을 해보셨던 분이라면 “VisualStateManager.GoToState “ 라고 기억하실 겁니다. VisualStateGroup을 만들어서 코드비하인드에서 해당 이벤트가 들어오면 GoToState함수를 이용해 애니메이션을 실행시켰을 것입니다. GoToStateAction을 이용하면 또한 코드 비하인드에서 따로 코드를 작성해 줄 필요가 없습니다.
RemoveElementAction은 객체를 삭제 하고자 할 때 사용됩니다. 즉, 어떤 버튼을 클릭했을 경우 해당 객체가 삭제되도록 하고 자 할 때 사용하면 유용합니다.
위 2가지 컨트롤 모두 ChangePropertyAction과 사용법이 비슷하니, 나중에 사용해 보시면 도움이 되실 겁니다.
Demo.zip
