[C#/SILVERLIGHT] Button 엘리먼트 : Effect 속성에서 DropShadowEffect 객체를 사용해 애니메이션 만들기

■ Button 엘리먼트의 Effect 속성에서 DropShadowEffect 객체를 사용해 애니메이션을 만드는 방법을 보여준다.

▶ 예제 코드 (XAML)


<Grid>
    <Grid.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimation
                Storyboard.TargetName="dropShadowEffect"
                Storyboard.TargetProperty="ShadowDepth"
                AutoReverse="True"
                Duration="0:0:0.5"
                To="30" />
            <DoubleAnimation
                Storyboard.TargetName="dropShadowEffect"
                Storyboard.TargetProperty="BlurRadius"
                AutoReverse="True"
                Duration="0:0:0.5"
                To="10" />
            <DoubleAnimation
                Storyboard.TargetName="scaleTransform"
                Storyboard.TargetProperty="ScaleX"
                AutoReverse="True"
                Duration="0:0:0.5"
                To="1.5" />
            <DoubleAnimation
                Storyboard.TargetName="scaleTransform"
                Storyboard.TargetProperty="ScaleY"
                AutoReverse="True"
                Duration="0:0:0.5"
                To="1.5" />
            <DoubleAnimation
                Storyboard.TargetName="translateTransform"
                Storyboard.TargetProperty="X"
                AutoReverse="True"
                Duration="0:0:0.5"
                To="-30" />
            <DoubleAnimation
                Storyboard.TargetName="translateTransform"
                Storyboard.TargetProperty="Y"
                AutoReverse="True"
                Duration="0:0:0.5"
                To="-30" />
        </Storyboard>
    </Grid.Resources>
    <Button
        Width="200"
        Height="50"
        FontSize="16"
        Content="Click!"
        Click="button_Click">
        <Button.Effect>
            <DropShadowEffect x:Name="dropShadowEffect" />
        </Button.Effect>
        <Button.RenderTransform>
            <TransformGroup>
                <TranslateTransform x:Name="translateTransform" />
                <ScaleTransform x:Name="scaleTransform" />
            </TransformGroup>
        </Button.RenderTransform>
    </Button>
</Grid>

<Grid>

<Grid.Resources>

<DoubleAnimation

Storyboard.TargetName="dropShadowEffect"

Storyboard.TargetProperty="ShadowDepth"

AutoReverse="True"

Duration="0:0:0.5"

To="30" />

<DoubleAnimation

Storyboard.TargetName="dropShadowEffect"

Storyboard.TargetProperty="BlurRadius"

AutoReverse="True"

Duration="0:0:0.5"

To="10" />

<DoubleAnimation

Storyboard.TargetName="scaleTransform"

Storyboard.TargetProperty="ScaleX"

AutoReverse="True"

Duration="0:0:0.5"

To="1.5" />

<DoubleAnimation

Storyboard.TargetName="scaleTransform"

Storyboard.TargetProperty="ScaleY"

AutoReverse="True"

Duration="0:0:0.5"

To="1.5" />

<DoubleAnimation

Storyboard.TargetName="translateTransform"

Storyboard.TargetProperty="X"

AutoReverse="True"

Duration="0:0:0.5"

To="-30" />

<DoubleAnimation

Storyboard.TargetName="translateTransform"

Storyboard.TargetProperty="Y"

AutoReverse="True"

Duration="0:0:0.5"

To="-30" />

</Storyboard>

</Grid.Resources>

<Button

Width="200"

Height="50"

FontSize="16"

Content="Click!"

Click="button_Click">

<Button.Effect>

</Button.Effect>

<Button.RenderTransform>

</TransformGroup>

</Button.RenderTransform>

</Button>

</Grid>

▶ 예제 코드 (C#)


using System.Windows.Input;

#region 버튼 클릭시 처리하기 - button_Click(sender, e)

/// <summary>
/// 버튼 클릭시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void button_Click(object sender, RoutedEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

#region 버튼 클릭시 처리하기 - button_Click(sender, e)

/// <summary>

/// 버튼 클릭시 처리하기

/// </summary>

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

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

private void button_Click(object sender, RoutedEventArgs e)

{

this.storyboard.Begin();

}

#endregion