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.

Answer 2

If you just want two expanders, and when one expands the other collapses, then simply bind their IsExpanded properties together so one is the opposite of the other

<Window x:Class="WpfApplication4.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:WpfApplication4="clr-namespace:WpfApplication4"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <WpfApplication4:NotConverter x:Key="notConverter"/>
</Window.Resources>

<StackPanel Margin="12">
    <Expander Header="First" IsExpanded="{Binding IsExpanded, ElementName=expander2, Converter={StaticResource notConverter}}">
        <TextBlock Text="Hello"/>
    </Expander>
    <Expander Header="Second" Name="expander2">
        <TextBlock Text="World!"/>
    </Expander>
</StackPanel>
</Window>

NotConverter.cs

public class NotConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return !((bool)value);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return !((bool)value);
    }
}

Answer 3

Use StackPanel with Orientation="Vertical" as wrapper. This should help.

Answer 4

You can do what Eirik says or, you can place your expanders on a stackpanel and specify the height of the grid of the expander. Here is a 2 video series which will help you even better with expanders in WPF. https://www.youtube.com/watch?v=ajKPYZ1KZc4&list=PLWTyZJ_llht1-OGaFaG-6D-0vjW_V0rpg

<StackPanel  Height="768" Width="500" HorizontalAlignment="Left">
        <Expander Header="Expande me" Background="Chocolate" FontSize="25">
            <Grid Height="200" Background="AntiqueWhite" Width="500">
                <Label Content="yay" Background="Aqua" Height="40" Width="90"/>
            </Grid> 
        </Expander>

        <Expander Header="Me too" Background="MediumAquamarine" FontSize="20">
            <Grid Height="200" Width="500" Background="Coral">
                <Label Content="Yay!!" Height="40" Width="100" Background="Khaki"/>
            </Grid>
        </Expander>
    </StackPanel>