How to make expander resize the grid?

问题

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.

回答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; }

回答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>

来源：https://stackoverflow.com/questions/26588537/how-to-make-expander-resize-the-grid

标签

wpf

expander