使用DoubleAnimation的VisualTreeHelper只工作一次

Question

一些代码来查看发生了什么：

XAML文件：

<!-- put this code into your page xaml code-->

<Page.Resources>
    <Style x:Name="opabuttonstyle" TargetType="Button">
        <Setter Property="Margin" Value="10" />
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="VerticalAlignment" Value="Center" />
    </Style>
</Page.Resources>

<Grid Background="{StaticResource BackgroundGradient-Blue}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid Grid.Row="0" HorizontalAlignment="Center">
        <Button
            x:Name="testingIsTheFutureButton"
            Grid.Row="0"
            Grid.Column="0"
            Click="testingIsTheFutureButton_Click"
            Content="Opacity Animation"
            Style="{StaticResource opabuttonstyle}" />
    </Grid>
    <Grid Grid.Row="1">
        <StackPanel x:Name="stackingStackPanel" HorizontalAlignment="Center">
            <TextBlock Text="Element" />
            <TextBlock Text="Element" />
            <TextBlock Text="Element" />
            <TextBlock Text="Element" />
            <TextBlock Text="Element" />
            <TextBlock Text="Element" />
            <TextBlock Text="Element" />
            <TextBlock Text="Element" />
            <TextBlock Text="Element" />
            <TextBlock Text="Element" />
            <TextBlock Text="Element" />
            <TextBlock Text="Element" />
            <TextBlock Text="Element" />
            <TextBlock Text="Element" />
            <TextBlock Text="Element" />
            <TextBlock Text="Element" />
        </StackPanel>
    </Grid>
</Grid>

类文件SingleAnimations.cs：

// This function takes UIElement and DoubleAnimate it to fade in.
public static void SimpleElementFadeIn(object sender, int fadeTime, int delay)
{
        UIElement element = sender as UIElement;    //bierz element
        Storyboard storyboard = new Storyboard();
        DoubleAnimation doubleAnimation = new DoubleAnimation();
        doubleAnimation.BeginTime = new TimeSpan(0, 0, 0, 0, delay);
        doubleAnimation.Duration = new Duration(new TimeSpan(0, 0, 0, 0, fadeTime));
        doubleAnimation.From = 0;
        doubleAnimation.To = 1;
        Storyboard.SetTarget(doubleAnimation, element);
        Storyboard.SetTargetProperty(doubleAnimation, "Opacity");
        storyboard.Children.Add(doubleAnimation);
        storyboard.Begin();
}

类文件CollectionAnimations.cs：

// This function goes through every children element in UIElement (grid, 
//stackpanel or whatever we send there) and animates it using previous function
public static void OpacityWithChildren_Light(object sender, int delay)
{
    SetOpacityToZero_Deep(sender);  // set opacity to 0 to all elements before animation
    UIElement rootElement = sender as UIElement;   
    int childCount= VisualTreeHelper.GetChildrenCount(rootElement);
    if (childCount > 0)
    {
        for (int index = 0; index < childCount; index++)
        {
                UIElement element = (UIElement)VisualTreeHelper.GetChild(rootElement, index);
                SingleAnimations.SimpleElementFadeIn(element, 100, delay * index);
        }
    }
}

// This function goes through every children element like the funtion above
// and sets opacity of these elements to 0 (so every element is invisible before it's animated)
public static void SetOpacityToZero_Deep(object sender)
{
    UIElement rootElement = sender as UIElement;
    int childNumber = VisualTreeHelper.GetChildrenCount(rootElement);
    if (childNumber > 0)
    {
        for (int index = 0; index < childNumber; index++)
        {
            UIElement element = (UIElement)VisualTreeHelper.GetChild(rootElement, index);
                element.Opacity = 0;
        }
    }
}

来启动我称之为的动画

CollectionAnimations.OpacityWithChildren_Light(stackingStackPanel, 50);

在button_click事件中。

我所期待的是，所有的TextBlocks在StackPanel中消失，并将一个一个地淡出。这种情况正在发生，但仅限于第一次使用。如果我再次单击按钮，那么所有的按钮都是可见的，并且是一个一个的动画--而不是我想要发生的事情。如果我回到MainPage并再次输入页面，它将像以前一样再次工作(一次)。

也许我该去清理些纸盒。我在文档中没有遇到过这样的情况，或者只是错过了它。在独立动画中，没有提到过这样的东西。我搞砸了这段代码，尝试了不同的东西和方法，但没有结果。

Answer 1

我建议您应该能够使用两个故事板来实现这一点，一个将Opacity设置为0，另一个设置为您想要的DoubleAnimation。

因此，我们不需要通过Opacity将UIElement.Opacity设置为0。当集合Storyboard的Opacity为零时，我们应该能够开始淡入的Storyboard。

例如：

SingleAnimation类：

internal class SingleAnimations
{
    public static DoubleAnimation SetToZero(object sender)
    {
        var element = sender as UIElement;
        DoubleAnimation doubleAnimation = new DoubleAnimation();
        doubleAnimation.BeginTime = new TimeSpan(0, 0, 0, 0, 0);
        doubleAnimation.Duration = new Duration(new TimeSpan(0, 0, 0, 0, 0));
        doubleAnimation.From = 1;
        doubleAnimation.To = 0;
        Storyboard.SetTarget(doubleAnimation, element);
        Storyboard.SetTargetProperty(doubleAnimation, "Opacity");
        return doubleAnimation;

    }

    public static DoubleAnimation SimpleElementFadeIn(object sender, int fadeTime, int delay)
    {
        var element = sender as UIElement;
        DoubleAnimation doubleAnimation = new DoubleAnimation();
        doubleAnimation.BeginTime = new TimeSpan(0, 0, 0, 0, delay);
        doubleAnimation.Duration = new Duration(new TimeSpan(0, 0, 0, 0, fadeTime));
        doubleAnimation.From = 0;
        doubleAnimation.To = 1;
        Storyboard.SetTarget(doubleAnimation, element);
        Storyboard.SetTargetProperty(doubleAnimation, "Opacity");
        return doubleAnimation;

    }

OpacityWithChildren_Light方法：

public static  void OpacityWithChildren_Light(object sender, int delay)
{
    var storyboardOfSetOpacityToZero = new Storyboard();
    var storyboardFadeIn = new Storyboard();
    UIElement rootElement = sender as UIElement;
    int childCount = VisualTreeHelper.GetChildrenCount(rootElement);
    if (childCount > 0)
    {
        for (int index = 0; index < childCount; index++)
        {
            UIElement element = (UIElement)VisualTreeHelper.GetChild(rootElement, index);
            var SetOpacityToZero = SingleAnimations.SetToZero(element);
            var SetOpacityToOne = SingleAnimations.SimpleElementFadeIn(element, 100, delay * index);
            storyboardOfSetOpacityToZero.Children.Add(SetOpacityToZero);
            storyboardFadeIn.Children.Add(SetOpacityToOne);
        }
        storyboardOfSetOpacityToZero.Begin();
        storyboardOfSetOpacityToZero.Completed += (s, e) => { storyboardFadeIn.Begin(); };
    }
}