WPF - Making Two Expanders fill available space depending on which one is shown

Question

So, I have 2 expanders. One should be on the top of the control, and one should be on the bottom of the control.

When I click the top expander, bottom should collapse, top should expand downwards and take all the available space, without removing or pushing the bottom out of the page. And in reverse, when I click bottom expander, top one should collapse, bottom one should expand upwards and take all the available space on the control.

The problem I'm having is visual, I know how to bind expander's IsExpanded within my ViewModel and update both accordingly. What I don't know is which controls to use and how to set them up correctly.

I've tried using Grid, but If I set Row Height to *, whatever I do, their height (of course) stays fixed, and content expands only to row's allowed height.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="2*" />
    </Grid.RowDefinitions>

    <Expander
        Grid.Row="0"
        Margin="5"
        Header="Server Connections"
        IsExpanded="{Binding IsTopExpanded}">

    *** ListBox With Content ***
    </Expander>

    <Expander
        Grid.Row="1"
        Margin="5"
        Header="Server Browser"
        IsExpanded="{Binding IsBottomExpanded}">

    *** Some Content ***
    </Expander>
</Grid>

I've tried with StackPanel, but top Expander content doesn't receive vertical scroll bar, and therefore if I have many items - I cannot scroll down.

Hopefully I was clear enough, if I wasn't - please let me know. :)

mm8 mm8 · Accepted Answer · 2017-04-18T14:24:39

You need to set switch between * and Auto for the Height of the RowDefinitions. You could do this using two Styles:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition>
            <RowDefinition.Style>
                <Style TargetType="RowDefinition">
                    <Setter Property="Height" Value="*" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsBottomExpanded}" Value="True">
                            <Setter Property="Height" Value="Auto" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </RowDefinition.Style>
        </RowDefinition>
        <RowDefinition>
            <RowDefinition.Style>
                <Style TargetType="RowDefinition">
                    <Setter Property="Height" Value="Auto" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsBottomExpanded}" Value="True">
                            <Setter Property="Height" Value="*" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </RowDefinition.Style>
        </RowDefinition>
    </Grid.RowDefinitions>

    <Expander
        Grid.Row="0"
        Margin="5"
        Header="Server Connections"
        IsExpanded="{Binding IsTopExpanded}">
        <TextBlock>*** ListBox With Content ***</TextBlock>
    </Expander>

    <Expander
        Grid.Row="1"
        Margin="5"
        Header="Server Browser"
        IsExpanded="{Binding IsBottomExpanded}">
        <TextBlock>*** Some Content ***</TextBlock>
    </Expander>
</Grid>

WPF - Making Two Expanders fill available space depending on which one is shown

1 Answers