How to animate height of control in Windows 8 XAML

Question

I'm having trouble performing a simple storyboard-based animation of a controls height in a Metro-style C#/XAML application on Windows 8.

The following trivial XAML and code behind snippets work fine in Silverlight 5 and Windows Phone 7, yet do nothing in Windows 8 (at least for me):

<Page.Resources>
    <Storyboard x:Name="expandAnimation">
        <DoubleAnimation Storyboard.TargetName="scaleButton" Storyboard.TargetProperty="Height" From="50" To="200" Duration="0:0:1"/>
    </Storyboard>
</Page.Resources>

<StackPanel Width="200">
    <Button x:Name="scaleButton" Click="scaleButton_Click" Content="Scale"/>
    <Button Content="Another button"/>
    <Button Content="Yet another button"/>
</StackPanel>

C# code:

private void scaleButton_Click(object sender, RoutedEventArgs e)
{
    expandAnimation.Begin();
}

The same code can be altered to animate other properties of the control such as Opacity which works as expected.

I can animate a ScaleTransform to do the scaling, but it alters the internal rendering of the control, and does not affect the layout of neighbouring controls which is a problem for me.

Hopefully I'm not missing anything obvious here, but shouldn't this just work?

Spiller

Answer 1

You just need to add EnableDependentAnimation="True" and then it should work fine.

Corinnacorinne

Thank you very much @Sofian! Adding EnableDependentAnimation="True" to the DoubleAnimation element in the xaml above did the trick. – Spiller

Thanks a lot but can you explain what this property does. – Emilia

@Emilia msdn.microsoft.com/en-us/library/windows/apps/xaml/… explains the reason – Modify

I waste half an hour with this such thing getting crazy, thx a lot! – Oletaoletha

Answer 2

A dependent animation is one that will cause the Xaml to re-layout. Expensive; therefore requiring an "opt-in".

http://msdn.microsoft.com/en-us/library/windows/apps/xaml/windows.ui.xaml.media.animation.pointanimation.enabledependentanimation.aspx

If possible you should use a render transform and scale the element's visual instead. This is independent meaning that the rest of the elements on the page will not need to move to accommodate.

Dapsang