Animated height change in Windows metro - xaml

Question

that will work as expander. I want to make expanding animated.
So, i made this:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SuspendExpand">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Suspend"/>
<VisualState x:Name="Expand">
<Storyboard>
<DoubleAnimation Duration="0" To="439" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="MyRectangle" EnableDependentAnimation="true"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="MyRectangle" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="177" Margin="313,281,0,0" Stroke="Black" VerticalAlignment="Top" Width="342" Tapped="rectangle_Tapped"/>
And method:
private void rectangle_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
{
VisualStateManager.GoToState(this, "Expand", true);
}
But the expanding isn't animated.
But when i use this:
<Page.Resources>
<Storyboard x:Name="NewStory">
<DoubleAnimation Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Height" From="177" EnableDependentAnimation="true" To="500" Duration="0:0:1" />
</Storyboard>
</Page.Resources>
And method:
private void rectangle_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
{
NewStory.Begin();
}
It is animated. What is the difference? Does it mean that i can't use visual states?

Answer 1

I think it's because you're animating the Height property. If you animated using the scale transform it will work.
Like this:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SuspendExpand">
<VisualStateGroup.Transitions>
</VisualStateGroup.Transitions>
<VisualState x:Name="Suspend" />
<VisualState x:Name="Expand">
<Storyboard>
<DoubleAnimation Duration="0:0:0.5" To="2.1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="MyRectangle" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>