如何动画 Visibility.Collapsed + 更新 StackPanel答案

【问题标题】：How to Animate Visibility.Collapsed + Update StackPanel如何动画 Visibility.Collapsed + 更新 StackPanel
【发布时间】：2017-05-27 04:50:01
【问题描述】：

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

我有一个 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”所在的位置。它应该发生在流畅的动画中。

希望有人能理解我的意思。实在是太难解释了…… 谢谢

【问题讨论】：

请考虑正确使用 WPF，xaml 不可读。不要使用拖放，而是使用面板、对齐和边距。
是的，很抱歉。我是 xaml 的新手，之前只使用过 WinForms。我的代码就像你提到的那样几乎是工具箱拖放，但没有人是完美的，因为我是在业余爱好的基础上编码，所以我需要一些时间才能完全理解 xaml。
我真的很想帮助你，但你很难做到。无论如何，作为未来的提示，只需关闭工具箱并且永远不要再次打开它，使用 WPF 编程时不需要它，只需在智能感知的帮助下声明控件，然后你就没有像你的丑陋的构造了代码。无论如何，你能解释一下为什么 Header2 没有上浮吗？当您降低 ContentGrid1 的高度时，标题应缩小间隙（因为它在同一个 StackPanel 中）。
是的，感谢您的建议，从现在开始，我将尽我所能避免使用工具箱。我真的不知道为什么 Header2 不浮动。它只是原地不动，直到调整 ContentGrid1 大小的动画完成。然后 Header2 会弹出到 Content1 所在的位置。
您可以编辑您的问题并添加调整 ContentGrid1 大小的代码吗？我认为出了点问题。

标签： c# wpf xaml

【解决方案1】：

据我所知，您无法为折叠的方法设置动画，但有各种技巧可以解决这个问题，例如为不透明度、大小、位置等设置动画...

【讨论】：