Silverlight SDK ::

'Behavior'에 해당되는 글 2건

2009/07/20 Behavior class in Blend 3 RC (2)
2009/06/18 Behavior 만들기

Behavior class in Blend 3 RC

Behavior 2009/07/20 16:00

최근에 업데이트 된 Blend 3 RC에는 기본적으로 Behavior class 8가지(ChangePropertyAction, ControlStoryboardAction, FluideBahavior, GoToStateAction, HyperlinkAction, MouseDragElementBehavior, PlaySoundAction, RemoveElementAction) 를 제공합니다.

8가지 Behavior 는 정확히 표현하자면, Behavior와 Action으로 명명 되 있는데요. Behavior는 System.Windows.Interativity의 Behavior 클래스를 상속받아 구현 한 것이고, Action은 System.Windows.Interactivity의 TriggerAction이나 TargetedTriggerAction등을 상속받아 구현 된 것입니다.

그럼 각각의 Behavior의 사용 방법을 간략하게 소개 하도록 하겠습니다.

TargetedTriggerAction
- Trigger에 의해서 실행 되는 Action을 지정. Action의 대상을 지정할 수 있습니다.

ChangePropertyAction - Trigger에 의해서 Target의 Property를 변경 하는 Action.
- TargetName : Property가 변결 될 Target
- PropertyName : 변경 할 Property 선택
- Value : 변경 될 Property 값 설정
- Animation Properties : 1) Duration : Properties 의 값이 변경되는 시간을 설정
2) Ease : Properties의 값이 변경 될 때의 Easing Animation 설정.

GoToStateAction - Trigger에 의해서 Target의 VisualState를 원하는 State로 변경하는 Action.
- TargetName : State가 변경 될 Target
- StateName : 변경 될 State 지정

RemoveElementAction - Trigger에 의해서 지정된 Dependency Object를 제거하는 Action.
- TargetName : 제거될 Dependency Object 선택.

TriggerAction
- Trigger에 의해서 실행 되는 Action을 지정.

ControlStoryboardAction - Trigger에 의해서 선택 된 Storyboard 를 컨트롤(Play, Pause, Stop 등) 하는 Action.
- ControlStoaryboardOption : 컨트롤 될 Storyboard의 기능을 지정합니다. ex) Play, Pause, Stop 등
- Storyboard1 : 컨트롤 될 Storyboard를 지정합니다.

HyperlinkAction - Trigger에 의해서 지정된 Uri 로 이동하는 Action.
- NavigateUri : 이동 될 Uri 지정
- TargetWindow : 새창(_blank)을 띄울 것인지 현재 페이지에서 바로 이동(_self)할 것인지 등을 선택.

PlaySoundAction - Trigger에 의해서 지정된 Audio를 재생하는 Action.
- Source : 재생 될 Audio 선택 (mp3, asf, asx, wma, wmv 지원)
- Volumn : 볼륨의 크기 지정.

Behavior
- Attached 된 Dependency object의 동작을 지정합니다.

FluidMoveBehavior - Attached 된 Dependency Object는 Silverlight App. 첫 로드시나, Resize 등에 의해서 Dependency Object가 위치하는 곳이 변경 됐을때 유동적으로 움직이게 됩니다.
- Duration : 움직이는 시간 설정
- EaseX : Dependency Object가 위치하는 X좌표로의 이동시 Easing Animation을 지정합니다.
- EaseY : Dependency Object가 위치하는 Y좌표로의 이동시 Easing Animation을 지정합니다.

MouseDragElementBehavior - Attached 된 Dependency Object는 마우스로 드래그 할 수 있는 동작을 하게 됩니다.

[Sample]
위 8가지 Behavior 직접 구현 된 Sample입니다.

[Sample Code]
위 예제의 샘플입니다. Behavior를 사용했으니, Blend에서만 열어보심 되겠네요 :D

SLKorea.0722.BehaviorDesignFinish.zip

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Behavior' 카테고리의 다른 글

Behavior class in Blend 3 RC (2)	2009/07/20
Behavior 만들기 (0)	2009/06/18

Posted by Min-gu, Kim

TAG Behavior, Blend3, Silverlight, Silverlight3, TargetedTriggerAction, TriggerAction, 실버라이트, 실버라이트3

트랙백 0개, 댓글 2개가 달렸습니다

Behavior 만들기

Behavior 2009/06/18 17:58

Silverlight 3 에서는 Behavior 를 지원합니다.

Behavior란 사전적인 해석에서 알 수 있듯이, 동작을 뜻합니다. 이 동작이란 것은, Dependency Object의 동작이 될 수도 있고, FrameworkElement의 Event에 대한 Trigger가 될 수 있습니다.

Behavior를 Silverlight 3 에서 구현하는 방법 입니다.

1. Dependency object 의 Behavior 정의

우선, Dependency object의 Behavior를 정의 하기 위해서는,

Program Files > Microsoft Expression > Bledn 3 Preview > Libraries > Silverlight > Microsoft.Expression.Interativity.dll 을 참조 추가 해야 합니다.

참조 추가를 한 뒤, Microsoft.Expression.Interactivity.dll 에 있는 Behavior<T> : where T : DependencyObject 를 상속 받아서 Behavior 클래스를 만듭니다.

public class DragBehavior : Microsoft.Expression.Interactivity.Behavior<UIElement>
{
}

그리고, DependencyObject에 Behavior를 Add 된 경우 실행 되는 Behavior.OnAttached 메소드를 구현(override)하여, Behavior를 정의합니다.

public class DragBehavior : Behavior<UIElement>
{
    private bool isDragging = false;
    private UIElement attachedElement;
    private UserControl parent;

    Point lastPosition;
    TranslateTransform translatePosition;

    protected override void OnAttached()
    {
        attachedElement = this.AssociatedObject;
        parent = Application.Current.RootVisual as UserControl;
        attachedElement.MouseLeftButtonDown += new MouseButtonEventHandler(MouseIsDown);
        attachedElement.MouseLeftButtonUp += new MouseButtonEventHandler(MouseIsUp);
        attachedElement.MouseMove += new MouseEventHandler(MouseIsMoving);
    }

    void MouseIsMoving(object sender, MouseEventArgs e)
    {
        if (isDragging)
        {
            Point currentPosition = e.GetPosition(parent);

            double dX = currentPosition.X - lastPosition.X;
            double dY = currentPosition.Y - lastPosition.Y;

            this.lastPosition = currentPosition;

            Transform oldTransform = attachedElement.RenderTransform;
            TransformGroup rt = new TransformGroup();
            TranslateTransform newPos = new TranslateTransform();
            newPos.X = dX;
            newPos.Y = dY;

            translatePosition = newPos;

            if (oldTransform != null)
            {
                rt.Children.Add(oldTransform);
            }
            rt.Children.Add(newPos);

            MatrixTransform mt = new MatrixTransform();
            mt.Matrix = rt.Value;

            attachedElement.RenderTransform = mt;
        }
    }

    void MouseIsUp(object sender, MouseButtonEventArgs e)
    {
        isDragging = false;

        attachedElement.ReleaseMouseCapture();
    }

    void MouseIsDown(object sender, MouseButtonEventArgs e)
    {
        isDragging = true;
        lastPosition = e.GetPosition(parent);
        attachedElement.CaptureMouse();
    }
}

참고로 위 코드는 Sample Silverlight 3 Behaviors 에서 다운 받은 자료 중 하나로 UIElement를 Drag 가능하도록 하는 Behavior입니다.

Behavior class 를 정의 한 뒤 Expression Blend 3 Preview에서 솔루션을 Open하면, Asset Library의 Behaviors에 추가 되신 것을 확인 할 수 있습니다.

작성하신 DragBehavior를 Drag가 가능하게 하기 위한 DependencyObject에 Drag하여 추가하시면 비하인드 코드 상에서 아무런 조작을 하지 않아도, DragBehavior가 Add 된 DependencyObject는 실행시 Drag가 가능하게 됩니다.

2. FrameworkElement의 Event에 대한 Trigger 구현

Microsoft.Expression.Interativity.TargetedTriggerAction<FrameworkElement> 를 상속받아 대상이 되는 FrameworkElement의 Event에 대한 Trigger를 구현하는 Behavior class를 정의 할 수 있습니다.

public class PopupBehavior : Microsoft.Expression.Interactivity.TargetedTriggerAction<FrameworkElement>
{
    protected override void Invoke(object parameter)
    {
        MessageBox.Show("Popup!");
    }
}

위 코드는 FrameworkElement의 Event에 대하여 MessageBox를 띄워주게 될 것입니다.

이렇게 구현 된 클래스를 빌드 한 뒤, Microsoft Expression Blend 3 Preview에서 솔루션을 Open하면 Asset Library의 Behaviors 에 추가 되 있습니다. PopupBehavior를 Button에 연결 해 보겠습니다.

TargetedTriggerAction Behavior는 Target이 되는 FrameworkElemet에 연결 시, Properties에 Trigger 속성을 설정하는 부분이 나옵니다. 여기서 EventName을 정하면, 해당하는 Event의 Trigger로 TargetedTriggerAction Behavior가 동작하게 됩니다. 정확히는 override 된 TargetedTriggerAction.Invoke(object parameter) 함수가 실행 되는 것입니다.

또, Property를 추가하여 사용자 원하는 Message를 입력받아 출력할 수 있도록 할 수 있습니다.

public class PopupBehavior : Microsoft.Expression.Interactivity.TargetedTriggerAction<FrameworkElement>
{
    [Category("Message Box Properties")]
    public string PopupText
    {
        get { return (string)GetValue(PopupTextProperty); }
        set { SetValue(PopupTextProperty, value); }
    }

    public static readonly DependencyProperty PopupTextProperty =     DependencyProperty.Register("Popup Text", typeof(string), typeof(PopupBehavior), new PropertyMetadata("Input Popup Text!"));

    protected override void Invoke(object parameter)
    {
        MessageBox.Show(PopupText);
    }
}

[Category("카테고리명")] 으로 Property에 대한 Category를 지정하게 되면, Microsoft Expression Blend 3 Preivew 상에서 다음 그림에서 처럼 표시 됩니다.