wpf is it possible to have a resizable horizontal expander?

Question

I'm new to WPF. I was able to found out how to do a resizable vertical expander from here: Combine expander and grid (resizable expander)

So I thought making a horizontal would be easy, I have tried different ways with no success.

Can it be done without complex code? To have a glidsplitter between 2 grid rows which one of them has an expander

---

The layout looks like this:

Left expander/gridsplitter works fine. But the expander/gridsplitter at the bottom does not. It works fine without a gridsplitter though.

My XAML:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="10" />
        <RowDefinition Height="Auto"  />
    </Grid.RowDefinitions>

    <DockPanel Grid.Row="0">
        <Expander ExpandDirection="Left" Header="">
            <Expander.Content>
                <Grid>
                    <!-- this works -->
                </Grid>
            </Expander.Content>
        </Expander>
        <TextBox AcceptsReturn="True" />
    </DockPanel>

    <GridSplitter Grid.Row="1" Height="10" HorizontalAlignment="Stretch" ResizeBehavior="PreviousAndCurrent" ResizeDirection="Rows"/>

    <DockPanel Grid.Row="2">
        <Expander ExpandDirection="Down" Header="Summary">
            <Expander.Content>
                <TextBox AcceptsReturn="True" />
            </Expander.Content>
        </Expander>
    </DockPanel>
</Grid>

If you remove the middle row and the gridsplitter, it works fine but it's not resizable.

Any help is appreciated.

Answer 1

The 3rd rows height should also be proportional. Specify MinHeight for the first and bottom rows so that they don't completely shrink.

Edited XAML:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="6*" MinHeight="100"/>
        <RowDefinition Height="10" />
        <RowDefinition Height="*"  MinHeight="50"/>
    </Grid.RowDefinitions>

    <DockPanel Grid.Row="0">
        <Expander ExpandDirection="Left" Header="">
            <Expander.Content>
                <Grid>
                    <!-- this works -->
                </Grid>
            </Expander.Content>
        </Expander>
        <TextBox AcceptsReturn="True" />
    </DockPanel>

    <GridSplitter Grid.Row="1" Height="2" HorizontalAlignment="Stretch"/>

    <DockPanel Grid.Row="2">
        <Expander ExpandDirection="Down" Header="Summary">
            <Expander.Content>
                <TextBox AcceptsReturn="True" />
            </Expander.Content>
        </Expander>
    </DockPanel>
</Grid>

Answer 2

The following works for me. The GridSplitter is shown when expanded and hidden when collapsed.

I use ellipses that fill the panes in the example, because that makes it easy to see how much space is taken by each panel.

Xaml

<Grid Background="Green">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto" Name="expanderRow"/>
    </Grid.RowDefinitions>
    <Ellipse Grid.Row="0" Fill="Black"></Ellipse>
    <Expander Grid.Row="2" ExpandDirection="Up" IsExpanded="False" Background="Yellow"
              Expanded="Expander_Expanded"
              Collapsed="Expander_Collapsed">
        <Ellipse Fill="Red"/>
    </Expander>
    <GridSplitter Grid.Row="1" Height="15" HorizontalAlignment="Stretch" Name="expander" Visibility="Collapsed"></GridSplitter>
</Grid>

Code behind

    private GridLength expandedHeight = new GridLength(0.5, GridUnitType.Star);

    public MainWindow()
    {
        InitializeComponent();
    }

    private void Expander_Expanded(object sender, RoutedEventArgs e)
    {
        expanderRow.Height = expandedHeight;
        expander.Visibility = Visibility.Visible;
    }

    private void Expander_Collapsed(object sender, RoutedEventArgs e)
    {
        expandedHeight = expanderRow.Height;
        expanderRow.Height = GridLength.Auto;
        expander.Visibility = Visibility.Collapsed;
    }