Grid animation

One of most common questions, I meet with my customers is how to animate grid size. Actually, there is no problem to animate doubles, ints, even sizes, but how to animate GridLength, which actually used to measuring the sizes in grid?

In order to do it, we'll create our own animation, named GridLengthAnimation and use it within our grid. So, let's start.

First of all we have to inherit base animation timeline in order to get the functionality we want.

 

public abstract class GridLengthAnimationBase : AnimationTimeline

    {

        protected GridLengthAnimationBase() { }

        public override sealed Type TargetPropertyType

        {

            get { return typeof(GridLength); }

        }

        public override object GetCurrentValue(object defaultOriginValue, object defaultDestinationValue, AnimationClock animationClock)

        {

            if (defaultOriginValue is GridLength == false)

                throw new ArgumentException("Parameter must be a GridLength", "defaultOriginValue");

            if (defaultDestinationValue is GridLength == false)

                throw new ArgumentException("Parameter must be a GridLength", "defaultDestinationValue");

            return GetCurrentValueCore((GridLength)defaultOriginValue, (GridLength)defaultDestinationValue, animationClock);

        }

        public abstract GridLength GetCurrentValueCore(GridLength defaultOriginValue, GridLength defaultDestinationValue, AnimationClock animationClock);

    }

Next step is to create actual animation. It's pretty simple, when we already have base type. We have to create some Dependency Properties used within timeline, such as By, From, To etc. and treat of some possible errors (we do not want our animation to be thrown :) )

 

public class GridLengthAnimation : GridLengthAnimationBase

{

    public static readonly DependencyProperty ByProperty = DependencyProperty.Register(

     "By",

     typeof(double?),

     typeof(GridLengthAnimation),

     new PropertyMetadata(null));

    public static readonly DependencyProperty FromProperty = DependencyProperty.Register(

     "From",

     typeof(double?),

     typeof(GridLengthAnimation),

     new PropertyMetadata(null));

    public static readonly DependencyProperty ToProperty = DependencyProperty.Register(

     "To",

     typeof(double?),

     typeof(GridLengthAnimation),

     new PropertyMetadata(null));

    public double? By

    {

        get { return (double?)this.GetValue(ByProperty); }

        set { this.SetValue(ByProperty, value); }

    }

    public double? From

    {

        get { return (double?)this.GetValue(FromProperty); }

        set { this.SetValue(FromProperty, value); }

    }

    public double? To

    {

        get { return (double?)this.GetValue(ToProperty); }

        set { this.SetValue(ToProperty, value); }

    }

    protected override Freezable CreateInstanceCore()

    {

        return new GridLengthAnimation();

    }

    public override GridLength GetCurrentValueCore(GridLength defaultOriginValue, GridLength defaultDestinationValue, AnimationClock animationClock)

    {

        if (From == null)

            throw new Exception("From must be specified in a GridLengthAnimation");

        double a_to;

        if (To != null)

            a_to = To.Value;

        else if (By != null)

            a_to = From.Value + By.Value;

        else

            throw new Exception("Either To or By must be specified in a GridLengthAnimation");

        return new GridLength(From.Value + ((a_to - From.Value) * animationClock.CurrentProgress.Value));

    }

}

That's all, folks. All we have to do now is to use our new animation type with our grid as we know to use any other type of animation. It's looks like this

 

<BeginStoryboard>

              <Storyboard>

                <ParallelTimeline>

                  <local:GridLengthAnimation

                    Storyboard.TargetName="l"

                    Storyboard.TargetProperty="(ColumnDefinition.Width)"

                    From="30"

                    To="300"

                    AutoReverse="False"

                    Duration="0:0:1"/>

                </ParallelTimeline>

              </Storyboard>

            </BeginStoryboard>

Hurrah, from now we know to build any type of animations and actually do not need Microsoft to provide us with premade one. Do't it looks like working with converters? The answer is "yes".

Source code for this article