Grid布局如何设置动画效果

CS代码

新增

GridLengthAnimation继承自AnimationTimeline

public class GridLengthAnimation : AnimationTimeline
    {
        public static readonly DependencyProperty FromProperty;
        public static readonly DependencyProperty ToProperty;
        public static readonly DependencyProperty EasingFunctionProperty;

        static GridLengthAnimation()
        {
            FromProperty = DependencyProperty.Register("From", typeof(GridLength), typeof(GridLengthAnimation));
            ToProperty = DependencyProperty.Register("To", typeof(GridLength), typeof(GridLengthAnimation));
            EasingFunctionProperty = DependencyProperty.Register("EasingFunction", typeof(IEasingFunction), typeof(GridLengthAnimation));
        }

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

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

        public IEasingFunction EasingFunction
        {
            get
            {
                return (IEasingFunction)GetValue(GridLengthAnimation.EasingFunctionProperty);
            }
            set
            {
                SetValue(GridLengthAnimation.EasingFunctionProperty, value);
            }

        }

        public GridLength From
        {
            get
            {
                return (GridLength)GetValue(GridLengthAnimation.FromProperty);
            }
            set
            {
                SetValue(GridLengthAnimation.FromProperty, value);
            }
        }

        public GridLength To
        {
            get
            {
                return (GridLength)GetValue(GridLengthAnimation.ToProperty);
            }
            set
            {
                SetValue(GridLengthAnimation.ToProperty, value);
            }
        }

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

            IEasingFunction easingFunction = this.EasingFunction;

            double progress = (easingFunction != null) ? easingFunction.Ease(animationClock.CurrentProgress.Value) : animationClock.CurrentProgress.Value;

            if (fromValue > toValue)
            {
                return new GridLength((1 - progress) * (fromValue - toValue) + toValue, this.To.IsStar ? GridUnitType.Star : GridUnitType.Pixel);
            }
            else
            {
                return new GridLength((progress) * (toValue - fromValue) + fromValue, this.To.IsStar ? GridUnitType.Star : GridUnitType.Pixel);
            }
        }
    }

　　

XAML代码

            <RowDefinition Height="40"></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="0.1*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="grid" Width="0.06*"></ColumnDefinition>
            <ColumnDefinition ></ColumnDefinition>
        </Grid.ColumnDefinitions>

　　

调用代码如下

方法1

GridLengthAnimation d = new GridLengthAnimation();
d.From = new GridLength(0.06, GridUnitType.Star);
d.To = new GridLength(0.2, GridUnitType.Star);
d.Duration = TimeSpan.FromSeconds(0.2);
grid.BeginAnimation(ColumnDefinition.WidthProperty, d);

方法2

Xaml

   <Storyboard x:Key="showColumn" Duration="0:0:1" Storyboard.TargetName="grid" Storyboard.TargetProperty="Width" Completed="Storyboard_Completed">
            <local:GridLengthAnimation From="0" To="300">
                <local:GridLengthAnimation.EasingFunction>
                    <BounceEase EasingMode="EaseOut"/>
                </local:GridLengthAnimation.EasingFunction>
            </local:GridLengthAnimation>
        </Storyboard>
        <Storyboard x:Key="hideColumn" Duration="0:0:1" Storyboard.TargetName="grid" Storyboard.TargetProperty="Width" Completed="Storyboard_Completed">
            <local:GridLengthAnimation From="300" To="0">
                <local:GridLengthAnimation.EasingFunction>
                    <BounceEase EasingMode="EaseOut"/>
                </local:GridLengthAnimation.EasingFunction>
            </local:GridLengthAnimation>
        </Storyboard>

CS

  BeginStoryboard((grid.Width.Value == 300) ? FindResource("hideColumn") as Storyboard : FindResource("showColumn") as Storyboard);

 

效果