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.
精彩评论