c# - 在 Windows Phone 8.1 中动画网格的高度不是 "running"

Question

我正在尝试创建一个简单的动画，其中网格从 0 高度动画化到设定值 320。(这会产生滑动感)，同时还为不透明度从 0-1 来回动画。

我创建了两个 Storyboard并给它们命名，它们是:

<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-double动画上。它不会改变网格上的任何高度值。顺便说一下，不透明度动画效果很好。

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

这也是我要制作动画的网格。请注意我是如何设置固定起始值的，这使得动画中的“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

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

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

尽可能使用独立动画。应避免依赖动画，默认情况下禁用。如果你真的想坚持使用 Height 属性的动画，那么你需要设置 EnableDependentAnimation属性为真。

此场景(高度与 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>