Search code examples
wpfanimationuser-controlsstackpanel

How to add scale animation to the loading user controls


I want to add animation to the loading user controls in a StackPanel.

So I add these lines to the existing project :

control.Loaded += UserControlLoaded;

and

    public void UserControlLoaded(object sender, System.Windows.RoutedEventArgs e)
    {
        UserControl control = (UserControl)sender;

        DoubleAnimation fadeInAnimation = new DoubleAnimation(0, 1, new Duration(TimeSpan.FromSeconds(5)));
        Storyboard.SetTarget(fadeInAnimation, control);
        Storyboard.SetTargetProperty(fadeInAnimation, new PropertyPath(UIElement.OpacityProperty));
        Storyboard sb = new Storyboard();
        sb.Children.Add(fadeInAnimation);
        sb.Begin();
    }

It works good but I want to change it to scale the user control in both axis from 0 to 1 within 2 seconds but I can't find the code to set target property of the story board to the LayoutTransform X and Y axis !

The transform was made in MS Blend by this way :

How can I do it programmatically.

Thanks in advance for your kind attention.


Solution

  • The code that would animate the control's LayoutTransform depends on the kind of Transform used. Provided that it simply is a ScaleTransform, you could write this:

    FrameworkElement control = sender as FrameworkElement;
    ScaleTransform transform = control.LayoutTransform as ScaleTransform;
    DoubleAnimation scaleAnimation =
        new DoubleAnimation(0, 1, new Duration(TimeSpan.FromSeconds(2)));
    
    transform.BeginAnimation(ScaleTransform.ScaleXProperty, scaleAnimation);
    transform.BeginAnimation(ScaleTransform.ScaleYProperty, scaleAnimation);
    

    When the LayoutTransform was created with Blend, it is most certainly not simply a ScaleTransform, but a TransformGroup with a ScaleTransform as first child. You would then retrieve the ScaleTranform by something like this:

    TransformGroup transformGroup = control.LayoutTransform as TransformGroup;
    ScaleTransform transform = transformGroup.Children[0] as ScaleTransform;
    

    And again i forgot the reason why animating a Transform like this won't work by means of a Storyboard. Instead of directly calling BeginAnimation on the ScaleTransform object, I've tried the code below, but without success.

    DoubleAnimation xScaleAnimation =
        new DoubleAnimation(0, 1, new Duration(TimeSpan.FromSeconds(2)));
    Storyboard.SetTarget(xScaleAnimation, transform);
    Storyboard.SetTargetProperty(xScaleAnimation,
        new PropertyPath(ScaleTransform.ScaleXProperty));
    
    DoubleAnimation yScaleAnimation =
        new DoubleAnimation(0, 1, new Duration(TimeSpan.FromSeconds(2)));
    Storyboard.SetTarget(yScaleAnimation, transform);
    Storyboard.SetTargetProperty(yScaleAnimation,
        new PropertyPath(ScaleTransform.ScaleYProperty));
    
    Storyboard sb = new Storyboard();
    sb.Children.Add(xScaleAnimation);
    sb.Children.Add(yScaleAnimation);
    sb.Begin();