Развернуть/свернуть Grid

Question

Я пытаюсь свернуть/развернуть сетку с помощью анимации, а во время ее анимации переместить все остальные компоненты соответственно.

До сих пор я использовал

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

Но эффект далек от приемлемой (анимация не гладкая). Я блуждал, если у новых элементов управления есть такие возможности? Я также столкнулся с некоторыми расширениями/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