有效的网格动画方式？

Question

我一直在寻找一种方法来为我的一个应用程序中的网格设置缩小/增长效果的动画：想法是UI按钮会缩小或增大边栏。

我found建议的解决方案，通过创建一个新的GridLength动画类。该课程实现了我的目标，但它非常不稳定，我宁愿在动画中没有明显的挂断。

在同一个线程上，其他人建议在自动调整大小的网格列/行中使用子项来利用动画，但我觉得这个解决方案有点麻烦：我依赖这些子项来定义专栏的形状，我宁愿不。如果我选择在XAML中定义动画，它对我来说也会带来一些复杂性。

有没有人知道完成网格列/行动画的干净方法？

为了帮助，这是我正在使用的动画类：

/// <summary>
/// Animates a grid length value just like the DoubleAnimation animates a double value
/// </summary>
public class GridLengthAnimation : AnimationTimeline
{
    /// <summary>
    /// Returns the type of object to animate
    /// </summary>
    public override Type TargetPropertyType
    {
        get
        {
            return 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;
        //check that from was set from the caller
        if (fromVal == 1)
            //set the from as the actual value
            fromVal = ((GridLength)defaultDestinationValue).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);
    }
}

这是我的列样式动画的样子：

<ColumnDefinition.Style>
                <Style>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Path=IsSideBarOpen}" Value="True">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <core:GridLengthAnimation Storyboard.TargetProperty="Width"
                                            From="1*" To="0" Duration="0:0:0.5" >
                                        </core:GridLengthAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <core:GridLengthAnimation Storyboard.TargetProperty="Width"
                                            From="0" To="1*" Duration="0:0:0.5" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
     </ColumnDefinition.Style>