开发者

MVVM in Silverlight and Animations

Given that we have the following View:

<StackPanel>

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

<StackPanel/>

At startup, when the ViewModel is initialized and bound to the View, the vmImageVisProp is set to Collapsed. It is correct, I don't need to reserve space for a hidden image.

At some point of application execution a logic tells the VM to make the Image visible. If I just set the vmImageVisProp property to Visible, my StackPanel will re-size momentarily, creating a not desired jumpy effect.

But I want to animate a smooth re-size of the StackPanel, and then, when the blank space is ready, the image will appeare there.

I know how to have a sequence of animations for this.

What I don't know, is how to work around an unknown final size of the StackPanel. I need to know it in order to tell the animation of how big the value of StackPanels' height should get.

I know that the stack panels' height should increase by 10 (the height of the appearing image), but when I define an animation, I need to explicitly set the resulting height on the stackPanel.

Since I am to execute an animation from a ViewModel code, I could have calculated it on the fly, but I am not aware of how to 开发者_如何学编程get the Height of a StackPanel, since the viewModel knows nothing of it.

What is the correct way to animate such an image insertion?


With WPF and Silverlight (for the web) there is a Visibility.Hidden value that hides the element but reserves the space it would require. However, I think this is not available in Silverlight for Windows Phone 7.

As an alternative, how about setting the image's Opacity to zero, then setting it to 1 to reveal it? With a zero opacity you will have the image height / width available to you in order to perform your animation.


In case anyone needs a solution for future reference:

I have found this blog article: http://dotnetbyexample.blogspot.com/2011/01/viewmodel-driven-animations-using.html

It shows how I can use ViewModel driven animation using the features in Visual State Manager.

Exactly what I needed.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜