在 Windows Phone 8.1 中动画网格的高度没有“运行”

Question

我正在尝试创建一个简单的动画，其中网格从 0 高度动画到设定值 320。（这将产生滑动感觉），同时还动画从 0-1 和返回的不透明度。

我创建了两个故事板并给它们起了名字，它们是：

<Page.Resources>
    <Storyboard x:Name="OpenSettings" Storyboard.TargetName="SettingGrid">
        <DoubleAnimation Storyboard.TargetProperty="Height" Storyboard.TargetName="SettingGrid" To="320"/>
        <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SettingGrid" To="1"/>
    </Storyboard>
    <Storyboard x:Name="CloseSettings">
        <DoubleAnimation Storyboard.TargetProperty="Height" Storyboard.TargetName="SettingGrid" To="0"/>
        <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SettingGrid" To="0"/>
    </Storyboard>
</Page.Resources>

我尝试从代码隐藏运行动画，如下所示：

private void AppBarButton_Click(object sender, RoutedEventArgs e)
    {
        if (settingsOpened)
        {

            CloseSettings.Begin();
            settingsOpened = false;
        }
        else
        {
            OpenSettings.Begin();
            settingsOpened = true;
        }

    }
bool settingsOpened = false;

问题在于Height-doubleanimation。它不会改变网格上的任何高度值。顺便说一下，不透明度动画效果很好。

有谁知道我可以如何解决这个问题？

这也是我要制作动画的网格。请注意我是如何设置固定的起始值的，这使得动画中的“from”属性变得不必要。

<Grid Opacity="1" Height="0" VerticalAlignment="Top" Name="SettingGrid" Background="#151515">
        <CheckBox Margin="10,0,0,0" Content="Use front camera" Height="80"/>
        <TextBlock Text="IP Address" Margin="10,70,10,0" FontSize="25" FontWeight="Light" Height="30" VerticalAlignment="Top"/>
        <TextBox Text="127.0.0.1" Margin="10,100,10,0" Height="40" VerticalAlignment="Top" Name="IPBox"/>
        <TextBlock Text="Port" Margin="10,150,10,0" FontSize="25" FontWeight="Light" Height="30" VerticalAlignment="Top"/>
        <TextBox Text="12345" Margin="10,180,10,0" Height="40" VerticalAlignment="Top" Name="PortBox"/>
        <Slider Margin="10,230,10,0" Height="45" VerticalAlignment="Top" Name="updateFreq" Value="20"/>
        <StackPanel Margin="10,270,0,0" Orientation="Horizontal">
            <TextBlock FontSize="25" VerticalAlignment="Top" Margin="10,0,0,0" FontWeight="Light" HorizontalAlignment="Left" Text="{Binding ElementName=updateFreq, Path=Value}"/>
            <TextBlock Text=" Times per second" FontSize="25" FontWeight="Light" VerticalAlignment="Top"/>
        </StackPanel>
    </Grid> 

正如我所说，为什么动画没有对高度做任何事情？

Answer 1

将 RenderTransform 添加到 SettingGrid 并将其设置为 ScaleTransform.ScaleY 的动画，而不是动画高度，从 0 到 1.0。另一种选择是使用内置的个性转换而不是自定义动画（请参阅Quickstart: Animating your UI using library animations (XAML)）

动画高度会影响场景的布局，需要与主 UI 线程同步。 这被称为“依赖动画”。为 RenderTransform 设置动画将产生非常相似的效果，但不需要额外的布局通道，并且可以在渲染线程上完全运行。这称为“独立动画”。

尽可能首选独立动画。应该避免依赖动画，默认情况下是禁用的。如果您真的想坚持为 Height 属性设置动画，则需要将 EnableDependentAnimation 属性设置为 true。

此场景（高度与 RenderTransform 比例）是Make animations smooth (XAML) 文档中使用的示例。

Blend 也非常适合设置动画。这是一个简单的例子。 Blend 更喜欢 CompositeTransform，因为它更灵活。如果您知道您只需要缩放，那么您可以使用 ScaleTransform。如果您希望它从顶部而不是中间打开，您可以将 RenderTransformOrigin 更改为 0.5,0.0。

<Page.Resources>
    <Storyboard x:Name="OpenSettings">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="SettingGrid">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="SettingGrid">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>

<Grid x:Name="SettingGrid" Background="{StaticResource ApplicationPageBackgroundThemeBrush}" RenderTransformOrigin="0.5,0.5">
    <Grid.RenderTransform>
        <CompositeTransform/>
    </Grid.RenderTransform>
</Grid>

Answer 2

尝试在 DoubleAnimation 中设置 From 值，例如：

<Storyboard x:Name="OpenSettings" Storyboard.TargetName="SettingGrid">
    <DoubleAnimation Storyboard.TargetProperty="Height" Storyboard.TargetName="SettingGrid" From="0" To="320"/>
    <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SettingGrid" To="1"/>
</Storyboard>
<Storyboard x:Name="CloseSettings">
    <DoubleAnimation Storyboard.TargetProperty="Height" Storyboard.TargetName="SettingGrid" From="320" To="0"/>
    <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SettingGrid" To="0"/>
</Storyboard>

编辑：改用“(FrameworkElement.Height)”

<Storyboard x:Name="OpenSettings" Storyboard.TargetName="SettingGrid">
    <DoubleAnimation Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="SettingGrid"  To="320"/>
    <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SettingGrid" To="1"/>
</Storyboard>
<Storyboard x:Name="CloseSettings">
    <DoubleAnimation Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="SettingGrid"  To="0"/>
    <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SettingGrid" To="0"/>
</Storyboard>