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

有这样一个需求:

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

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

方法一:XAML 实现动画

XAML:

<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#:

// 鼠标悬停周贡、粉丝榜的 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:

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

C#:

// 鼠标悬停周贡、粉丝榜的 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

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

辉哈

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值