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

在 main() 中

{
   timer.Tick += timer_Tick;
}

以及刻度的事件处理程序

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

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

timer.Start();

希望它有帮助:)而且还不算太晚;)