Displaying Expander one below the other in wpf

Question

Consider 2 Expander controls are placed one below the other. If One Expander control is collapsed then the actaul gap (during expanded) have to be reduced and the other Expander control have to be displayed below to the first expander without gap (between first and second Expander). If first Expander is expanded then second have to be adjusted and displayed.How to achieve it?

Answer 1

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Expander>
        <TextBlock Text="expander 1 content" />
    </Expander>
    <Expander Grid.Row="1">
        <TextBlock Text="expander 2 content" />
    </Expander>
</Grid>

With the row height set to Auto the rows will automatically adjust their height so the content fits. This means the first rows height will grow and shrink as you expand/collapse the first expander.