Example tutorial of customizing GridLengthAnimation in WPF

This article mainly introduces the relevant information of customizing GridLengthAnimation in WPF in detail. It has certain reference value. Interested friends can refer to it

Requirements

When we edit an item in a list, we want to place the edited details in front, such as on the right side.

This requirement can be achieved by dividing a Grid into two Cloumn and dynamically adjusting the Width of the two Cloumn.

We know that Clomun's Width is , but the default animation does not look like this. We need to implement such one-person animation ourselves.

Design
We can see from the Animation class diagram

We can see from the requirements

When we edit an item in a list, we want to place the edited details in front, such as on the right side.

This requirement can be achieved by dividing a Grid into two Cloumn and dynamically adjusting the Width of the two Cloumn.

We know that Clomun's Width is a GridLength, but the default animation does not look like this. We need to implement such one-person animation ourselves.

Design

We see the AnimationTimeline inheritance from the Animation class diagram and rewrite its GetCurrentValue

public class GridLengthAnimation : AnimationTimeline
  {
    /// <summary>
    /// Returns the type of object to animate
    /// </summary>
    public override Type TargetPropertyType => typeof(GridLength);
 
    /// <summary>
    /// Creates an instance of the animation object
    /// </summary>
    /// <returns>Returns the instance of the GridLengthAnimation</returns>
    protected override System.Windows.Freezable CreateInstanceCore()
    {
      return new GridLengthAnimation();
    }
 
    /// <summary>
    /// Dependency property for the From property
    /// </summary>
    public static readonly DependencyProperty FromProperty = DependencyProperty.Register("From", typeof(GridLength),
      typeof(GridLengthAnimation));
 
    /// <summary>
    /// CLR Wrapper for the From depenendency property
    /// </summary>
    public GridLength From
    {
      get
      {
        return (GridLength)GetValue(GridLengthAnimation.FromProperty);
      }
      set
      {
        SetValue(GridLengthAnimation.FromProperty, value);
      }
    }
 
    /// <summary>
    /// Dependency property for the To property
    /// </summary>
    public static readonly DependencyProperty ToProperty = DependencyProperty.Register("To", typeof(GridLength),
      typeof(GridLengthAnimation));
 
    /// <summary>
    /// CLR Wrapper for the To property
    /// </summary>
    public GridLength To
    {
      get
      {
        return (GridLength)GetValue(GridLengthAnimation.ToProperty);
      }
      set
      {
        SetValue(GridLengthAnimation.ToProperty, value);
      }
    }
 
    /// <summary>
    /// Animates the grid let set
    /// </summary>
    /// <param name="defaultOriginValue">The original value to animate</param>
    /// <param name="defaultDestinationValue">The final value</param>
    /// <param name="animationClock">The animation clock (timer)</param>
    /// <returns>Returns the new grid length to set</returns>
    public override object GetCurrentValue(object defaultOriginValue,
      object defaultDestinationValue, AnimationClock animationClock)
    {
      double fromVal = ((GridLength)GetValue(GridLengthAnimation.FromProperty)).Value;
 
      double toVal = ((GridLength)GetValue(GridLengthAnimation.ToProperty)).Value;
 
      if (fromVal > toVal)
        return new GridLength((1 - animationClock.CurrentProgress.Value) * (fromVal - toVal) + toVal, GridUnitType.Star);
      else
        return new GridLength(animationClock.CurrentProgress.Value * (toVal - fromVal) + fromVal, GridUnitType.Star);
    }

As shown above, we imitate the default The animation implements From and To, and defines its property as GridLength. When the animation is executed, we rewrite GetCurrentValue to associate it according to the From/To property.

Optimization

Through the above code, we realize animation when GridLength changes. However, after trying it out we found that the animation was a bit too linear. What should I do at this time?

Can be achieved by introducing EasingFunction. We know that EasingFunction is actually a time function f(t) related to time t. Through the processing of time function, we make the animation transition less linear.

 /// <summary>
    /// The <see cref="EasingFunction" /> dependency property&#39;s name.
    /// </summary>
    public const string EasingFunctionPropertyName = "EasingFunction";
 
    /// <summary>
    /// Gets or sets the value of the <see cref="EasingFunction" />
    /// property. This is a dependency property.
    /// </summary>
    public IEasingFunction EasingFunction
    {
      get
      {
        return (IEasingFunction)GetValue(EasingFunctionProperty);
      }
      set
      {
        SetValue(EasingFunctionProperty, value);
      }
    }
 
    /// <summary>
    /// Identifies the <see cref="EasingFunction" /> dependency property.
    /// </summary>
    public static readonly DependencyProperty EasingFunctionProperty = DependencyProperty.Register(
      EasingFunctionPropertyName,
      typeof(IEasingFunction),
      typeof(GridLengthAnimation),
      new UIPropertyMetadata(null));

Correspondingly, the GetCurrentValue function must be rewritten.

public override object GetCurrentValue(object defaultOriginValue,
      object defaultDestinationValue, AnimationClock animationClock)
    {
      double fromVal = ((GridLength)GetValue(FromProperty)).Value;
 
      double toVal = ((GridLength)GetValue(ToProperty)).Value;
 
      //check that from was set from the caller
      //if (fromVal == 1)
      //  //set the from as the actual value
      //  fromVal = ((GridLength)defaultDestinationValue).Value;
 
      double progress = animationClock.CurrentProgress.Value;
 
      IEasingFunction easingFunction = EasingFunction;
      if (easingFunction != null)
      {
        progress = easingFunction.Ease(progress);
      }
 
 
      if (fromVal > toVal)
        return new GridLength((1 - progress) * (fromVal - toVal) + toVal, GridUnitType.Star);
 
        return new GridLength(progress * (toVal - fromVal) + fromVal, GridUnitType.Star);
    }

Use

 <anim:GridLengthAnimation Storyboard.TargetProperty="Width" From="0" To="*" Duration="0:0:0.5"/>

【Related Recommendations】

1. ASP.NET Free Video Tutorial

2. C# Example of customizing shortcut keys in WinForm, _PHP tutorial

3. Share WeChat public account to develop custom menu Example tutorial

The above is the detailed content of Example tutorial of customizing GridLengthAnimation in WPF. For more information, please follow other related articles on the PHP Chinese website!