这个问题困扰了我一天,最后下了个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展开收缩动画的更多相关文章

  1. max-height实现任意高度元素的展开收缩动画

    http://dobinspark.com.cn/ 前言: 在说到实现元素的展开收缩,通常的想法是通过控制display的元素属性和none之间的切换,虽然说功能可以实现,但是这种展开是没有任何动画的 ...

  2. 右上角鼠标滑过展开收缩动画效果js代码的演示页面

    http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...

  3. vuejs实现折叠面板展开收缩动画

    vuejs通过css3实现元素固定高度到auto高度的动画和auto高度到固定高度的动画. 循环列表,html: <template> <div class="newsli ...

  4. ios-tableViewcell展开与收缩动画处理

    [前言] 在使用华尔街见闻 app 时,看到它的 tableVeiw 上的 cell 具有很好的展开与收缩功能.于是自己想了一下实现,感觉应该挺简单的,于是心痒痒写个 demo 实现一波.华尔街见闻 ...

  5. iOS tableview cell 的展开收缩

    iOS tableview cell 的展开收缩 #import "ViewController.h" @interface ViewController ()<UITabl ...

  6. SlickGrid example 5:带子项的展开收缩

    带子项的展开收缩.   代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Ty ...

  7. 点击UITableView的cell展开收缩

    在项目中有个需求,点击表视图的单元格展开,再点击另外一个单元格或者本身又收缩,经过一段时间尝试,实现了该功能,现在记录分享总结下.   首先要理解UITableView代理方法调用的先后顺序.   当 ...

  8. HTML5每日一练之details展开收缩标签的应用

    details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现.注:目前仅Chrome支持此标签. details有一个新增加的子标签——summary,当鼠标点击su ...

  9. 展开/收缩 ul

    了一个展开收缩的东东,留着以后万一用到 后台递归生成的函数(这里是一个反射参数展示,支持多层级展开显示,后台反射如何多层级解析的方法有时间再补上吧) /// <summary> /// 递 ...

  10. js实现的侧边栏展开收缩效果

    原文地址:http://www.softwhy.com/forum.php?mod=viewthread&tid=12246 <!DOCTYPE html> <html> ...

随机推荐

  1. Qt线程简单使用一:QThread~创建线程类子类

      需求: 点击QPushButton按钮,QLabel中的数字,不断累加,一直到999.   做法: 点击QPushButton后,启动线程,线程while循环,不断发送累加的数字回主线程,修改QL ...

  2. HTTP 使用指南

    0x1 初识 HTTP 协议 网页加载流程 graph LR A(user 输入网址)==>B(browser 进程) B==>C(处理输入信息) B-->D(页面加载完成) C== ...

  3. sql 语句系列(众数中位数与百分比)[八百章之第十五章]

    众数 众数就是出现最多的那个数. select sal,count(*) as cnt from emp where DEPTNO=20 group by sal 通过分组把他们的行数计算出来.那么最 ...

  4. Java中list集合深复制

    import org.apache.commons.collections.CollectionUtils; import java.util.ArrayList; import java.util. ...

  5. 使用树莓派远程控制灯继电器开关,dht11温湿度网页显示,树莓派物联网

    前段时间使用esp8266搞了个智能家居,通过网页控制,但是没有办法实现远程控制,只能局域网控制,因为我没有平台,使用机制云等平台还需要开发app 使用chatgpt生成的main.py程序 from ...

  6. 向量数据库Chroma学习记录

    一 简介 Chroma是一款AI开源向量数据库,用于快速构建基于LLM的应用,支持Python和Javascript语言.具备轻量化.快速安装等特点,可与Langchain.LlamaIndex等知名 ...

  7. 我们为什么需要操作系统(Operating System)?

    我们为什么需要操作系统(Operating System)? a) 从计算机体系的角度,OS向下统筹了所有硬件资源(1),向上为所有软件提供API调用(2),使得软件程序员不必知晓硬件的具体细节,实现 ...

  8. 还原数据库从远端环境到本地开发环境,数据SINGLE_USER问题

    要还原到本地开发环境,首先要detach本地数据库或者是删除本地数据库,不然提示在使用中还原不了,但是搞过几次去做detach和drop数据库时,总是不成功,最后还出现个单用户模式,莫名奇妙 为此网上 ...

  9. SRC信息收集方法论

    "感谢您阅读本篇博客!如果您觉得本文对您有所帮助或启发,请不吝点赞和分享给更多的朋友.您的支持是我持续创作的动力,也欢迎留言交流,让我们一起探讨技术,共同成长!谢谢!" SRC信息 ...

  10. 【笔记】connect by中的nocycle

    connect by主要用于父子,祖孙,上下级等层级关系的查询 常用的是prior,nocycle prior: 查询父行的限定符,格式: prior column1 = column2 or col ...