为什么这个动画不起作用?

我正在学习WPF动画,并创建了一个简单的演示应用程序,其中有一个非常简单的动画。我已经将主网格划分为三行:顶部的一个按钮行和屏幕其余部分的两个内容行,一个红色和一个蓝色。下面是完整的XAML。

有两个按钮,显示红色和蓝色。当按下每个按钮时,我希望按钮行下面的区域用缓慢的从上到下擦除来改变颜色。故事板将两行的高度设置为0,然后将所需行的高度设置为1*,如下所示:

<Storyboard>
    <Utility:GridLengthAnimation Storyboard.TargetName="RedRow" Storyboard.TargetProperty="Height" To="0" Duration="0:0:0" />
    <Utility:GridLengthAnimation Storyboard.TargetName="BlueRow" Storyboard.TargetProperty="Height" To="0" Duration="0:0:0" />
    <Utility:GridLengthAnimation Storyboard.TargetName="BlueRow" Storyboard.TargetProperty="Height" From="0" To="1*" Duration="0:0:5" />
</Storyboard>

颜色按预期变化,但没有动画。所以,我的问题很简单:为什么动画不起作用?

我正在使用自定义动画类, GridLengthAnimation (改编自 this CodeProject article )设置网格长度的动画。我复制了下面的课程。

要重新创建演示项目: 要重新创建我的演示项目,请创建一个新的WPF项目(我使用了vs 2010)并替换中的XAML。 MainWindow.xaml 包括以下内容:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Utility="clr-namespace:Utility" Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Name="Buttons" Height="35" />
            <RowDefinition Name="RedRow" Height="0.5*" />
            <RowDefinition Name="BlueRow" Height="0.5*" />
        </Grid.RowDefinitions>

        <!-- Buttons -->
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
            <Button Content="Show Red" Width="100" Margin="5" >
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <Utility:GridLengthAnimation Storyboard.TargetName="RedRow" Storyboard.TargetProperty="Height" To="0" Duration="0:0:0" />
                                    <Utility:GridLengthAnimation Storyboard.TargetName="BlueRow" Storyboard.TargetProperty="Height" To="0" Duration="0:0:0" />
                                    <Utility:GridLengthAnimation Storyboard.TargetName="RedRow" Storyboard.TargetProperty="Height" From="0" To="1*" Duration="0:0:5" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </Button.Triggers>
            </Button>
            <Button Content="Show Blue" Width="100" Margin="5" >
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <Utility:GridLengthAnimation Storyboard.TargetName="RedRow" Storyboard.TargetProperty="Height" To="0" Duration="0:0:0" />
                                    <Utility:GridLengthAnimation Storyboard.TargetName="BlueRow" Storyboard.TargetProperty="Height" To="0" Duration="0:0:0" />
                                    <Utility:GridLengthAnimation Storyboard.TargetName="BlueRow" Storyboard.TargetProperty="Height" From="0" To="1*" Duration="0:0:5" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </Button.Triggers>
            </Button>
        </StackPanel>

        <!-- Grid Fills-->
        <Border Grid.Row="1" Background="Red" />
        <Border Grid.Row="2" Background="Blue" />

    </Grid>
</Window>

没有代码隐藏添加到 主窗口 .

将C类添加到名为的项目中 GridLengthAnimation.cs . 将该类中的代码替换为以下代码:

using System;
using System.Windows.Media.Animation;
using System.Windows;

namespace Utility
{
    /// <summary>
    /// Enables animation of WPF Grid row heights and column widths.
    /// </summary>
    /// <remarks>Adapted from Graus & Sivakumar, "WPF Tutorial - Part 2 : Writing a custom animation class",
    /// http://www.codeproject.com/KB/WPF/GridLengthAnimation.aspx, retrieved 08/12/2010.</remarks>
    internal class GridLengthAnimation : AnimationTimeline
    {
        static GridLengthAnimation()
        {
            FromProperty = DependencyProperty.Register("From", typeof(GridLength),
                typeof(GridLengthAnimation));

            ToProperty = DependencyProperty.Register("To", typeof(GridLength), 
                typeof(GridLengthAnimation));
        }

        public override Type TargetPropertyType
        {
            get 
            {
                return typeof(GridLength);
            }
        }

        protected override Freezable CreateInstanceCore()
        {
            return new GridLengthAnimation();
        }

        public static readonly DependencyProperty FromProperty;
        public GridLength From
        {
            get
            {
                return (GridLength)GetValue(FromProperty);
            }
            set
            {
                SetValue(FromProperty, value);
            }
        }

        public static readonly DependencyProperty ToProperty;
        public GridLength To
        {
            get
            {
                return (GridLength)GetValue(ToProperty);
            }
            set
            {
                SetValue(ToProperty, value);
            }
        }

        public override object GetCurrentValue(object defaultOriginValue, object defaultDestinationValue, AnimationClock animationClock)
        {
            double fromVal = ((GridLength)GetValue(FromProperty)).Value;
            double toVal = ((GridLength)GetValue(ToProperty)).Value;

            if (animationClock.CurrentProgress != null)
            {
                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);
                }
            }
            else
            {
                return null;
            }
        }
    }
}