这个问题困扰了我一天,最后下了个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. OpenHarmony 社区运营报告(2023 年 10 月)

      ● 截至2023年10月,OpenHarmony社区共有51家共建单位,累计超过6200名贡献者产生24.2万多个PR,2.3万多个Star,6.1万多个Fork,59个SIG. ● OpenHa ...

  2. Mysql之innodb架构

    Innodb存储引擎的架构 内存结构 Bufer Pool 缓冲池是主内存中的一个区域,里面可以缓存磁盘上经常操作的真实数据,在执行增删改查操作时,先操作缓冲池中的数据(若缓冲池没有数据,则从磁盘加载 ...

  3. 带你走进红帽企业级 Linux 6体验之旅(安装篇)

    红帽在11月10日发布了其企业级Linux,RHEL 6的正式版(51CTO编辑注:红帽官方已经不用RHEL这个简称了,其全称叫做Red Hat Enterprise Linux).新版带来了将近18 ...

  4. 重新整理 .net core 实践篇—————应用层[三十]

    前言 简单介绍一下应用层. 正文 应用层用来做什么的呢? 应用层用来做处理api请求的. [HttpPost] public Task<long> CreateOrder([FromBod ...

  5. js es6 标签模板还原字符串

    前言 模板字符串的功能,它可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串.这被称为"标签模板"功能(tagged template). 举个栗子: function ...

  6. ubuntu 20.04.1 安装 PHP+Nginx

    ubuntu 20.04.1 安装 PHP+Nginx 更新源 sudo apt-get update 安装环境包 sudo apt-get -y install nginx sudo apt-get ...

  7. MMdeploy TensorRT 模型实时监控桌面,PyQt5实现

    本项目遵从:GNU General Public License v3.0 个人博客『 gy77 』: GitHub仓库 :代码源码详见仓库 demo_qt.py 我的CSDN博客 我的博客园 简介: ...

  8. leetcode:94. 二叉树的中序遍历

    94. 二叉树的中序遍历 给定一个二叉树,返回它的中序 遍历. 示例: 输入: [1,null,2,3] 1 \ 2 / 3 输出: [1,3,2] 进阶: 递归算法很简单,你可以通过迭代算法完成吗? ...

  9. 【笔记】Oracle列转行unpivot&行转列 PIVOT

    unpivot 说明:将表中多个列缩减为一个聚合列(多列转多行) 语法:unpivot(新列名 for 聚合列名 in (对应的列名1-列名n )) 写到了一个力扣的题,发现这个unpivot函数还没 ...

  10. 配置审计(Config)配合开启OSS防盗链功能

    简介: 本文作者:紫极zj 本文将主要介绍利用[配置审计]功能,如何快速发现企业上云过程中,针对未配置防盗链的 OSS Bucket 定位及修复案例. 前言 配置审计(Config)将您分散在各地域的 ...