首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

将高度动画设置为从50到10,但从30 wpf开始

WPF(Windows Presentation Foundation)是微软的一种用户界面框架,用于创建富客户端应用程序。在WPF中,可以使用动画来实现元素的平滑过渡和交互效果。

要将高度动画设置为从50到10,并从30开始,可以使用WPF中的动画功能来实现。以下是一个示例代码,演示如何使用WPF动画实现这个效果:

代码语言:txt
复制
using System.Windows;
using System.Windows.Media.Animation;

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            StartAnimation();
        }

        private void StartAnimation()
        {
            DoubleAnimation animation = new DoubleAnimation();
            animation.From = 50;
            animation.To = 10;
            animation.Duration = new Duration(TimeSpan.FromSeconds(1));
            animation.BeginTime = TimeSpan.FromSeconds(0.3);

            // 设置动画的目标对象和属性
            Storyboard.SetTarget(animation, myElement);
            Storyboard.SetTargetProperty(animation, new PropertyPath(FrameworkElement.HeightProperty));

            // 创建Storyboard并将动画添加到其中
            Storyboard storyboard = new Storyboard();
            storyboard.Children.Add(animation);

            // 启动动画
            storyboard.Begin();
        }
    }
}

在上述代码中,我们创建了一个DoubleAnimation对象,并设置其起始值(From)为50,结束值(To)为10。然后,我们设置动画的持续时间为1秒,并将开始时间(BeginTime)设置为0.3秒,以便从30开始动画。

接下来,我们使用Storyboard.SetTarget方法将动画的目标对象设置为名为"myElement"的元素,并使用Storyboard.SetTargetProperty方法将动画的目标属性设置为元素的高度(FrameworkElement.HeightProperty)。

最后,我们创建一个Storyboard对象,并将动画添加到其中。通过调用Storyboard的Begin方法,我们启动动画。

这样,当运行这段代码时,名为"myElement"的元素的高度将从30开始逐渐减小到10,动画持续1秒。

对于WPF开发,腾讯云提供了云桌面服务(https://cloud.tencent.com/product/cvd)和云服务器(https://cloud.tencent.com/product/cvm)等产品,可以帮助开发人员进行WPF应用程序的开发和部署。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【荐】牛逼的WPF动画库:XamlFlair

由From动画组成的任何UI元素都将以一个或多个任意值开始,并使用相应属性的默认值完成。由To动画组成的任何UI元素都将以其当前状态开始,并设置一个或多个任意值。...基本动画类型(Base Animation Types) 淡入淡出(Fade) 淡入淡出动画 警告:设置FadeTo动画时要小心,因为如果Visibility是Visible,元素保留在可视树中。...) 饱和度动画 色调(Tint)(只支持UWP) 色调动画 色彩 (Color,只支持WPF和Uno) 色彩动画 注意:重要的是要注意,当使用From动画设置色彩动画时,颜色将从指定值设置其当前状态...brush 还必须使用ColorOn指定目标属性 以下示例将为Rectangle的Fill属性设置RoyalBlueDarkGreen的动画: <xf:AnimationSettings x:Key...目标是所有动画合并为一个具有有意义名称的文件,以便任何开发人员都能准确地了解动画应用到FrameworkElement中的内容。

2K10
  • WPF 动画实战 点击时显示圆圈淡出效果

    就是点击的时候,看命中哪个元素,如果容器没有设置背景,那么这个容器就不能接收命中测试,也就是点击的时候不会判断点击这个容器 在后台代码添加鼠标点击的代码 如何在 WPF 中显示一个圆圈?...在 WPF 可以通过 Ellipse 控件显示椭圆,如果设置他的宽度和高度相同,那么就是一个圆,添加一个 Ellipse 的代码请看下面 var currentSize = 10...Animation 添加到 storyboard 才能在 storyboard 开始的时候执行 通过相同的方法设置高度,然后尝试开启动画 storyboard.Begin();...而 From 属性不设置的话就是当前值开始 注意上面代码需要放在 storyboard.Begin(); 前面,不要在动画开始之后再添加 Animation 不然动画没有执行 此时运行代码大概可以看到本文的效果...translateTransformX 的坐标放大的宽度减去原先的一半,也就是原先的 10 修改为 15 的一半 而PropertyPath的就是拿到对应的 RenderTransform 属性的值

    2.5K20

    【愚公系列】2023年11月 WPF控件专题 Path控件详解

    Path Data="M100,200 C100,25 400,350 400,175 H280" Stroke="Black" StrokeThickness="3" Fill="Red" />这个示例路径填充红色...Path控件是WPF中非常重要的一个控件,可以通过指定Data属性来绘制各种不规则形状。同时,可以使用Fill和Stroke属性来设置填充和边框样式。...<Path Data="M <em>10</em> <em>10</em> L <em>10</em> 20 L <em>50</em> 20 L <em>50</em> <em>10</em> L <em>10</em> <em>10</em> Z M 25 0 L 35 0 L 35 <em>30</em> L 25 <em>30</em> L 25...0 Z M 60 <em>10</em> L 60 20 L 100 20 L 100 <em>10</em> L 60 <em>10</em> Z M 60 40 L 60 <em>50</em> L 100 <em>50</em> L 100...同时,使用Fill属性<em>将</em>路径填充<em>为</em>绿色,使用Stroke属性<em>将</em>路径绘制为黑色实线,宽度<em>为</em>2。

    1.2K11

    实用的Shape指南

    Shape的APIWPF以来就几乎没变,对熟悉WPF/Silverlight的开发者来说几乎是零学习成本。 1....边框宽度10,虚线的第一段是长度10的实线,第二段长度20的空白,第三段长度30的实线,然后如此循环直到结束。...自从开始WPF工作以来,我一直StrokeDashArray的值设为一个好看又好记的值:4 2,the answer to life, the universe, and everything。...Line(直线) Line表示第一个点(X1,Y1)第二个点(X2,Y2)的一条直线。 3.1 X1,Y1,X2,Y2 这四个属性确定了Line的起点和终点。...结语 系统地学过Shape相关知识只在很多年前刚开始WPF/Silverlight时做过,平时除了Rectangle和Line其他的Shape好少会用到,所以即使有多年经验对Shape的很多知识点还是有点陌生

    1.2K30

    WPF 使用 WindowChrome,在自定义窗口标题栏的同时最大程度保留原生窗口样式(类似 UWPChrome)

    现在,为了能够观察 WindowChrome 各种属性设置的效果,我们 Window 定义一个新的 Template,里面就是空的,这样就没有什么内容能够遮挡我们设置的样式了。...考虑到我们前面的尝试中发现左、下、右的边框都是不符合要求的,所以我们现在设置 Left,Bottom,Right: <WindowChrome...▲ 拖拽光标热区 唯一不符合要求的是标题栏高度,这时我们可以继续设置 GlassFrameThickness,把顶部设置得更高一些。 然而设置多少呢?...所以含义一致,我们可以考虑直接 32 设置属性中: <WindowChrome GlassFrameThickness="0 32 0...如果不<em>设置</em>,最大化时窗口边缘的像素<em>将</em>看不见。这是反复尝试的经验值,且在多种 DPI 下验证是依然有效的。

    6.5K20

    WPF性能优化:形状(Shape)、几何图形(Geometry)和图画(Drawing)的使用

    几何图形(Geometry)形状定义了坐标和尺寸等细节(可以理解只有线条轮廓),不能直接绘制窗口和控件上。...Stroke属性设置绘制直线的画刷(Brush),基类(Shape)继承来的Fill属性不起作用 <Line Stroke="#0000ff" StrokeThickness="3" X1="<em>30</em>"...FrameworkElement继承来的Width和Height属性定义宽和高,默认值Auto,填充其可用的宽度或高度。...第一条指令(M50,100)创建了一个PathFigure,并把起点设置(50,100),接下来的指令(L100,100 100,50)其实是(L100,100 L100,50)的简写,是创建两个创建直线段并设置每个线段终点的指令...第四条指令(M150,50)创建了一个PathFigure,并把起点设置(150,50),接下来的指令是两条创建直线段的指令。

    1.9K10

    【CSS3】CSS3 动画 ⑤ ( 动画速度曲线 | 设置动画步长 | 动画匀速执行 | 动画分 2 步执行 | 使用动画步长实现打字机效果 )

    一、动画速度曲线设置 CSS3 样式中 , 设置 动画速度曲线 的属性是 animation-timing-function 属性 ; animation-timing-function 属性定义了动画..., 默认情况下是无级变速 , 也就是动画以微小趋势运行 , 整个过程动画可能变换几十次数百次不等 , 如果设置 3 步长 , 动画只会变换 3 次 ; 令动画 低速开始 加速执行 低速结束 , 可以对执行动画的...---- 实现思路 : 在盒子模型中 , 设置 10 个文字 : 实现一个打字机效果吧 动画的效果是 盒子模型 0 200 像素 , 每个文字 20 像素 ;...20 像素 , 动画分为 10 步 , 盒子模型每次增加 10 像素宽度 , 正好可以动画显示出来 ; 使用 white-space: nowrap; 样式 , 可以强行将文字设置 一行 , 使文字不换行.../* 设置动画属性 */ animation: progress 4s steps(10) forwards; /* 文字大小设置 20 像素 , 正好

    51140

    属性动画的核心方法:ValueAnimator.ofInt(int... values)

    比如 ValueAnimator.ofInt(0,100) , 实现的即数值0平稳的变化100 比如实现如下一个效果: 改变控件的样式,圆形和圆角长方形切换 实现思路很简单,即高度不变,改变控件的宽度...(圆形时:宽高相等,长方形时:宽度屏幕宽度-两边边距),顺便设置一个背景值,动画执行过程随便设个值(例子250毫秒) 现在看具体实现: 1、首先布局文件,设置两个按钮和一个效果控件 , 这里设置执行效果控件的高度固定为... 31 32 (2)长方形,同上,不过圆角设置可以设置小一点,这个读者可以仿着圆角自己写一个,完整代码请到最后查看 3、动画的实现方法,以长方形圆形例..., 圆形宽度50dp, 因为设置的空间高度50dp,圆角25dp,即实现了圆形图标 8 // ofInt(int a, int b)表示 动画取值ab 9...30dp, 圆形宽度50dp, 因为设置的空间高度50dp,圆角25dp,即实现了圆形图标 63 // ofInt(int a, int b)表示 动画取值ab 64

    1.1K20

    WPF 使用 WindowChrome,在自定义窗口标题栏的同时最大程度保留原生窗口样式(类似 UWPChrome)

    ,为了能够观察 WindowChrome 各种属性设置的效果,我们 Window 定义一个新的 Template,里面就是空的,这样就没有什么内容能够遮挡我们设置的样式了。...考虑到我们前面的尝试中发现左、下、右的边框都是不符合要求的,所以我们现在设置 Left,Bottom,Right: 1 2 3 <WindowChrome...然而设置多少呢?我测量了一下 Microsoft Store 应用的按钮高度,是 32。 但是,这 32 包括了顶部 1 像素的边框吗?我使用放大镜查看,发现是包含的。...所以含义一致,我们可以考虑直接 32 设置属性中: 1 2 3 <WindowChrome GlassFrameThickness="...<em>高度</em>,但最大化时还是 <em>30</em> <em>高度</em>这一点与原生 UWP 窗口和 Chrome 的行为是类似的。

    1.9K60

    WPF MVVM 弹框之等待框

    WPF MVVM 弹框之等待框 目录 一、效果 二、弹框主体改造 三、等待动画用户控件 四、弹窗 ViewModel 和帮助类的改造 五、使用方法和代码地址 独立观察员 2020年10月13日 之前写过一篇...(此节参考朝夕教育 Jovan 老师在 B 站发布的 WPF 教学视频的“动画实战”一节) 一个 Grid 分为四列,每列中放置一个不同颜色的 Border (以 Grid 包裹)并设置 LayoutTransform...然后,高度绑定宽度,这样就是正方形了。最后再设置圆角,就成圆形了。...,动画方法中先定义了一个 DoubleAnimation 类型的动画:间隔一秒,目标值 1.6,一直重复,自动反转。...vm.IsShowDialog = false; Console.WriteLine($"业务操作执行完毕,等待框关闭."); }); }); } 先将自定义内容设置等待动画用户控件

    2.5K20

    WPF 和 UWP 中,不用设置 From 或 To,Storyboard 即拥有更灵活的动画控制

    WPF 和 UWP 中,不用设置 From 或 To,Storyboard 即拥有更灵活的动画控制 发布于 2017-10-26 04:55...本文中,我将将尽量避免设置 From 和 To 值,让动画可以随时中断并重新开始,而中途不会出现突兀的变化。...从这个角度上说,似乎不设置 From 和 To 导致动画保持在当前值不变,不会有动画效果。...但是,WPF 允许在动画进行中修改动画参数,于是我们可以直接开始动画,然后再动画进行中修改元素属性目标值。...如果我们希望动画从一个新的起点开始,而不是当前状态开始,则只需要在动画开始之前设置元素的位置即可: private void BeginStoryboard2_Click(object sender,

    1.1K10

    【前端面试题】04—33道基础CSS3面试题(附答案)

    元素的宽度/高度由 border+ padding+content的宽度/高度决定,设置 width/height属性指的是指定 content部分的宽度/高度。...17、如何设置CSS3文本阴影? h1{text- shadow:水平阴影,垂直阴影,模糊距离,阴影颜色} 18、如何把元素左侧移动50像素,顶端移动100像素?...、如何使用matx0di元素旋转30°?...border-box,即背景边框开始绘制。 padding-box,即背景在边框内部绘制。 content-box,即背景内容部分绘制。...一旦规定了图片开始绘制的区域,就当于规定图片的左上角什么地方开始,其他的它就不负责了。 30、为了把文本分隔4列并使两列之间间隔30像素,应该如何实现?

    2.8K10

    WPF 动画性能测试应用 一千个半透明矩形做动画

    本文记录一个我写的一个简单的测试应用,这里面包含了一千个半透明的矩形,且矩形都在做动画。...本文末尾可以获取全部的可构建运行的代码,按照本文提供的方式可以获取到所有源代码 开始之前,先看一下运行效果 接下来告诉大家这个测试应用是如何做的 为了关注点在于渲染性能或者是动画性能本身,减少其他业务逻辑的干扰...比如修改布局层的属性,如元素的宽度高度等,导致布局系统重新布局,耗时在布局上,或者是布局触发的事件被业务监听,额外执行了业务逻辑。...添加矩形需要设置矩形的起点,以及动画的终点,如此界面才会比较复杂 var startPoint = new Point(Random.Shared.Next((int)...在 WPF 框架里面,通过渲染调度逻辑渲染的指导数据调度 WPF 的 GFX 层。

    59040

    以Button例谈谈如何模仿Aero2主题

    就以IE来说,上图从上到下几组按钮的高度分别是21,28,24像素。 ? 这个页面大部分按钮都是28,只有中间那个“所有区域重置默认级别”是30像素。...可以看出UWP的表单元素基本上完全统一高度,而WPF则根据内容自适应。...我建议在实际项目中根据需要使用样式按钮的高度统一24、28、32像素(The sizes, margins, and positions of UI elements should always be...WPF系统环境封装了三个类,用于访问系统环境设置: SystemFonts,包含公开有关字体的系统资源的属性。 SystemColors,包含与系统显示元素相对应的系统颜色、系统画笔和系统资源键。...这样可以方便地通过在根元素设置字体来统一字体的使用。 3.4 动画 几乎、完全、没有。

    1.2K40

    WPF依赖属性(wpf 依赖属性)

    一、什么是依赖属性 依赖属性就是一种自己可以没有值,并且可以通过绑定其他数据源获取值。依赖属性可支持WPF中的样式设置、数据绑定、继承、动画及默认值。...所有的属性都设置依赖属性并不总是正确的解决方案,具体取决于其应用场景。有时,使用私有字段实现属性的典型方法便能满足要求。MSDN中给出了下面几种应用依赖属性的场景: 1....希望可在样式中设置属性。 2. 希望属性支持数据绑定。 3. 希望可使用动态资源引用设置属性。 4. 希望元素树中的父元素自动继承属性值。 5. 希望属性可进行动画处理。 6....的时候,自动Foreground的值改为之前的值,因此就不需要写IsMouseOver的值false的时候,Foreground的值改为Black。...DependencyProperty.RegisterReadOnly方法来注册 3、使用.NET属性包装依赖属性 在类上实现属性时,只要该类派生自 DependencyObject,便可以选择使用 DependencyProperty 标识符来标示属性,从而将其设置依赖属性

    2.1K20

    WPF 简易手绘笔迹支持回放的方法

    本文来告诉大家一个简易的方法 啥都不说,先来一张图 在抬手的时候绘制出刚才所画的笔迹,做动画画出笔迹,就和手绘差不多的效果 下面来告诉大家核心的原理 在 WPF 中,可以使用一个叫路径动画的功能,通过这个功能可以传入一个...Path 路径就能动画出这个轨迹 在 WPF 中,笔迹的底层绘制是使用 Geometry 进行绘制。...而第二步就是构建出路径动画出来,在开始下面代码之前,还需要在 WPF 最简逻辑实现多指顺滑的笔迹书写 这篇博客先抄笔迹的实现代码,大概 150 行不到就可以完成了 对之前代码做一点更改,在手指抬起的时候触发一下动画...} storyboard.Begin(); } 可以看到代码非常简单,只是当前运行的时候啥都看不到,因为在 XAML 中的 Path 的颜色被我设置透明...动画的速度是靠时间决定的,也就是需要计算不同长度的几何笔迹所需的时间等。还有做动画的圆点的宽度和高度以及笔迹粗细。

    45320

    Android自定义下拉刷新动画--仿百度外卖下拉刷新

    0-360度开始循环旋转,旋转所用时间1s,旋转中心距离view的左定点上边缘50%的距离,也就是正中心。...浮点数表示相对于Object的左边缘,如5; 百分比表示相对于Object的左边缘,如5%; 另一种百分比表示相对于父容器的左边缘,如5%p; 一般设置50%表示在Object中心 android:...浮点数表示相对于Object的上边缘,如5; 百分比表示相对于Object的上边缘,如5%; 另一种百分比表示相对于父容器的上边缘,如5%p; 一般设置50%表示在Object中心 android:...一个插补属性,可以动画效果设置加速,减速,反复,反弹等。...默认为开始和结束慢中间快, android:startOffset 在调用start函数之后等待开始运行的时间,单位毫秒,若为10,表示10ms后开始运行 android:repeatCount

    1.4K30
    领券