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