Tech Off Thread

4 posts

Silverlight: animate size change

Back to Forum: Tech Off
  • User profile image
    Sven Groot

    In Silverlight, let's say I have a <Border VerticalAlignment="Top"/> with some contents in it. Now those contents change and become bigger; the Border automatically resizes of course to accomodate the new content. So far so good.

     

    But what if I want to animate that change? So when the content of the <Border> control changes, I want it to animate from its current size to the new size. Note that I cannot predict what the size of the new content will be, so I can't just hard-code a value in an animation.

     

    I can't find any way to do this. Any ideas?

  • User profile image
    jopapa

    There are some interesting examples of resizing content panels in Kenny Young's video on Silverlight TV. Check it out. He has some demos (you can grab them from the link) that show how to use panels and as you resize, they animate.

     

    http://channel9.msdn.com/shows/SilverlightTV/Creating-Rich-Interactions-Using-Blend-4-Transition-Effects-Fluid-Layout-and-Layout-States-Silverlig/

  • User profile image
    spivonious

    Can you do it in the code-behind? When the content changes, just start animating the Border to the new size of the content. At least that's how I'd approach it in WPF.

  • User profile image
    Sven Groot

    spivonious said:

    Can you do it in the code-behind? When the content changes, just start animating the Border to the new size of the content. At least that's how I'd approach it in WPF.

    That's what I ended up doing. I'm not sure if the Blend FluidLayout stuff would've worked for me, I couldn't get it to look quite right.

     

    The item in question I wanted to resize was actually a databound item in a ListBox. I'd set it up so that the DataTemplate used for the items changes when an item is selected to show more information inside. In order to do this, I was handling the ListBox.SelectionChanged event to change the ContentTemplate of the containing ListBoxItem whenever they got selected.

     

    To solve the animation problem, I record the ListBoxItem's current ActualHeight, then set the new ContentTemplate, then call UpdateLayout which updates the DesiredSize property. I then create a Storyboard with a DoubleAnimation to animate the height from the old height to the new DesiredSize.Height. This works a charm. Smiley

     

    When the items get unselected, I simply change the Height property back to Double.NaN so they autosize again. Though I suppose I could animate that as well but currently I don't. Smiley

Comments closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.