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>

就我而言，我希望动画像Fade in和Fade一样移动，这就是我为每个网格制作两个故事板的原因。我希望我的应用程序运行的第一件事是。 HeaderGrid的当前状态是可见的，当我触摸按钮时，此网格将会上升并且可见性更改为折叠。在此之后，ItemsGrid将会更改其可见性，然后更换HeaderGrid原始位置。然后我做了确切事情的恢复。我能做到吗？我想在后面的代码中做到这一点。任何答案将不胜感激。 :) 谢谢。

此致

Budi Prasetyo

Answer 1

你应该在c＃中添加可见性代码，你启动一个dispatchertimer，其间隔等于你的动画长度，当计时器滴答时改变可见性

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

在main（）

中

{
   timer.Tick += timer_Tick;
}

和tick的事件处理程序

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

并且您应该更改元素的可见性，只需启动计时器

timer.Start();

希望它有所帮助:)并且不会太晚;）

Answer 2

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

你可以使用一些async / await magic来做这样的伎俩。在实际删除项目之前，这将延迟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>

希望它有所帮助： - ）

C＃ - Windows Phone 8，在更改Element的可见性之前，如何首先启动动画或故事板

2 个答案: