动画受面板限制

Question

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

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

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

大状态应该是这样的：

还有小国：

还有一个棘手的部分：当我在它们之间切换时，我需要它的动画超过 0.3 秒。
我没有找到适合此的面板。

DockPanel 对这两种状态都是一个很好的解决方案，但它不能对其进行动画处理。
Canvas 可以对其进行动画处理，但没有正确的布局（不能这么容易地将它们居中）。

最好的方法是什么？

Answer 1

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

<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，我认为您将能够实现这一目标。