Expand/Collapse 网格

Question

我正在尝试 Collapse/Expand 带有动画的网格，并在动画中相应地移动所有其他组件。

到目前为止我用过[=13=]

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="GridName">
     <DiscreteObjectKeyFrame KeyTime="0:0:0.59" Value="0,0,0,0" />
     (...more frames)
</ObjectAnimationUsingKeyFrames >

但效果差强人意（动画不流畅）。我在想新控件是否有这样的选项？我还遇到了一些 Expanding/Collapsing ListViews - 但它们无法使用包含数据的列表视图。

编辑：我尝试为高度设置动画属性 - 但没有任何反应（没有错误，也没有可见的结果）。在我的代码下方：

<Storyboard x:Name="MainImageSlideOut">
        <DoubleAnimation Duration="0:0:1" To="0" 
                             Storyboard.TargetProperty="Height" 
                             Storyboard.TargetName="Grid" 
                             EnableDependentAnimation="True"/>

</Storyboard>
<Storyboard x:Name="MainImageSlideIn">
        <DoubleAnimation Duration="0:0:1" To="250" 
                             Storyboard.TargetProperty="Height" 
                             Storyboard.TargetName="Grid" 
                             EnableDependentAnimation="True"/>

</Storyboard>

....

<Grid Background="#171717">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>

    <Grid Grid.Row="1" 
          Height="250"
          x:Name="Grid" 
          Background="#202020" />            

    <ScrollViewer Grid.Row="2">
    ...
    </ScrollViewer>

</Grid>

Answer 1

我的应用程序中有类似的功能。
我使用它的方式是使用 ScaleTransform 这里是一个例子：

<Storyboard x:Key="gridLoading">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="IAmGroot">
        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">
            <EasingDoubleKeyFrame.EasingFunction>
                <CubicEase EasingMode="EaseOut"/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="IAmGroot">
        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
     </DoubleAnimationUsingKeyFrames>
</Storyboard>

这将从屏幕中间加载网格并将其展开以适合屏幕。
如果您想对所有元素执行动画，那么这个动画就可以了，但是如果您需要不同的行为，您可能必须单独处理 Grid 中的项目的动画。
HTH

Expand/Collapse 网格

Expand/Collapse Grid

xaml

windows-10-universal