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

<强>更新

我确实找到了更好的方法，而不是使用边距来逐步完成动画，只需使用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>

END UPDATE

你的麻烦将来自试图动画一个自动计算的值（Height）所以我会废弃这个想法，除非你想在你的父母/孩子身上使用硬编码的大小值，或者只是假设如果应用程序仅限于纵向模式....那么你的“To”值是800px，除了我想这不是你想要的。

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

因此，虽然其他人可能有更好的方法，但我发现的唯一方法是将自动计算的尺寸单独留下以完成他们的工作，而是通过{{为对象的步进设置动画Margin。通过ObjectAnimationUsingKeyFrames与Opacity转换配对时实际看起来相当不错，除非它会为进程添加一堆额外的XAML。所以作为一个概念你可以尝试更像这样的东西（但是如果你遇到更好的解决方案，我肯定也想知道它。作为一个生活的设计师，我经常遇到这个问题。）

概念示例;

（故事板）

DoubleAnimationUsingKeyFrames

该概念的一个快速的例子;

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

无论如何，可能并不完全是你所希望的，但是它是一种有效的选择，特别是稍微调整一下，除非像我说的那样，你想要对你的对象大小进行硬编码，这样你才有可能将你的“To”值设置为...对于仅限于标准800x480纵向模式的手机，您可能非常想要。但是，如果你没有这个选项，我会使用这种方法来完成一些漂亮漂亮的设计。

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

在WIndows Phone中设置动画高度

1 个答案: