Displaying Expander one below the other in wpf Displaying Expander one below the other in wpf wpf wpf

Displaying Expander one below the other in wpf


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


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);    }}


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