如何对可见性进行动画处理.折叠 + 更新堆栈面板

Question

我觉得我的标题有点混乱，所以让我详细解释我的问题。

我有一个StackPanel，里面有多个网格。它基本上看起来像一个表格，下面有一个"标题网格"和一个"内容网格"。StackPanel 本身位于 ScrollViewer 中。 每当用户单击"标题网格"时，相应的"内容网格"都应折叠，反之亦然。

这是我的表格的简短版本：

<ScrollViewer Margin="0,0,0,10">
<StackPanel>
<Grid x:Name="Header_Grid1" Height="24" Background="#BF101820" VerticalAlignment="Top" Margin="34,0,0,0" Cursor="Hand" >
<Label Content="Click me to show/hide Content_Grid1"  Padding="5,0" VerticalContentAlignment="Center" Margin="5,0,0,0" Grid.ColumnSpan="2" Width="982"/>
</Grid>
<Grid x:Name="Content_Grid1" Height="100" Width="967" HorizontalAlignment="Right" Margin="0,5,0,0" RenderTransformOrigin="0.5,0.5">
<Label Content="some content"  Foreground="#FF918F82" Padding="5,0" VerticalContentAlignment="Center" Margin="0,0,719,75"/>
<Label Content="some content"  Foreground="#FF918F82" Padding="5,0" VerticalContentAlignment="Center" Margin="0,25,719,50"/>
</Grid>
<Grid x:Name="Header_Grid2" Height="24" Background="#BF101820" Width="1001" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,10,0,0">
<Label Content="Click me to show/hide Content_Grid2"  Padding="5,0" VerticalContentAlignment="Center" Margin="5,0,0,0" Grid.ColumnSpan="2" Width="982"/>
</Grid>
<Grid x:Name="Content_Grid2" Height="100" Width="967" HorizontalAlignment="Right" Margin="0,5,0,0" RenderTransformOrigin="0.5,0.5">
<Label Content="some content"  Foreground="#FF918F82" Padding="5,0" VerticalContentAlignment="Center" Margin="0,0,719,75"/>
<Label Content="some content"  Foreground="#FF918F82" Padding="5,0" VerticalContentAlignment="Center" Margin="0,25,719,50"/>
</Grid>
</StackPanel>
</ScrollViewer >

假设用户单击"Header_Grid1"，"Content_Grid1"通过减小其大小来隐藏"流向顶部"动画。这完全没有问题 - 问题是我希望"Header_Grid2"和"Content_Grid2"在播放隐藏"Content_Grid1"的动画时流向顶部。"Header_Grid2"和"Content_Grid2"不应该只是弹出"Content_Grid1"所在的地方。它应该发生在流畅的动画中。

希望有人明白我的意思。这很难解释... 谢谢

Answer 1

据我所知，您无法对折叠的方法进行动画处理，但是有多种技巧可以解决此问题，例如对不透明度，大小，位置等进行动画处理...