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>
复制代码

吐血三升!

posted @   ggtc  阅读(28)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
//右下角目录
点击右上角即可分享
微信分享提示