1

I want to simply animate a text-box such that it fades in and also moves to the left (or any x/y position). How can I achieve that?

Also will it matter if it's inside a Grid?

neebz
  • 11,465
  • 7
  • 47
  • 64

1 Answers1

3

Here's a sketchy method i just wrote for fading in any kind of UIElement:

    public static void FadeIn(UIElement element, int xOffset, TimeSpan duration)
    {
        Transform tempTrans = element.RenderTransform;
        TranslateTransform trans = new TranslateTransform(xOffset, 0);
        TransformGroup group = new TransformGroup();
        if (tempTrans != null) group.Children.Add(tempTrans);
        group.Children.Add(trans);

        DoubleAnimation animTranslate = new DoubleAnimation(0, (Duration)duration);
        animTranslate.EasingFunction = new CubicEase() { EasingMode = EasingMode.EaseOut };
        DoubleAnimation animFadeIn = new DoubleAnimation(0, 1, (Duration)duration) { FillBehavior = FillBehavior.Stop };
        animTranslate.Completed += delegate
        {
            element.RenderTransform = tempTrans;
        };

        element.RenderTransform = trans;
        element.BeginAnimation(UIElement.OpacityProperty, animFadeIn);
        trans.BeginAnimation(TranslateTransform.XProperty, animTranslate);
    }

If some of the workings are not clear feel free to ask.

H.B.
  • 166,899
  • 29
  • 327
  • 400
  • hey, thanks that helps. Can you tell me why did you use EasingFunction (and specifically why CubicEase) ? – neebz Feb 17 '11 at 19:04
  • Just so that the controls don't stop so appruptly, thought it just looks more fluent and nicer that way. – H.B. Feb 17 '11 at 19:57
  • Oh yeah, forgot about the cubic ease, used that because i think it constitutes a nice compromise between initial movement speed and decay softness/duration. Compare the graphs on this site: http://msdn.microsoft.com/en-us/library/ee308751.aspx – H.B. Feb 17 '11 at 20:41
  • @ShahidMZubair: Just reverse the order of the 0 and 1 in the `DoubleAnimation` animating the opacity. – H.B. Jul 07 '14 at 10:40