WPF Expander expand behind the grid row

Question

I have expander control in grid row. And I change the expander size on the expander button click to maximize the expander size. And on the collapse status I minimize the expander size. The problem is the expander expands under the grid row. Is there is any way to make the expander expand on top of any control?

<Grid AllowDrop="False">
    <Grid.RowDefinitions>
        <RowDefinition Height="199*" />
        <RowDefinition Height="175*" />
    </Grid.RowDefinitions>
    <Grid Height="60" HorizontalAlignment="Left" Margin="21,26,0,0" Name="grid1" VerticalAlignment="Top" Width="550" Background="#FFE59E9E">
        <Label Content="Label" Height="28" HorizontalAlignment="Left" Margin="62,113,0,0" Name="label1" VerticalAlignment="Top" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="130,115,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" Background="#FF2B1313" />
    </Grid>
    <Expander Name="exp" Expanded="exp_Expanded" Background="#FF3383A7" BorderThickness="4" BorderBrush="{x:Null}" FlowDirection="LeftToRight" Collapsed="exp_Collapsed" ExpandDirection="Left" Height="49" VerticalAlignment="Top" HorizontalAlignment="Right" Width="602" Margin="0,139,237,0">
        <DataGrid AutoGenerateColumns="False" Height="105" Name="dataGrid1" Width="200" HorizontalContentAlignment="Center" VerticalAlignment="Center" />
    </Expander>
</Grid>


  private void exp_Expanded(object sender, RoutedEventArgs e)
    {
        var exp = (Expander) sender;
        //grid1.Width = 550;
       // grid1.Height = 40;

          exp.Width = 602;
         exp.Height = 300;


    }

    private void exp_Collapsed(object sender, RoutedEventArgs e)
    {
        var exp = (Expander)sender;

       // grid1.Height = 500;
        exp.Width = 602;
        exp.Height = 49;



    }

Binil Binil · Accepted Answer · 2011-01-03T09:02:41

This is because you have set Grid.RowDefinition for you Grid control and didnt set the Grid.Row property for child controls

if not required remove the below code in you xaml

<Grid.RowDefinitions>
    <RowDefinition Height="199*" />
    <RowDefinition Height="175*" />
</Grid.RowDefinitions>

or

Add Grid.RowSpan property for your expander

<Expander Grid.RowSpan="2" Name="exp" Expanded="exp_Expanded"...

You can check WPF Tutorial for Grid Panel for more details on how to rows and columns for Grid Panel

WPF Expander expand behind the grid row

1 Answers