How to expand and collapse in WPF like in webpage

Question

Is anyone familiar with websites that have an attribute similar to a tree-view? Like the download segment of the Microsoft website. You press the plus button, it expands and everything below it moves further down. You press the minus button and everything in that block collapses and the content below shifts back up.

Granted C# is nothing like HTML and CSS but I just wanted to know if it was possible to do the same in a WPF application.

It seems like the tree-view currently in the tool box allows for text only to be implemented. It doesn't allow for additional objects such as labels or text-boxes.

I discovered the EXPANDER and it does a good job of expanding and collapsing its content's but isn't quite capable of pulling objects beneath it back up or pushing them back down. Here's an example of the scenario I would like.

An example of what I'm going for would be microsoft's download page if it helps. How their expand and collapse buttons work.

So is there any way to do this?

Answer 1

Here is an example of using the Expander as the way the download page on Microsoft uses it. Note that the Height of the RowDefinitions is set to Auto, otherwise the Expander does not collapse when IsExpanded is set to false.

<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>

Answer 2

regular tree view can do what you ask.

see this wonderful code-project explanation:

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