Grid布局如何设置动画效果

1|0CS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
新增GridLengthAnimation继承自AnimationTimelinepublic 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);
            }
        }
    }

  

2|0XAML代码

1
2
3
4
5
6
7
8
    <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>

  

3|0调用代码如下

方法1

1
2
3
4
5
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);

 

4|0效果

 


__EOF__

本文作者可乐加冰
本文链接https://www.cnblogs.com/zt199510/p/13557819.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   可乐_加冰  阅读(849)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示