WPF Animation - не хочу использовать контент

Question

Это вопрос из двух частей от новичка в WPF анимации. Во-первых, вот мой код:

public void AnimatePaneBox(ContentControl destination, 
                           UIElementCollection source)
{
    // Create a NameScope for this page so that
    // Storyboards can be used.
    NameScope.SetNameScope(this, new NameScope());

    Canvas containerCanvas = new Canvas();
    int curInteration = 0;

    foreach (FrameworkElement element in source)
    {
        curInteration++;
        string iterationName = "iter" + curInteration.ToString();

        GeneralTransform tranform;

        try
        {
            // Try to get a transform object.  It may not be possible.
            // (ie if the source or dest is not docked then it 
            // will fail and we cannot animate.)
            tranform = element.TransformToVisual(destination);
        }
        catch (InvalidOperationException e)
        {
            return;
        }


        Point rootPoint = tranform.Transform(new Point(0, 0));

        Rect sourceRelativeRect = new Rect(
              rootPoint.X - (destination.ActualWidth / 2),
              rootPoint.Y - (destination.ActualHeight / 2), 
              element.ActualWidth, element.ActualHeight);

        RectangleGeometry myRectangleGeometry = new RectangleGeometry 
              { Rect = new Rect(0, 0, 0, 0) };

        // Assign the geometry a name so that
        // it can be targeted by a Storyboard.
        RegisterName(iterationName, myRectangleGeometry);              

        Path myPath = new Path
        {
            Fill = ((Canvas)element).Background,
            StrokeThickness = 1,
            Stroke = Brushes.Black,
            Data = myRectangleGeometry
        };


        RectAnimation myRectAnimation = new RectAnimation
        {
            Duration = TimeSpan.FromSeconds(1),
            FillBehavior = FillBehavior.Stop,
            AccelerationRatio = 1,
            // Set the From and To properties of the animation.
            From = sourceRelativeRect,
            To = new Rect(0, 0, 0, 0)
        };

        // Set the animation to target the Rect property
        // of the object named "MyAnimatedRectangleGeometry."
        Storyboard.SetTargetName(myRectAnimation, iterationName);
        Storyboard.SetTargetProperty(myRectAnimation, 
            new PropertyPath(RectangleGeometry.RectProperty));

        // Create a storyboard to apply the animation.
        Storyboard ellipseStoryboard = new Storyboard();
        ellipseStoryboard.Children.Add(myRectAnimation);
        containerCanvas.Children.Add(myPath);

        // Start the storyboard when the Path loads.
        myPath.Loaded += ((sender, e) => ellipseStoryboard.Begin(this));
    }

    containerCanvas.Background = Brushes.Transparent;

    destination.Content = containerCanvas;
}

Он принимает список объектов (из Dotway Панель застежек-молний ) и анимирует коробки, перемещающиеся от них к месту назначения.

Работает просто отлично, но чтобы заставить его работать, мне нужно перезаписать содержимое места назначения. Я могу восстановить его потом, но я бы предпочел найти способ сделать эту работу без этого. Я пытался создать EventTrigger и использовать объект BeginStoryboard, но когда я пытаюсь это сделать, я вообще не вижу никакой анимации.

Кроме того, я хотел бы знать, как я могу сделать так, чтобы эти анимации происходили по одному, а не все сразу. (Но это вторично по отношению к основному вопросу.)

Answer 1

1. Согласно предоставленному вами коду, его невозможно оживить без замены контента. Но вы всегда можете поместить два элемента управления в одну и ту же сетку, скажем ... Они будут занимать одно и то же место. Один будет заполнителем для контейнера анимации, а другой - вашего реального контента, который вы не хотите потерять.

2. Вместо того, чтобы запускать их все вместе в обработчике myPath.Loaded += (o, e) => ellipseStoryboard.Begin(this);, запускайте их один за другим. firstStoryboard.Completed += (o,e)=> nextStoryboard.Begin(this);