通过 Windows Store App 中的情节提要动画更改网格列/行的宽度/高度答案

【问题标题】：Changing grid column's/row's width/height by storyboard animation in Windows Store App通过 Windows Store App 中的情节提要动画更改网格列/行的宽度/高度
【发布时间】：2013-06-20 08:17:30
【问题描述】：

我正在寻找一些方法来通过Storyboard 中定义的动画来更改网格列的宽度（或行的高度）。我已经找到了一些针对 WPF 应用程序的解决方案，但它们在 Windows 应用商店编程的情况下都是无用的，例如：

Grid Column changing Width when animating

how to change the height of a grid row in wpf using storyboard

http://www.codeproject.com/Articles/18379/WPF-Tutorial-Part-2-Writing-a-custom-animation-cla

这样的结果是否可以通过创建自定义类来获得，从 Timeline 继承？如果是这样，应该覆盖哪些组件才能正确实施？

【问题讨论】：

标签： grid storyboard windows-store-apps timeline

【解决方案1】：

您应该可以使用简单的DoubleAnimation。确保将EnableDependentAnimation=True 设置为轮廓here。

尝试时要意识到的一件事是ColumnDefinitions 是GridLength struct。你可以找到更多关于他们的信息here。您需要将动画设置为 Value 属性。

【讨论】：

GridLength.Value 属性没有设置器。我相信它还需要是一个依赖属性才能与 DoubleAnimation 一起使用。
啊，你说对了一部分。 GridLength 是一个struct，所以你需要将ColumnDefinition 的Width 设置为一个新的Gridlength。
您能否发布一些示例代码，说明如何使用 DoubleAnimation 执行此操作？这将非常有帮助，非常感谢。

【解决方案2】：

这是一个为 Grid ColumnDefinition MaxWidth 设置动画的示例方法。

    private void Animate(ColumnDefinition column)
    {
        Storyboard storyboard = new Storyboard();

        Duration duration = new Duration(TimeSpan.FromMilliseconds(500));
        CubicEase ease = new CubicEase { EasingMode = EasingMode.EaseOut };

        DoubleAnimation animation = new DoubleAnimation();
        animation.EasingFunction = ease;
        animation.Duration = duration;
        storyboard.Children.Add(animation);
        animation.From = 1000;
        animation.To = 0;
        animation.EnableDependentAnimation = true;
        Storyboard.SetTarget(animation, column);
        Storyboard.SetTargetProperty(animation, "(ColumnDefinition.MaxWidth)");

        storyboard.Begin();
    }

【讨论】：