[C#/WPF] Ellipse 엘리먼트 : 커졌다 사라지는 동심원 애니메이션 설정하기

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="Ellipse 엘리먼트 : 커졌다 사라지는 동심원 애니메이션 설정하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Style TargetType="Ellipse">
            <Setter Property="VerticalAlignment"   Value="Center" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="Width"               Value="0"      />
            <Setter Property="Height"              Value="0"      />
            <Setter Property="StrokeThickness"     Value="2"      />
            <Style.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard >
                        <Storyboard
                            FillBehavior="Stop"
                            RepeatBehavior="Forever">
                            <DoubleAnimation
                                Storyboard.TargetProperty="Width"
                                Duration="0:0:5"
                                To="300" />
                            <DoubleAnimation
                                Storyboard.TargetProperty="Height"
                                Duration="0:0:5"
                                To="300" />
                            <DoubleAnimation
                                Storyboard.TargetProperty="Opacity"
                                Duration="0:0:5"
                                From="1"
                                To="0" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Ellipse Margin="20  0  0  0" Stroke="Red"      />
        <Ellipse Margin=" 0 10  0  0" Stroke="Orange"   />
        <Ellipse Margin=" 0  0 20  0" Stroke="Yellow"   />
        <Ellipse Margin=" 0  0  0 30" Stroke="Green"    />
        <Ellipse Margin=" 0  0  0  0" Stroke="Blue"     />
        <Ellipse Margin=" 0 30 10  0" Stroke="DarkBlue" />
        <Ellipse Margin="30  0  0 10" Stroke="Purple"   />
    </Grid>
</Window>