Expand/Collapse Grid | 易学教程

问题

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

So far I used

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

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.

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

回答1:

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>

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

来源：https://stackoverflow.com/questions/35656421/expand-collapse-grid

标签

xaml

windows-10-universal