我想实现一个“盲目”动画。它是这样的,
- 从元素
Visibility = Visibility.Collapsed
开始Height = 0
- 将元素设置为
Visibility = Visibility.Visible
- 从 0动画
Height
到最终高度
但是,通过 Blend 在 XAML 中定义的动画需要事先知道最终高度。在 C# 中,可以以编程方式设置最终高度,但我不知道如何在处于折叠状态时获得最终高度。
我将如何编程这种效果?
我正在使用 Windows Phone 7。
我想实现一个“盲目”动画。它是这样的,
Visibility = Visibility.Collapsed
开始Height = 0
Visibility = Visibility.Visible
Height
到最终高度但是,通过 Blend 在 XAML 中定义的动画需要事先知道最终高度。在 C# 中,可以以编程方式设置最终高度,但我不知道如何在处于折叠状态时获得最终高度。
我将如何编程这种效果?
我正在使用 Windows Phone 7。
你不需要知道那个高度。对于这样的任务,MS 已经有了一个叫做“流体布局”的功能。
看看这里:
绿色复选框切换所谓的“流体布局”。你应该打开它。粉色字段是默认的过渡持续时间。您应该将其设置为某个合理的值。
完成此操作后,您可以使用 Visibility.Collapsed 开始您的元素,并使高度保持不动画 - 视觉状态管理器将为您生成一个很好的过渡。如果您选中黄色按钮,您将在单击不同状态时在 Blend 中预览翻译。
此演示文稿中的更多信息,从 00:04:00 开始播放。
好的,这是另一种技术,如何将高度从 0 设置为 100%。
警告:以下未经测试的代码 - 来自另一个 SO 答案的编译。
在您的元素中(这里我假设它是一个堆栈面板):
<StackPanel x:Name="myTransformPanel">
<StackPanel.RenderTransform>
<ScaleTransform></ScaleTransform>
</StackPanel.RenderTransform>
</Stackanel>
在动画中:
<Storyboard x:Name="myStoryboard">
<DoubleAnimation
Storyboard.TargetName="myTransformPanel"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
From="0" To="1" Duration="0:0:1" />
</Storyboard>