动画受面板限制

有点难以描述，但我会尽力。
我有一个带有图像和标签的控件，它需要有 2 个状态（“大”和“小”）。

在“大”状态下，图像应位于控件顶部中心，标签应位于下方中心（就像带有图像和标签停靠在顶部的停靠栏一样）。

在“小”状态下，图像应该较小并且位于控件的左上角，并且标签应该位于其旁边。

大状态应该是这样的：

还有小州：

棘手的部分是：当我在它们之间切换时，我需要它的动画时间超过 0.3 秒。
我发现没有适合于此的面板。

停靠面板对于这两种状态来说都是一个很好的解决方案，但它无法为其设置动画。
Canvas可以为其设置动画，但没有正确的布局（无法​​轻松地将它们居中）。

最好的方法是什么？

在 WPF 中没有动画对齐，唯一可以出现的 - 它ThicknessAnimation。但您可以使用DiscreteObjectKeyFrame设置对齐方式。下面是一个简单的演示，其中Label set VerticalAlignment in Bottom:

<Grid>
    <Grid.Triggers>
        <EventTrigger SourceName="Small" RoutedEvent="Button.Click">
            <BeginStoryboard>
                <Storyboard>                        
                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Test" Storyboard.TargetProperty="VerticalAlignment">
                        <DiscreteObjectKeyFrame KeyTime="0:0:0">
                            <DiscreteObjectKeyFrame.Value>
                                <VerticalAlignment>Bottom</VerticalAlignment>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>

    <Label x:Name="Test" Content="Test" Width="300" Height="300" Background="Aqua" VerticalAlignment="Top" HorizontalAlignment="Center" />

    <Button Name="Small" Content="Small" Width="100" Height="30" HorizontalAlignment="Right" VerticalAlignment="Top" />
</Grid>

将其与标准动画结合使用，例如DoubleAnimation，我想你一定能够实现这个目标。