How to let an Expander expand upwards

Question

I have a dataGrid and an expander as follows:

<Grid>
    ...
    <DataGrid ....>
    <Expander ...>
</Grid>

I want the datagrid as big as possible and the expander as small as possible at the begining. When a user clicks the expander, I want it to expand upwards instead of downwards, and have the datagrid shrink.

Thanks!

Answer 1

You can define the row heights in the Grid, and then put the expander in the bottom row, and let the grid sort it out.

* - This height is one unit, where the total height is divided by the number of units and apportioned out. So if the height was 300 and there were two rows, 2* and *, then they would be 200 and 100 each.

Auto - This is whatever the minimum height of the content is.

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

    <Canvas Grid.Row="0" Background="LightBlue" />
    <Expander Grid.Row="1">
        <Canvas Background="LightGreen" Height="200" />
    </Expander>
</Grid>