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

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>

就我而言，我想要一个像淡入淡出那样移动的动画，这就是为什么我在每个网格中制作两个故事板。我希望我的应用程序运行的第一件事是。 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();

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

Answer 2

一旦您将任何元素的可见性设置为折叠，您将无法看到任何动画，因为该元素已经折叠。我自己也遇到了这个问题，想在项目从列表中消失时缓解。我的解决方案是向我的 ViewModel 添加另一个属性 IsRemoving，然后在删除元素之前将其设置为 true。然后，您可以将动画绑定到 IsRemoving 属性的更改以在元素上设置 Visibility 之前运行动画。

您可以使用一些 async/await 魔法来完成这样的技巧。这将延迟 1 秒，然后才实际移除该项目。因为等待延迟，所以 UI 不会挂起。

public async void RemoveItem(SomeItem item){
    IsRemoving = true;
    await Task.Delay(1000);
    <Your collection>.Remove(item);
    IsRemoving = false;
}

编辑：在 XAML 中：

<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsRemoving}" Value="True">
    <DataTrigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="border">
                    <EasingDoubleKeyFrame KeyTime="0" Value="1">
                        <EasingDoubleKeyFrame.EasingFunction>
                            <QuinticEase EasingMode="EaseOut"></QuinticEase>
                        </EasingDoubleKeyFrame.EasingFunction>
                    </EasingDoubleKeyFrame>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
                        <EasingDoubleKeyFrame.EasingFunction>
                            <QuinticEase EasingMode="EaseOut"></QuinticEase>
                        </EasingDoubleKeyFrame.EasingFunction>
                    </EasingDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </BeginStoryboard>
    </DataTrigger.EnterActions>
</DataTrigger>

希望对你有帮助:-)