WPF/XAML实现Expander自下而上展开动画时SizeToContent属性冲突问题

问题根源 #

异常表现由两个布局逻辑冲突导致：

1. 根容器StackPanel设置了VerticalAlignment="Bottom"，配合SizeToContent="Height"时，窗口初始高度刚好贴合所有内容的总高度。此时内部容器高度增加，WPF布局系统会优先保持窗口底部位置固定，新增高度向顶部方向扩展，所以内容看起来是自上而下滑出，甚至会把顶部内容顶出窗口可视区域。
2. 直接对父容器做Height动画，同时内容Visibility直接绑定IsExpanded，会导致内容在Height动画过程中直接完全显示，没有自下而上滑入的过渡效果。

解决方案 #

直接替换XAML代码为以下版本即可复现Windows 10风格的Expander交互效果：

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp"
        mc:Ignorable="d"
        Title="MainWindow" Width="480"
        SizeToContent="Height">
    <StackPanel VerticalAlignment="Top">
        <TextBlock Margin="5 0 0 0" Height="21">TITLE</TextBlock>
        <!-- First Panel -->
        <StackPanel>
            <StackPanel.Resources>
                <Style TargetType="StackPanel" x:Key="StackPanelMain">
                    <Style.Triggers>
                        <EventTrigger RoutedEvent="Expander.Expanded">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:0.25" To="160" />
                                    <DoubleAnimation Storyboard.TargetName="ExpandContent" Storyboard.TargetProperty="RenderTransform.Y" Duration="0:0:0.25" To="0" />
                                    <DoubleAnimation Storyboard.TargetName="ExpandContent" Storyboard.TargetProperty="Opacity" Duration="0:0:0.25" To="1" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandContent" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="Expander.Collapsed">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:0.15" To="21" />
                                    <DoubleAnimation Storyboard.TargetName="ExpandContent" Storyboard.TargetProperty="RenderTransform.Y" Duration="0:0:0.15" To="160" />
                                    <DoubleAnimation Storyboard.TargetName="ExpandContent" Storyboard.TargetProperty="Opacity" Duration="0:0:0.15" To="0" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandContent" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0.15" Value="{x:Static Visibility.Collapsed}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Style.Triggers>
                </Style>
                <Style TargetType="TextBox">
                    <Setter Property="Margin" Value="5 5 0 0" />
                    <Setter Property="Width" Value="360" />
                </Style>
            </StackPanel.Resources>
            <StackPanel Style="{StaticResource StackPanelMain}" Height="21">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Margin="5 0 0 0">First Panel</TextBlock>
                    <Separator Margin="5 0 5 0" Opacity="0.5" Width="360"/>
                    <Expander x:Name="FirstPanelExpander" />
                </StackPanel>
                <StackPanel Orientation="Vertical" x:Name="ExpandContent" Opacity="0" Visibility="Collapsed">
                    <StackPanel.RenderTransform>
                        <TranslateTransform Y="160"/>
                    </StackPanel.RenderTransform>
                    <TextBox />
                    <TextBox />
                    <TextBox />
                    <TextBox />
                    <TextBox />
                </StackPanel>
            </StackPanel>
        </StackPanel>
        <StackPanel Height="21">
            <TextBlock Margin="5 0 0 0">Next Panel</TextBlock>
        </StackPanel>
    </StackPanel>
</Window>

核心修改说明 #

• 根StackPanel将VerticalAlignment="Bottom"改为VerticalAlignment="Top"：确保窗口高度随内容增加时向下扩展，不会向上顶出内容，完美适配SizeToContent="Height"属性。
• 展开内容区域添加TranslateTransform位移属性和初始透明度设置：让内容初始位置位于Expander栏下方不可见，为滑入动画做准备。
• 调整动画逻辑：展开时同时执行父容器高度增加、内容向上位移、内容透明度提升三个动画，完全复现Windows 10 Expander的自下而上滑出效果。
• 移除内容Visibility与IsExpanded的直接绑定：改为动画过程中控制可见性，避免内容提前显示导致的闪烁问题。

内容的提问来源于stack exchange，提问作者user12572