CODEWITHSUNDEEP
xamlwindows-10-universal
Jakub Wisniewski
Jakub Wisniewski

Reputation: 2249

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>

Upvotes: 0

Views: 693

Answers (1)

XAMlMAX
XAMlMAX

Reputation: 2363

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

Upvotes: 1

Related Questions