展开/折叠网格 [英] Expand/Collapse Grid

问题描述

我正在尝试使用动画折叠/展开网格，并在动画时相应地移动所有其他组件.

I am trying to Collapse/Expand Grid with animation and while it's animating move all other components accordingly.

到目前为止我用过

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

但效果远不能接受(动画不流畅).如果新控件有这样的选项，我就在徘徊?我还遇到了一些扩展/折叠 ListViews - 但它们不能用于包含数据的.

But the effect is far from acceptable (animation not smooth). I was wandering if the new controls has such options? I also came across some Expanding/Collapsing ListViews - but they did not work with which contains data.

我尝试为 heights 属性设置动画 - 但没有任何反应(没有错误，也没有可见的结果).在我的代码下方:

I tried animating the heights property - but nothing happen (no error and no visible result). Below my code:

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

推荐答案

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

I have a similar functionality in my application.
the way I use it is by using ScaleTransform here is an example:

<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

This will load the grid from the middle of the screen and expand it to fit the screen.
If you want to perform an animation on all of the elements then this animation will do the trick, however if you need different behavior you will probably have to handle animation for the items inside of your Grid separately.
HTH

这篇关于展开/折叠网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！