Neo's Programming

애니메이션 효과 나타내는 코드이다. 버튼을 누르면 스토리보드가 나타났다 사라지고 한다.

리소스 측에 정의 한 내용들의 x:key는 키 값으로 해당하는 스토리 보드를 구분하며 DoubleAnimation의 To는 TargetProperty에 해당하는 대상과 일치하는 내용이다.

XAML 코드는 다음과 같고

<Window x:Class="storyboard_animation.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="296" Width="355">
    <Window.Resources>
        <Storyboard x:Key="show">
            <DoubleAnimation To="300" Duration="0:0:0.5" Storyboard.TargetName="m_board" Storyboard.TargetProperty="Width"/>
        </Storyboard>
        <Storyboard x:Key="hide">
            <DoubleAnimation To="0" Duration="0:0:0.5" Storyboard.TargetName="m_board" Storyboard.TargetProperty="Width"/>
        </Storyboard>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <Button x:Name="btn" Height="20" Content="hide" Click="btn_Click" FontSize="10" FontFamily="돋움체"/>
            <Border x:Name="m_board" Background="LightBlue" CornerRadius="30" Height="242" Width="300"/>
        </StackPanel>
    </Grid>
</Window>

호출을 할 경우에는 var story = this.Resources[key] as Storyboard; 을 이용하여 리소스에서 불러온 후 Begin() 으로 실행을 해 준다.

다른 경우의 샘플 예제를 하나 더 보자. 버튼을 눌렀을 때 각기 나오는 내용이다. 실행을 해 보면 페이드 인 아웃이 되는 것을 확인 할 수가 있다.

<StackPanel Margin="20">
        <!-- Clicking this button animates its opacity. -->
        <Button Name="opacityAnimatedButton" Content="A Button" Click="opacityAnimatedButton_Click">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="opacityAnimatedButton"
                                Storyboard.TargetProperty="(Button.Opacity)"
                                From="1" To="0" Duration="0:0:5" AutoReverse="True"  />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>

        <!-- Clicking this button animates the opacity of the brush
         used to paint its background. -->
        <Button Content="A Button" >
            <Button.Background>
                <SolidColorBrush x:Name="MyAnimatedBrush" Color="Orange" />
            </Button.Background>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="MyAnimatedBrush"
                                Storyboard.TargetProperty="(Brush.Opacity)"
                                From="1" To="0" Duration="0:0:5" AutoReverse="True"  />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </StackPanel>

윗 버튼은 테두리와 함께 모두 사졌다 나타나며 아래 버튼은 테두리를 유지한 채 배경색들이 바뀌는 것을 볼 수가 있다.