在 Windows Phone 中设置高度动画

Question

我有一个包含两个元素的网格，一个搜索表单和一个自定义 UC 来显示项目。当我的页面加载时，查看器控件被隐藏。当单击搜索表单上的按钮时，我会使用情节提要对其进行动画处理。我被困在动画的To=... 部分。我想将它动画到父容器的高度并让它从底部向上滑动。这可能吗？

作为参考，这是我的树结构：

页面资源：

<Storyboard x:Name="animateViewSlide" Storyboard.TargetName="SearchForm" >
        <DoubleAnimation  Storyboard.TargetProperty="Height" To="???" Duration="100"/>
</Storyboard>

控制主体：

<Grid x:Name="LayoutRoot">
    <Grid x:Name="SearchForm" Margin="6,6,6,70">
    <uc:AwesomeViewer x:Name="awesomeView" Awesomeness="{Binding SelectedAwesomeThing}" Visibility="Collapsed"/>
</Grid>

Answer 1

更新

我确实想出了一个更好的方法，而不是使用 Margin 来单步执行动画，只需使用 TranslateTransform 之类的方式为 Y 轴设置动画；

<Grid x:Name="ItemToMove" 
            Visibility="{Binding Condition, Converter={StaticResource boolVisConv}}" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="30,0,0,-32" Opacity="0">
                <Grid.RenderTransform>
                    <TranslateTransform x:Name="notified" Y="40" />
                </Grid.RenderTransform>
                    <Grid.Triggers>
                    <EventTrigger RoutedEvent="Grid.Loaded">
                        <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="notified" Storyboard.TargetProperty="Y">
                                        <SplineDoubleKeyFrame KeyTime="0:0:1.25" Value="0" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ItemToMove" Storyboard.TargetProperty="Opacity">
                                        <SplineDoubleKeyFrame KeyTime="0:0:1.55" Value="1" />
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Grid.Triggers>

结束更新

您的麻烦将源于尝试对自动计算的值 (Height) 进行动画处理，所以我会放弃这个想法，除非您想在父母/孩子身上使用硬编码的尺寸值，或者假设例如，如果应用仅限于纵向模式......然后你的“到”值是 800 像素，但我想这不是你要找的。​​p>

现在，您通常希望您可以将渲染大小输入到您的“To”值中，例如通过To="{Binding ActualHeight, ElementName=LayoutRootOROTHERParentContainer}" 对吧？然而，不，那也行不通……

因此，虽然其他人可能有更好的方法，但我发现的唯一方法是让自动计算的尺寸独自去做他们的事情，而是通过ObjectAnimationUsingKeyFrames 为对象Margin 设置动画当通过DoubleAnimationUsingKeyFrames 与Opacity 转换配对时，实际上看起来相当不错，除了它会为该过程添加一堆额外的XAML。因此，作为一个概念，您可能会尝试更多类似的东西（但是，如果您遇到更好的解决方案，我肯定也想知道它。作为一个谋生的设计师，我经常遇到这种情况。）

概念示例；

（故事板）

<Storyboard x:Name="Kaboom">
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="border">
        <DiscreteObjectKeyFrame KeyTime="0:0:0.1">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,750,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:0.2">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,600,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:0.3">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,550,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:0.4">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,500,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,450,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:0.6">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,400,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:0.7">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,350,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:0.8">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,300,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:0.9">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,250,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:1">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,200,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:1.1">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,150,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:1.2">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,100,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:1.3">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,50,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:1.4">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border">
        <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.01"/>
        <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="1"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

这个概念的快速临时示例；

<Grid Height="800" Width="480" x:Name="ParentContainer">
            <!-- Your SearchForm thingy with its funky margins already set like your example -->
            <Rectangle Margin="6,6,6,70" Fill="Green" />
            <Button Height="100" Width="100" Content="Click Me!" HorizontalAlignment="Left" VerticalAlignment="Top">
                 <!-- Quick button to show it in action -->
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Click">
                            <ei:ControlStoryboardAction Storyboard="{StaticResource Kaboom}"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
            </Button>
            <!-- Your Awesomeness -->
            <Border x:Name="border" Width="300" Background="Blue" HorizontalAlignment="Right" Margin="0,800,0,0" Opacity="0">
                <TextBlock x:Name="textBlock" Text="OH&#10;&#10;SNAP!!!&#10;&#10;Say&#10;&#10;WHAAA??" 
                            TextAlignment="Center" VerticalAlignment="Center"
                            FontSize="40" FontWeight="Bold" Foreground="White"/>
            </Border>
        </Grid>

无论如何，可能并不完全符合您的期望，但它是一个有效的替代方案，尤其是稍加调整，除非像我说的那样，您想要硬编码您的对象大小，以便您可以将“To”值设置为...对于仅限于标准 800x480 纵向模式的手机，只有您可能非常想这样做。但是，如果您没有该选项，我已经使用这种方法完成了一些非常漂亮的设计。

希望这会有所帮助，祝你好运！