Beispiel-Tutorial zum Anpassen von GridLengthAnimation in WPF

In diesem Artikel werden hauptsächlich die relevanten Informationen zum Anpassen von GridLengthAnimation in WPF ausführlich vorgestellt. Interessierte Freunde können sich auf

Anforderungen

Beim Bearbeiten eines Elements in einer Liste möchten wir die bearbeiteten Details im Vordergrund platzieren, beispielsweise auf der rechten Seite.

Diese Anforderung kann erreicht werden, indem ein Raster in zwei Spalten unterteilt wird und die

Breite der beiden Spalten dynamisch angepasst wird.

Wir wissen, dass Clomuns Breite , aber die Standardanimation sieht nicht so aus. Wir müssen eine solche Ein-Personen-Animation selbst umsetzen.

Design
Wir sehen aus dem Animationsklassendiagramm

Wir können von den Anforderungen ausgehen

Wenn wir ein Element in einer Liste bearbeiten, möchten wir die bearbeiteten Details vorne platzieren, beispielsweise auf der rechten Seite.

Diese Anforderung kann erreicht werden, indem ein Raster in zwei Spalten unterteilt wird und die Breite der beiden Spalten dynamisch angepasst wird.

Wir wissen, dass Clomuns Breite eine GridLength ist, aber die Standardanimation sieht nicht so aus. Wir müssen eine solche Ein-Personen-Animation selbst umsetzen.

Design

Wir sehen die AnimationTimeline-Vererbung aus dem Animationsklassendiagramm und schreiben ihren GetCurrentValue neu

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);
    }

Wie oben gezeigt, imitieren wir die Standardeinstellung Die Animation implementiert From und To und ihr

-Attribut ist als GridLength definiert. Wenn die Animation ausgeführt wird, schreiben wir GetCurrentValue um, um sie entsprechend dem From/To-Attribut zuzuordnen.

Optimierung

Durch den obigen Code können wir eine Animation erzielen, wenn sich GridLength ändert. Nach dem Ausprobieren stellten wir jedoch fest, dass die Animation etwas zu linear war. Was soll ich zu diesem Zeitpunkt tun?

kann durch die Einführung von EasingFunction erreicht werden. Wir wissen, dass EasingFunction tatsächlich eine Zeitfunktion

f(t) ist, die sich auf die Zeit t bezieht. Durch die Verarbeitung der Zeitfunktion machen wir den Animationsübergang weniger linear.

Entsprechend muss die Funktion GetCurrentValue neu geschrieben werden.

 /// <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));

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);
    }

Verwenden Sie

【Verwandte Empfehlungen】

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

1 Kostenloses .NET-Video-Tutorial

2. Beispiel für die Anpassung von Tastenkombinationen in C# WinForm, _PHP-Tutorial

3.Benutzerdefiniertes WeChat-Konto teilen Menü-Beispiel-Tutorial

Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial zum Anpassen von GridLengthAnimation in WPF. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!