I have a question, how can I make an animation running first before the visibility changed on an XAML element?
The situation should be like this.

```
<Grid Name=Header Visiblity="visible">
   <Grid.Resources>
      <Storyboard x:Name="HeaderGridUp">
           <DoubleAnimationUsingKeyFrames
           Storyboard.TargetProperty="Height"
           Storyboard.TargetName="HeaderGrid">

                 <EasingDoubleKeyFrame Value="30" KeyTime="00:00:02">
                     <EasingDoubleKeyFrame.EasingFunction>
                        <ExponentialEase EasingMode="EaseOut"/>
                     </EasingDoubleKeyFrame.EasingFunction>
                 </EasingDoubleKeyFrame>

            </DoubleAnimationUsingKeyFrames>
       </Storyboard>

       <Storyboard x:Name="HeaderGridDown">
            <DoubleAnimationUsingKeyFrames
            Storyboard.TargetProperty="Height"
            Storyboard.TargetName="HeaderGrid">

                  <EasingDoubleKeyFrame Value="30" KeyTime="00:00:02">
                       <EasingDoubleKeyFrame.EasingFunction>
                           <ExponentialEase EasingMode="EaseIn"/>
                       </EasingDoubleKeyFrame.EasingFunction>
                   </EasingDoubleKeyFrame>

             </DoubleAnimationUsingKeyFrames>
        </Storyboard>
   </Grid.Resources>
</Grid>

```

```
<Grid Name=Items Visiblity="collapsed">
    <Grid.Resources>
        <Storyboard x:Name="ItemsGridUp">
              <DoubleAnimationUsingKeyFrames
               Storyboard.TargetProperty="Height"
               Storyboard.TargetName="ItemsGrid">

                   <EasingDoubleKeyFrame Value="30" KeyTime="00:00:02">
                       <EasingDoubleKeyFrame.EasingFunction>
                            <ExponentialEase EasingMode="EaseOut"/>
                       </EasingDoubleKeyFrame.EasingFunction>
                   </EasingDoubleKeyFrame>

              </DoubleAnimationUsingKeyFrames>
          </Storyboard>

          <Storyboard x:Name="ItemsGridDown">
              <DoubleAnimationUsingKeyFrames
               Storyboard.TargetProperty="Height"
               Storyboard.TargetName="ItemsGrid">

                   <EasingDoubleKeyFrame Value="30" KeyTime="00:00:02">
                        <EasingDoubleKeyFrame.EasingFunction>
                              <ExponentialEase EasingMode="EaseIn"/>
                        </EasingDoubleKeyFrame.EasingFunction>
                   </EasingDoubleKeyFrame>

                </DoubleAnimationUsingKeyFrames>
           </Storyboard>
     </Grid.Resources>
</Grid>

```

In my case, I would like an animation that move like Fade in and Fade out, that's why I make two storyboard each grid. First thing that I want my app run is.
The current state of `HeaderGrid` is visible, and when I touch a button, this grid will be going up and the visibility changed to collapsed. After that, the `ItemsGrid` will be going up change it's visibility and then going up replacing the `HeaderGrid` original place. Then I do the revert of the exact thing.
Can I possible doing that? and I would like to do it in code behind.
Any answer will be appreciated. :)
Thank You.

Regards,

Budi Prasetyo