Windows Metro 中的动画高度变化答案

【问题标题】：Animated height change in Windows metroWindows Metro 中的动画高度变化
【发布时间】：2014-09-03 08:17:47
【问题描述】：

这将用作扩展器。我想让扩展动画。所以，我做了这个：

<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"/>

和方法：

    private void rectangle_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
    {
        VisualStateManager.GoToState(this, "Expand", true);
    }

但是扩展不是动画的。

但是当我使用这个时：

<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>

和方法：

    private void rectangle_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
    {
        NewStory.Begin();
    }

它是动画的。有什么不同？这是否意味着我不能使用视觉状态？

【问题讨论】：

标签： xaml animation windows-8 windows-8.1

【解决方案1】：

我认为这是因为您正在为 Height 属性设置动画。如果您使用比例变换进行动画处理，它将起作用。

像这样：

        <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>

【讨论】：

不，这将缩放矩形的内容！换句话说，如果它是包含项目的堆栈面板，项目将相应地缩放。我已经编写了一个适用于我的问题的解决方案，但我想知道为什么它在 VisualStates 中不起作用