Expander展开收缩动画
这个问题困扰了我一天,最后下了个MaterialDesign的demo,看了下他的源码,才恍然大悟,原来很简单。
我原来的设想是在expander的ControlTemplate设置触发器,在IsExpanded属性变化时根据ContentPresenter控件的高度来做动画,但这就涉及到取属性,在xaml中只有绑定。
但一绑定就报错无法冻结此 Storyboard 时间线树供跨线程使用
说实话绑定高度是我们的自然想法,结果MaterialDesign居然使用LayoutTransform缩放来做的动画,这个就不需要属性值了呀,直接指定比例就行了,避开了绑定。
他的源代码时这样写的
......
<Border Name="ContentSite">
<Border.LayoutTransform>
<TransformGroup>
<ScaleTransform x:Name="ContentSiteScaleTransform" />
<RotateTransform Angle="{Binding Path=ExpandDirection, RelativeSource={RelativeSource AncestorType=Expander}, Converter={StaticResource ExpanderRotateAngleConverter}}" />
</TransformGroup>
</Border.LayoutTransform> <Grid Name="ContentPanel"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid.LayoutTransform>
<RotateTransform Angle="{Binding Path=ExpandDirection, RelativeSource={RelativeSource AncestorType=Expander}, Converter={StaticResource ExpanderRotateAngleConverter}, ConverterParameter=-1}" />
</Grid.LayoutTransform> <ContentPresenter Name="PART_Content"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
Focusable="False"
Visibility="Collapsed" /> </Grid>
</Border>
......
<VisualTransition To="Expanded">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ContentPanel"
Storyboard.TargetProperty="Opacity"
From="0"
To="1"
Duration="{DynamicResource ExpandDuration}" />
<DoubleAnimation Storyboard.TargetName="ContentSiteScaleTransform"
Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
From="0"
To="1"
Duration="{DynamicResource ExpandDuration}">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseInOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Content"
Storyboard.TargetProperty="Visibility"
Duration="0:0:0">
<DiscreteObjectKeyFrame KeyTime="0%" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
吐血三升!
Expander展开收缩动画的更多相关文章
- max-height实现任意高度元素的展开收缩动画
http://dobinspark.com.cn/ 前言: 在说到实现元素的展开收缩,通常的想法是通过控制display的元素属性和none之间的切换,虽然说功能可以实现,但是这种展开是没有任何动画的 ...
- 右上角鼠标滑过展开收缩动画效果js代码的演示页面
http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...
- vuejs实现折叠面板展开收缩动画
vuejs通过css3实现元素固定高度到auto高度的动画和auto高度到固定高度的动画. 循环列表,html: <template> <div class="newsli ...
- ios-tableViewcell展开与收缩动画处理
[前言] 在使用华尔街见闻 app 时,看到它的 tableVeiw 上的 cell 具有很好的展开与收缩功能.于是自己想了一下实现,感觉应该挺简单的,于是心痒痒写个 demo 实现一波.华尔街见闻 ...
- iOS tableview cell 的展开收缩
iOS tableview cell 的展开收缩 #import "ViewController.h" @interface ViewController ()<UITabl ...
- SlickGrid example 5:带子项的展开收缩
带子项的展开收缩. 代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Ty ...
- 点击UITableView的cell展开收缩
在项目中有个需求,点击表视图的单元格展开,再点击另外一个单元格或者本身又收缩,经过一段时间尝试,实现了该功能,现在记录分享总结下. 首先要理解UITableView代理方法调用的先后顺序. 当 ...
- HTML5每日一练之details展开收缩标签的应用
details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现.注:目前仅Chrome支持此标签. details有一个新增加的子标签——summary,当鼠标点击su ...
- 展开/收缩 ul
了一个展开收缩的东东,留着以后万一用到 后台递归生成的函数(这里是一个反射参数展示,支持多层级展开显示,后台反射如何多层级解析的方法有时间再补上吧) /// <summary> /// 递 ...
- js实现的侧边栏展开收缩效果
原文地址:http://www.softwhy.com/forum.php?mod=viewthread&tid=12246 <!DOCTYPE html> <html> ...
随机推荐
- OpenHarmony AI框架开发指导
一.概述 1.功能简介 AI 业务子系统是 OpenHarmony 提供原生的分布式 AI 能力的子系统.AI 业务子系统提供了统一的 AI 引擎框架,实现算法能力快速插件化集成. AI 引擎框架主要 ...
- 80+产品正通过兼容性测试,OpenHarmony生态蓬勃发展
4 月 25 日,开放原子开源基金会举办了 OpenAtom OpenHarmony(以下简称"OpenHarmony")技术日活动,OpenHarmony PMC 委员代表首次对 ...
- OpenHarmony 3.1 Release版本关键特性解析——OpenHarmony新音视频引擎——HiStreamer
OpenAtom OpenHarmony(以下简称"OpenHarmony")是由开放原子开源基金会(OpenAtom Foundation)孵化及运营的开源项目,目标是面向全场景 ...
- 爱奇艺携手HMS Core,为用户打造更流畅的沉浸式观影体验
本文分享于HMS Core开发者论坛<[开发者说]爱奇艺携手HMS Core,为用户打造更流畅.更沉浸的观影体验>采访稿整理. 爱奇艺是国内领先的视频播放平台,通过接入HMS Core H ...
- echarts X轴类目名太长时隐藏,hover时显示全部
echarts图表X轴 在柱状图中,X轴类目名如果数据太长: echarts会默认进行隐藏部分字段: 如果我们想让每一个类目名都显示出来,需要进行额外的处理 X轴类目名太长时,默认只显示一部分类目名 ...
- ContOS7搭建RAID-5磁盘阵列
RAID5:分布式奇偶校验的独立磁盘结构 RAID5就是raid0和RAID1的一种折中,既提升了磁盘读写能力,又有一定的容错能力,成本也低: 实验开始: 1.挂载四块5G硬盘 2.进行分区:fdis ...
- 墨水污染的一角qsnctfwp
题目附件 在图片中最直接的信息是电话号码,将号码输入到搜索引擎,可以得到该书的出版社为:高等教育出版社. 进入高等教育出版社官网 根据物料号前四位.版次时间.印次时间,在官网中进行图书查询. 结合字数 ...
- EZHTTP(一键安装Nginx Apache PHP MySQL Memcached Pureftpd)安装【测试ing】
EZHTTP(一键安装Nginx Apache PHP MySQL Memcached Pureftpd)安装 [复制链接] 本帖最后由 梁国平 于 2014-2-11 22:47 编辑 简介 ...
- Django框架——模版层之标签、自定义过滤器 标签及inclusion_tag(了解)、模版的继承与导入、模型层之前期准备、ORM常用关键字
模版层之标签 {% if 条件1(可以自己写也可以用传递过来的数据) %} <p>今天又是周三了</p> {% elif 条件2(可以自己写也可以用传递过来的数据) %} &l ...
- 国内chatGPT中文版网站有哪些?国内人工智能百花齐放!该如何选择?
人工智能技术在中国的快速发展和普及,使得国内的人工智能产业日益壮大.在这些领域中,自然语言处理技术和聊天机器人已经取得了显著的进展.ChatGPT作为一种基于深度学习的聊天机器人模型,在国内得到了广泛 ...