C# - Windows Phone 8，如何在更改元素的可见性之前先启动动画或 Storyboard

Question

我有一个问题，如何让动画在 XAML 元素的可见性发生变化之前先运行？情况应该是这样的。

<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>

在我的例子中，我想要一个像淡入和淡出一样移动的动画，这就是我为每个网格制作两个 Storyboard的原因。我希望我的应用程序运行的第一件事是。HeaderGrid 的当前状态是可见的，当我触摸一个按钮时，该网格将上升并且可见性变为折叠。之后，ItemsGrid 将向上更改其可见性，然后向上替换 HeaderGrid 原始位置。然后我恢复原样。我可以这样做吗？我想在后面的代码中做到这一点。任何答案将不胜感激。 :)谢谢。

问候，

布迪普拉塞蒂奥

Answer 1

你应该在 C# 中添加可见性代码的地方，你启动一个调度器计时器，间隔等于你的动画长度，当计时器滴答时改变可见性

DispatcherTimer timer = new DispatcherTimer();
timer.Interval = new TimeSpan(0,0,x); //length of your animation in seconds

在主函数中

{
   timer.Tick += timer_Tick;
}

和滴答声的事件处理程序

void timer_Tick(object sender, EventArgs e)
{
    timer.Stop();
    element.Visibility = Visibility.Visible; //or Collapsed
}

在你应该改变元素可见性的地方，只需启动计时器

timer.Start();

希望对您有所帮助 :) 而且还不算太晚 ;)