如何在WPF中像网页一样展开和折叠

Question

有没有人熟悉类似于树形视图的属性的网站？比如微软网站上的下载段。您按加号，它会展开，并且下面的所有内容都会向下移动。您按减号，该块中的所有内容都会折叠，并且下方的内容会向上移动。

虽然C＃与HTML和CSS完全不同，但我只想知道在WPF应用程序中是否有可能做到相同的效果。

目前工具箱中的树形视图似乎只允许实现纯文本。它不允许添加其他对象，例如标签或文本框。

我发现了EXPANDER，它可以很好地展开和折叠其内容，但不能将其下面的对象拉回或将它们推回。以下是我想要的情况的示例。

我想要的一个示例是微软的下载页面。他们的展开和折叠按钮如何工作。

那么有什么办法可以做到这一点吗？

- Offer

---

一个扩展控件是我会使用的，当你说它“不能完全将对象拉回到它下面或将它们推回下面”时，你具体指的是什么？ - Mark Feldman

你可以在WPF TreeView中显示任何你喜欢的对象类型。这篇文章非常好：http://www.codeproject.com/Articles/26288/Simplifying-the-WPF-TreeView-by-Using-the-ViewMode - Baldrick

我的意思是它非常好地隐藏和显示其内容，这很好，但我似乎无法让它将超出它范围的文本向上或向下推。 - Offer

除了TreeView外，+1。除此之外，这可能只是一个细节，但在我看来，使用类似于展开器的按钮隐藏“姓氏”和“名字”是一个值得商榷的用户交互设计选择。 - franssu

Answer 1

这里是使用 Expander 的示例，就像 Microsoft 下载页面所使用的方式。请注意，RowDefinitions的Height设置为Auto，否则当IsExpanded设置为false时，Expander不会折叠。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Expander IsExpanded="True">
        <Border BorderBrush="Red" BorderThickness="2">
            <TextBlock Height="50" Text="Hello" />
        </Border>
    </Expander>
    <Expander Grid.Row="1" IsExpanded="True">
        <Border BorderBrush="Green" BorderThickness="2">
            <TextBlock Height="50" Text="World" />
        </Border>
    </Expander>
</Grid>

- default

Answer 2

正常的树形视图可以满足您的需求。请参考这个精彩的代码项目解释：

http://www.codeproject.com/Articles/124644/Basic-Understanding-of-Tree-View-in-WPF

- Nahum

---

谢谢Nahum。我可以确认这篇文章足够好用。虽然是Default提供的解决方案，但他的解决方案意味着我不必完全重构我的代码并重新设计，但我肯定在完成项目之前会经常使用它。再次感谢。 - Offer

Answer 3

WPF的Expander组件可以完全满足您的需求，并且如果在适当的面板中托管，它会将其他控件向下推。例如，尝试使用StackPanel。

- Felice Pollano