[C#/SILVERLIGHT] Storyboard 엘리먼트 : 사각형 움직이기

■ Storyboard 엘리먼트를 사용해 사각형을 움직이는 방법을 보여준다.

▶ 예제 코드 (XAML)


<Canvas x:Name="grid">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="(Canvas.Top)"
                Duration="00:00:01"
                SpeedRatio="2"
                BeginTime="00:00:00"
                AutoReverse="True"
                RepeatBehavior="2x"
                FillBehavior="HoldEnd"
                From="0"
                To="100" />
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="(Canvas.Left)"
                Duration="00:00:01"
                SpeedRatio="2"
                BeginTime="00:00:00"
                AutoReverse="True"
                RepeatBehavior="2x"
                FillBehavior="HoldEnd"
                From="0"
                To="100" />
        </Storyboard>
    </Canvas.Resources>
    <Rectangle
        x:Name="rectangle"
        Width="100"
        Height="100"
        Fill="Red"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
</Canvas>

<Canvas.Resources>

<DoubleAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="(Canvas.Top)"

Duration="00:00:01"

SpeedRatio="2"

BeginTime="00:00:00"

AutoReverse="True"

RepeatBehavior="2x"

FillBehavior="HoldEnd"

From="0"

To="100" />

<DoubleAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="(Canvas.Left)"

Duration="00:00:01"

SpeedRatio="2"

BeginTime="00:00:00"

AutoReverse="True"

RepeatBehavior="2x"

FillBehavior="HoldEnd"

From="0"

To="100" />

</Storyboard>

</Canvas.Resources>

<Rectangle

x:Name="rectangle"

Width="100"

Height="100"

Fill="Red"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

</Canvas>

▶ 예제 코드 (C#)


using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 다운시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 다운시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 다운시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 다운시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

this.storyboard.Begin();

}

#endregion