Silverlight 和动画中的 MVVM答案

【问题标题】：MVVM in Silverlight and AnimationsSilverlight 和动画中的 MVVM
【发布时间】：2011-09-01 17:45:22
【问题描述】：

鉴于我们有以下观点：

<StackPanel>

<TextBlock Text="Some text"/>
<Image Source="{Binding vmImageProp}" Height="10" Visibility="{Binding vmImageVisProp}" />

<StackPanel/>

在启动时，当 ViewModel 初始化并绑定到 View 时，vmImageVisProp 设置为 Collapsed。没错，我不需要为隐藏图片预留空间。

在应用程序执行的某个时间点，一个逻辑告诉 VM 使 Image 可见。如果我只是将vmImageVisProp 属性设置为Visible，我的 StackPanel 将立即重新调整大小，从而产生不想要的跳跃效果。

但是我想为 StackPanel 的平滑调整大小制作动画，然后，当空白空间准备好时，图像就会出现在那里。

我知道如何为此制作一系列动画。

我不知道如何解决 StackPanel 的未知最终大小。我需要知道它才能告诉动画 StackPanels 的高度值应该有多大。

我知道堆栈面板的高度应该增加 10（出现图像的高度），但是当我定义动画时，我需要在 stackPanel 上显式设置结果高度。

由于我要从 ViewModel 代码执行动画，我可以即时计算它，但我不知道如何获取 StackPanel 的高度，因为 viewModel 对此一无所知。

为此类图像插入设置动画的正确方法是什么？

【问题讨论】：

【解决方案1】：

使用 WPF 和 Silverlight（用于 Web）时，有一个 Visibility.Hidden 值可以隐藏元素但保留它所需的空间。但是，我认为这在 Silverlight for Windows Phone 7 中不可用。

作为替代方案，如何将图像的Opacity 设置为零，然后将其设置为 1 以显示它？如果不透明度为零，您将可以使用图像高度/宽度来执行动画。

【讨论】：

我不需要其他方法来制作动画。除此之外，我不希望为图像保留空间。我需要动态扩展 StackPanel，为此我需要知道如何在我的 ViewModel 中获取 StackPanel 的大小。

【解决方案2】：

如果有人需要解决方案以供将来参考：

它展示了我如何使用 Visual State Manager 中的功能来使用 ViewModel 驱动的动画。

正是我需要的。

【讨论】：