[C#/WPF] DropShadowBitmapEffect 엘리먼트 : 버튼 클릭시 그림자 효과 애니메이션 적용하기

■ DropShadowBitmapEffect 엘리먼트를 사용해 버튼 클릭시 그림자 효과 애니메이션을 적용하는 방법을 보여준다.

TestProject.zip

0.01MB

▶ MainWindow.xaml

<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="DropShadowBitmapEffect 엘리먼트 : 버튼 클릭시 그림자 효과 애니메이션 적용하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <Button
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Margin="50"
            Width="100"
            Height="30"
            Content="테스트">
            <Button.BitmapEffect>
                <DropShadowBitmapEffect x:Name="dropShadowBitmapEffect"
                    Color="Black"
                    ShadowDepth="0" />
            </Button.BitmapEffect>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <ThicknessAnimation
                                Storyboard.TargetProperty="Margin"
                                Duration="0:0:0.5"
                                From="50 50 50 50"
                                To="0 0 50 50"
                                AutoReverse="True" />
                            <DoubleAnimation
                                Storyboard.TargetName="dropShadowBitmapEffect"
                                Storyboard.TargetProperty="ShadowDepth"
                                From="0"
                                To="30"
                                Duration="0:0:0.5"
                                AutoReverse="True" />
                            <DoubleAnimation
                                Storyboard.TargetName="dropShadowBitmapEffect"
                                Storyboard.TargetProperty="Softness"
                                From="0"
                                To="1"
                                Duration="0:0:0.5"
                                AutoReverse="True" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</Window>