动画受面板限制

Question

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

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

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

大州应该如此：

小州：

棘手的部分：当我在它们之间切换时，我需要它以超过0.3秒的动画 没有我认为适合的小组。

DockPanel 对于这两种状态都是一个很好的解决方案，但它无法为其设置动画。
画布可以为其设置动画，但没有合适的布局（不能轻易地将它们居中）。

最好的方法是什么？

Answer 1

在WPF中没有动画对齐，唯一可以出现的是它ThicknessAnimation。但您可以使用DiscreteObjectKeyFrame来设置对齐方式。以下是Label VerticalAlignment中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

将它与标准动画结合使用，例如{{1}}，我认为您将能够实现此目标。