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> ...
随机推荐
- 今晚战码先锋润和赛道第2期直播丨如何参与OpenHarmony代码贡献
「OpenHarmony 开源贡献者计划 2022」战"码"先锋 PR 征集,"润和赛道"已于6月15日正式开启.套件在手.先机在握,更有润和软件的超多赋能和专 ...
- 构筑智能未来的开源 .Net AI知识库/智能体项目
在这个信息爆炸的时代,我们如何快速准确地从汪洋大海的数据中抽取真正有价值的知识呢?AntSK,一个基于.NET开发的人工智能知识库和智能体项目,似乎给出了一个新颖的答案.今天,就让我们一起深入了解An ...
- 踩坑指南:入门OpenTenBase之监控篇
本次监控将采用Prometheus.Grafana可视化工具以及postgres_exporter对OpenTenBase进行全面监控和优化. 安装监控 Docker安装 1.Docker要求 Cen ...
- 抓包整理外篇——————https 抓包 [ 五]
前言 简单介绍一下https 抓包. 正文 可能有人一开始的时候发现抓包都抓不到,原因也很简单,那是因为https 需要解密. 那么为什么https 不解密呢? 那是因为证书信任问题. 下面先介绍,上 ...
- EDA(Exploratory Data Analysis)数据探索性分析
EDA目的:通过了解数据集的分布情况,数据之间的关系,来帮我们更好的后期进行特征工程和建立模型. 本文主要是一个根据coco数据集格式的json文件,来分析数据集中图片尺寸,宽高比,bbox尺寸,宽高 ...
- Django3.0连接数据库注意点
需先在应用下的__Init__.py文件中配置 import pymysqlpymysql.version_info=(1, 3, 13, 'final', 0) # 3.0时需要pymysql.in ...
- 一文搞懂传统单节点网站的 Serverless 上云
简介: 阿里云函数计算 FC 是事件驱动的全托管计算服务,真正的无需去考虑服务器的运维管理,只需要完成开发的代码进行上传,函数计算会通过角色策略去规划计算资源,弹性的方式执行函数,最后高效的执行部署. ...
- OpenYurt 之 Yurthub 数据过滤框架解析
简介:OpenYurt 是业界首个非侵入的边缘计算云原生开源项目,通过边缘自治,云边协同,边缘单元化,边缘流量闭环等能力为用户提供云边一体化的使用体验.在 Openyurt 里边缘网络可以使用数据过滤 ...
- 阿里云云效技术专家:一文详解kubernetes下5种常见发布模式如何选择
简介: Kubernetes下5场场景应用发布方式的选择,每种发布模式适合什么样的场景,以及如何在阿里云云效上高效落地. 作者:郑云龙,阿里云云效技术专家 Kubernetes面向通用场景提供了非常灵 ...
- Spring Cloud Gateway一次请求调用源码解析
简介: 最近通过深入学习Spring Cloud Gateway发现这个框架的架构设计非常简单.有效,很多组件的设计都非常值得学习,本文就Spring Cloud Gateway做一个简单的介绍,以及 ...