Animate height of panel

How-to Discussions
1

How do I annotate animating a Panel that changes height dynamically.

I have a PageControl vertically centered in a StackPanel. Whenever the page control changes page – the it jumps to it’s new vertical position.

Is there any way I can tell it to animate that height change?

<StackPanel ContentAlignment="VerticalCenter">
    <PageControl>
        <Page>
            <!-- Page with 100px height -->
        </Page>
        <Page>
            <!-- Page with 200px height -->
        </Page>
    <PageControl>
</StackPanel>

In the above example I’ve written the heights as constants, but the fact is, that I do not know the exact height beforehand – it is just whatever the page renderes to.

2

You can add a LayoutAnimation to the StackPanel to make it respond to changes in layout over time. Something like this is probably what you want:

<LayoutAnimation>
    <Move RelativeTo="PositionChange" Y="1" Duration="0.5" Easing="CubicInOut" />
    <Resize RelativeTo="SizeChange" Y="1" Duration="0.5" Easing="CubicInOut" />
</LayoutAnimation>
3

Perfect! I’ll try that.

Thank you!