[WPF] Storyboard 이용하여 Visibility 제어

 Open Button과 Close Button이 각자 누를 때마다 서로 반전되어 화면에 보이는 상황이 있다고 하자.

 만약 MVVM 패턴에서 이를 제어하려고 한다면 Command를 Binding 하여 특정 변수를 Visivility에 바인딩하여 제어해야 할 것이다. 심지어 Converter를 작성해야한다. 

 굳이 그럴 필요 없이 Storyboard와 Event Trigger를 이용하여 이를 아래와 같이 제어 할 수 있다.

1. Event Trigger를 등록할 버튼에 이름을 지정해준다.
2. Event Trigger에 등록한 버튼 이름과 트리거에 물릴 이벤트를 연결한다.
3. 트리거가 발생될 때 사용될 Storyboard를 작성한다. 

<Window.Resources>
    <Storyboard x:Key="OpenMenu">
        <!--버튼 누르면 사라지도록-->
        <ObjectAnimationUsingKeyFrames  Storyboard.TargetProperty="(UIElement.Visibility)"  Storyboard.TargetName="ButtonOpenMenu">
            <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Hidden}"/>
        </ObjectAnimationUsingKeyFrames>
        <!--버튼 누르면 보이도록-->
        <ObjectAnimationUsingKeyFrames  Storyboard.TargetProperty="(UIElement.Visibility)"  Storyboard.TargetName="ButtonCloseMenu">
            <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="CloseMenu">
        <!--버튼 누르면 보이도록-->
        <ObjectAnimationUsingKeyFrames  Storyboard.TargetProperty="(UIElement.Visibility)"  Storyboard.TargetName="ButtonOpenMenu">
            <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
        </ObjectAnimationUsingKeyFrames>
        <!--버튼 누르면 사라지도록-->
        <ObjectAnimationUsingKeyFrames  Storyboard.TargetProperty="(UIElement.Visibility)"  Storyboard.TargetName="ButtonCloseMenu">
            <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Hidden}"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>

<Window.Triggers>
    <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonOpenMenu">
        <BeginStoryboard Storyboard="{StaticResource OpenMenu}"/>
    </EventTrigger>
    <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonCloseMenu">
        <BeginStoryboard Storyboard="{StaticResource CloseMenu}"/>
    </EventTrigger>
</Window.Triggers>

<Grid>
    <Button Focusable="False" x:Name="ButtonOpenMenu"  Height="60" Width="60">
    <Button Focusable="False" x:Name="ButtonCloseMenu"  Visibility="Collapsed" Height="60" Width="60"/>
</Grid>