UWP 动画改变控件大小(高度)

有这样一个需求:

  • 鼠标移动到(悬停在)控件上(PointerEntered),控件大小(高度)发生变化,以显示更多内容;
  • 鼠标移出控件(PointerExited),控件大小恢复原状。

本文通过 UWP 动画,用两种方法实现这个效果,用于改变周贡献榜和粉丝榜的 Grid 的高度。

方法一:XAML 实现动画

XAML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<UserControl.Resources>
<!--周贡、粉丝榜下拉恢复动画-->
<Storyboard x:Name="SeeMoreAnimation" Storyboard.TargetName="WeekFansGrid">
<DoubleAnimation Duration="0:0:0.2" EnableDependentAnimation="True" Storyboard.TargetProperty="Height" From="140" To="400"/>
</Storyboard>
<Storyboard x:Name="RestoreAnimation" Storyboard.TargetName="WeekFansGrid">
<DoubleAnimation Duration="0:0:0.2" EnableDependentAnimation="True" Storyboard.TargetProperty="Height" From="400" To="140"/>
</Storyboard>
</UserControl.Resources>

<Grid x:Name="WeekFansGrid" Background="White" VerticalAlignment="Top" Height="140"
PointerEntered="Grid_PointerEntered" PointerExited="Grid_PointerExited">
<!--Grid 里面的一些内容-->
</Grid>

C#:

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
// 鼠标悬停周贡、粉丝榜的 Grid
private void Grid_PointerEntered(object sender, PointerRoutedEventArgs e)
{
try
{
SeeMoreAnimation.Begin();
}
catch (Exception e1)
{
System.Diagnostics.Debug.WriteLine("Grid_PointerEntered " + e1.Message.ToString());
}
}

// 鼠标离开周贡、粉丝榜的 Grid
private void Grid_PointerExited(object sender, PointerRoutedEventArgs e)
{
try
{
RestoreAnimation.Begin();
}
catch (Exception e1)
{
System.Diagnostics.Debug.WriteLine("Grid_PointerExited " + e1.Message.ToString());
}
}

方法二:后台实现动画

XAML:

1
2
3
4
<Grid x:Name="WeekFansGrid" Background="White" VerticalAlignment="Top" Height="140"
PointerEntered="Grid_PointerEntered" PointerExited="Grid_PointerExited">
<!--Grid 里面的一些内容-->
</Grid>

C#:

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
// 鼠标悬停周贡、粉丝榜的 Grid
private void Grid_PointerEntered(object sender, PointerRoutedEventArgs e)
{
try
{
Grid grid = sender as Grid;
if (grid != null)
{
DoubleAnimation SeeMoreAnimation = new DoubleAnimation();
if (SeeMoreAnimation != null)
{
// 高度从 140 变化到 400
SeeMoreAnimation.From = 140;
SeeMoreAnimation.To = 400;
// 用时 200 毫秒
SeeMoreAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(200));
SeeMoreAnimation.EnableDependentAnimation = true;

// 目标 Grid 的 Height
Storyboard.SetTarget(SeeMoreAnimation, grid);
Storyboard.SetTargetProperty(SeeMoreAnimation, "Height");

Storyboard storyboard = new Storyboard();
if (storyboard != null)
{
storyboard.Children.Add(SeeMoreAnimation);
// 执行动画
storyboard.Begin();
}
}
}
}
catch (Exception e1)
{
System.Diagnostics.Debug.WriteLine("Grid_PointerEntered " + e1.Message.ToString());
}
}

// 鼠标离开周贡、粉丝榜的 Grid
private void Grid_PointerExited(object sender, PointerRoutedEventArgs e)
{
try
{
Grid grid = sender as Grid;
if (grid != null)
{
DoubleAnimation SeeMoreAnimation = new DoubleAnimation();
if (SeeMoreAnimation != null)
{
// 高度从 400 变化到 140
SeeMoreAnimation.From = 400;
SeeMoreAnimation.To = 140;
// 用时 200 毫秒
SeeMoreAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(200));
SeeMoreAnimation.EnableDependentAnimation = true;

// 目标 Grid 的 Height
Storyboard.SetTarget(SeeMoreAnimation, grid);
Storyboard.SetTargetProperty(SeeMoreAnimation, "Height");

Storyboard storyboard = new Storyboard();
if (storyboard != null)
{
storyboard.Children.Add(SeeMoreAnimation);
// 执行动画
storyboard.Begin();
}
}
}
}
catch (Exception e1)
{
System.Diagnostics.Debug.WriteLine("Grid_PointerExited " + e1.Message.ToString());
}
}

实现效果

GridSeeMoreAnimation

修电脑的裁缝酱 wechat
请不要关注这个孤独的微信公众号:huihut_com