WPF 后台代码做 TranslateTransform 的动画
本文告诉大家,在后台代码,对 TranslateTransform 做动画的方法
今天小伙伴问我一个问题,说为什么相同的代码,如果设置到按钮上,是可以让按钮的某个属性变更,但是如果设置给 TranslateTransform 的 X 或 Y 就不会有任何值变更
在 WPF 中,通过 官方文档 里面的描述,对于 Freezable 类型的对象,如 SolidColorBrush 和 RotateTransform 和 GradientStop 等类型,都是不支持直接的动画,也就是如以下代码是不能触发动画
假定有 XAML 界面如下,期望在点击按钮时,修改按钮的 TranslateTransform 做动画
<Grid>
<Button x:Name="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Content="按钮" Click="Button_OnClick">
<Button.RenderTransform>
<TranslateTransform x:Name="ButtonTranslateTransform"></TranslateTransform>
</Button.RenderTransform>
</Button>
</Grid>
如果直接对使用 Storyboard 的 SetTarget 方法给对象设置 DoubleAnimation 将会是无效的,也就是说如以下的代码做的 TranslateTransform 动画是无效的,没有反应的
private void Button_OnClick(object sender, RoutedEventArgs e)
{
var storyboard = new Storyboard();
var doubleAnimation = new DoubleAnimation();
Storyboard.SetTarget(doubleAnimation, ButtonTranslateTransform);
Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath(TranslateTransform.XProperty));
doubleAnimation.To = 100;
doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(2));
storyboard.Children.Add(doubleAnimation);
storyboard.Begin();
}
如果想要给 Freezable 类型的对象做动画,可以通过间接的方法,也就是通过 Freezable 类型的对象所在的元素,使用点的方式写出来具体的代码
private void Button_OnClick(object sender, RoutedEventArgs e)
{
var storyboard = new Storyboard();
var doubleAnimation = new DoubleAnimation();
Storyboard.SetTarget(doubleAnimation, Button);
Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(UIElement.RenderTransform).(TranslateTransform.X)"));
doubleAnimation.To = 100;
doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(2));
storyboard.Children.Add(doubleAnimation);
storyboard.Begin();
}
写法就是通过某个元素的某个属性加上某个类型的某个属性。如上面代码使用的是 UIElement 的 RenderTransform 属性,这个属性的值的类型是 TranslateTransform 类型,设置这个类型的 X 属性
上面的 PropertyPath 有可以换成如下方式写
var propertyChain = new object[]
{
UIElement.RenderTransformProperty,
TranslateTransform.XProperty
};
Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(0).(1)", propertyChain));
我更推荐使用这个写法,因为这样就不会写错命名
而如果只是为了修改 TranslateTransform 的 X 属性,最简单的写法就是通过 BeginAnimation 的方式,如下面代码
private void Button_OnClick(object sender, RoutedEventArgs e)
{
ButtonTranslateTransform.BeginAnimation(TranslateTransform.XProperty, new DoubleAnimation()
{
To = 100,
Duration = new Duration(TimeSpan.FromSeconds(1))
});
}
以上代码可以看到很清真
这里的 Duration 其实可以通过 TimeSpan 转换,而不需要创建 Duration 对象。然而在 WPF 依然定义 Duration 类的原因是为了支持 Duration.Automatic 和 Duration.Forever 特殊的定义
如果是需要有多个属性开始做动画,不想使用 BeginAnimation 的方式,可以通过在后台代码用 SetTargetName 的方法指定,如下面代码
private void Button_OnClick(object sender, RoutedEventArgs e)
{
var storyboard = new Storyboard();
var doubleAnimation = new DoubleAnimation();
Storyboard.SetTargetName(doubleAnimation, nameof(ButtonTranslateTransform));
Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath(TranslateTransform.XProperty));
doubleAnimation.To = 100;
doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(2));
var storyboardName = "s" + storyboard.GetHashCode();
// 加入到字典,让 Storyboard 和 ButtonTranslateTransform 在相同的一个 NameScope 里
Resources.Add(storyboardName, storyboard);
storyboard.Children.Add(doubleAnimation);
storyboard.Begin();
}
在后台代码做动画,如果使用 SetTargetName 就需要让 Storyboard 和对应的元素在相同的一个 NameScope 里,不然将会提示 System.InvalidOperationException 不存在可解析名称“xx”的适用名称领域,如下面代码
System.InvalidOperationException:“不存在可解析名称“ButtonTranslateTransform”的适用名称领域。”
上面代码通过将动画加入到资源字典的方式,让动画和元素在相同的 NameScope 而让动画能找到元素。但是上面代码将会在资源字典加入一个 Storyboard 而没有释放,如果在你的实际代码,我推荐在动画完成之后,删除资源字典的动画
我特别翻了 WPF 编程宝典,发现宝典里面没有这部分知识,也就是没有告诉大家为什么直接给 TranslateTransform 的属性做动画将会失效。好在官方文档里面有说到这点
可以通过如下方式获取本文的源代码,先创建一个空文件夹,接着使用命令行 cd 命令进入此空文件夹,在命令行里面输入以下代码,即可获取到本文的代码
git init
git remote add origin https://gitee.com/lindexi/lindexi_gd.git
git pull origin 78f63c1c076065d1891559f5af2cb29f10a39f8b
以上使用的是 gitee 的源,如果 gitee 不能访问,请替换为 github 的源
git remote remove origin
git remote add origin https://github.com/lindexi/lindexi_gd.git
获取代码之后,进入 KayceefiwhearHaijanihukere 文件夹
Storyboards Overview - WPF .NET Framework
WPF 后台代码做 TranslateTransform 的动画的更多相关文章
- How do I duplicate a resource reference in code behind in WPF?如何在WPF后台代码中中复制引用的资源?
原文 https://stackoverflow.com/questions/28240528/how-do-i-duplicate-a-resource-reference-in-code-behi ...
- WPF后台代码实现TextBlock滚动条
方法一: 常规的WPF操作: <ScrollViewer Width=" VerticalScrollBarVisibility="Auto" Horizontal ...
- C# Wpf 后台代码设定UIElement的Canvas位置属性值
后台in-code设定元件UIElement的Canvas位置属性的两种方法: 1.UIElement.SetValue()方法 uiElement.SetValue(Canvas.TopProper ...
- 7.7 WPF后台代码绑定如果是属性,必须指定一下数据上下文才能实现,而函数(click)就不用
如: private bool _IsExportWithImage; /// <summary> /// 是否选择导出曲线图 /// </summary> public bo ...
- WPF MVVM 架构 Step By Step(4)(添加bindings - 完全去掉后台代码)
之前的改进已经挺棒的,但是我们现在知道了后台代码的问题,那是否可能把后台代码全部去除呢?这时候就该WPF binding 和 commands 来做的事情了. WPF就是以超吊的binding,com ...
- WPF后台动画DoubleAnimation讲解
WPF后台动画,使用DoubleAnimation做的. 1.移动动画 需要参数(目标点离最上边的位置,目标点离最左边的位置,元素名称) Image mImage = new Image(); Flo ...
- WPF内嵌代码和后台代码简单混合使用
下面实例展示了WPF内嵌代码和后台代码混合使用,一个简单基础的实例: xaml文件: <Window x:Class="WPF内嵌代码和后台代码混合使用.MainWindow" ...
- WPF MVVM 架构 Step By Step(3)(把后台代码移到一个类中)
我觉得大部分开发者应该已经知道怎么去解决这个问题.一般都是把后台代码(GLUE code)移动到一个类库.这个类库用来代表UI的属性和行为.任何代码当被移到一个类库中时都可以被编译成一个DLL,然后可 ...
- wpf 分别用 xaml 和后台代码实现 色彩渐变
xaml 方法: <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.micros ...
随机推荐
- 初探 Git Submodules
之前一直想将一个 Git 仓库放到另一个 Git 仓库,有 Maven 多模块项目(Maven Multimodule Project)和 Gradle 多项目构建(Gradle Multiproje ...
- 【python】Leetcode每日一题-二叉搜索迭代器
[python]Leetcode每日一题-二叉搜索迭代器 [题目描述] 实现一个二叉搜索树迭代器类BSTIterator ,表示一个按中序遍历二叉搜索树(BST)的迭代器: BSTIterator(T ...
- Pytest自动化测试-简易入门教程(03)
今天分享内容的重点,和大家来讲一下我们的测试框架--Pytest 讲到这个框架的话呢,可能有伙伴就会问老师,我在学习自动化测试过程中,我们要去学一些什么东西? 第一个肯定要学会的是一门编程语言,比如说 ...
- 分布式ID
需求 全局唯一 高性能 高可用 简单易用 UUID 优点: 唯一 不依赖于任何第三方服务 缺点: 是字符串类型而非数字,不满足数字ID的需求 字符串太长了,DB查询效率受影响 数据库自增ID 如果使用 ...
- Linux 内核调度器源码分析 - 初始化
导语 上篇系列文 混部之殇-论云原生资源隔离技术之CPU隔离(一) 介绍了云原生混部场景中CPU资源隔离核心技术:内核调度器,本系列文章<Linux内核调度器源码分析>将从源码的角度剖析内 ...
- java面试一日一题:java中垃圾回收算法有哪些
问题:请讲下在java中有哪些垃圾回收算法 分析:该问题主要考察对java中垃圾回收的算法以及使用场景 回答要点: 主要从以下几点去考虑, 1.GC回收算法有哪些 2.每种算法的使用场景 3.基于垃圾 ...
- 消息队列RabbitMQ(三):消息确认机制
引言 RabbitMQ的模型是生产者发送信息到 Broker (代理),消费者从 Broker 中取出信息.但是生产者怎么知道消息是否真的发送到 Broker 中了呢?Broker 又怎么知道消息到底 ...
- CRM系统实现自动化的“三部曲”
在了解CRM系统的自动化的时候,我们先来看一下CRM能干什么. 从上面的流程图我们就可以看出,CRM可以管理售前,售中和售后的整个客户生命周期. 为什么在复杂的客户生命周期中需要自动化呢? 当然是为了 ...
- primary key
只要使用innodb就要为表指定主键: 如果不指定mysql就会自己找不为空且为一的作为主键,如果找不到,就会使用默认的(软件自己预定好的)作为主键: 主键分为单列主键和复合主键,用法和单列唯一,联合 ...
- 24.Qt Quick QML-Canvas和Context2D详解
1.Canvas介绍Canvas是一个允许绘制直线和曲线.简单和复杂的形状.图形和引用的图形图像.它还可以添加文本.颜色.阴影.渐变和图案,并执行低级别像素操作.Canvas输出可以另存为图像文件或序 ...