How to make expander resize the grid?

Question

I have an expander here like this, the border shown here is the grid around it:

-----------------------------------
|                                 |
| ^ expander                      |
|---------------------------------|

How could I resize this grid when I expand this expander?

The result is like this:

-----------------------------------
|                                 |
| V expander                      |
|                                 |
|                                 |
| content of expander             |
|                                 |
|                                 |
|---------------------------------|

Please don't care about the window size or the outer grid size. I just want to resize this one.

UPDATE:

When user closes the expander, i hope the grid will return to figure 1.

XAML fragment:

<Grid Margin="143,92,143,148" Background="#FF646464" Width="472" Height="217">
                <Border BorderBrush="#FF5983BF" BorderThickness="1"/>
                <Expander x:Name="advancedExpander" Header="Advanced" HorizontalAlignment="Left" Margin="10,196,0,-147" Width="452" Height="168" VerticalAlignment="Top" Foreground="#FFC7C7C7">
                    <Grid Background="#FFE5E5E5"/>
                </Expander>

            </Grid>

deleted some buttons. i don't think we need them.

Aquiline

Did you try setting column/row Width/Height to Auto – Ti

post your corresponding Xaml – Famished

@Ti sorry i don't quite understand. i usually am a server guy, working with CLI. but all of a sudden, my boss asked me to make a GUI, alone. so i am pretty new to WPF. i am trying to make the job done asap. – Aquiline

@Famished please see above. there is nothing special done yet. just a expander in a grid. – Aquiline

@HuStmpHrrr you'll need to share your XAML for some specific solution – Ti

@Ti please check. nothing special. – Aquiline

@HuStmpHrrr if you want it to change size why do you set fixed height on the Grid? Also there is no need to the Grid as Expander can be child of the Border – Ti

@Ti i just want to see if it will be resized by expanding. and that shows how rookie i am. i touched wpf just a little bit, as difficult as moving controls around, when i learned c#. after that i did no GUI design. – Aquiline

Answer 1

You may use Triggers to change "Height"

<Style TargetType="RowDefinition" x:Key="ExpandedRow">
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsExpanded}" Value="True">
                <Setter Property="Height" Value="400"/>
            </DataTrigger>
        </Style.Triggers>
 </Style>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" Style="{StaticResource ExpandedRow}" />
    </Grid.RowDefinitions>
</Grid>
<Expander MaxHeight="400" Name="Expander" IsExpanded="{Binding IsExpanded}">
    ...
</Expander>

ViewModel.cs

public bool IsExpanded { get; set; }

Recurrence

Answer 2

If I understood correctly you can do something like this

<Grid>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" MaxHeight="200"/>
                <RowDefinition Height="3"/>
            </Grid.RowDefinitions>
            <GridSplitter Height="3" HorizontalAlignment="Stretch" Grid.Row="1"/>
            <GridSplitter Height="3" HorizontalAlignment="Stretch" Grid.Row="3"/>
            <Expander Header="Header" HorizontalAlignment="Stretch" VerticalAlignment="Top"  Background="Gray"  IsExpanded="False" Grid.Row="0" >
                <Grid  Height="296" >
                </Grid>
            </Expander>

        </Grid>
    </Grid>

Barite

it seems not. i want the grid which contains the expander becomes higher after expanding. and when it's closed, it shrinks back to the original height. – Aquiline