Question

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?

Answer 1

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.