How to stretch and extend a grid up to a parent margin

Question

I have a very simple structure (semplification of a more complicated one) made like this:

so the xaml is:

<Grid >
<Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto" />
  <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border x:Name="Border1Tab3" BorderBrush="Gainsboro" BorderThickness="5" Width="200" Margin="10,10,10,10" >
</Border>
<Border x:Name="Border2Tab3" BorderBrush="Gainsboro" Background="{x:Null}"  MinWidth="100" BorderThickness="5" Grid.Column="1" Margin="10,10,10,10"  >
  <StackPanel Name="spTab3" Margin="0" Background="Red" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">  <------RED

    <Grid Name="grd7Tab3" Visibility="Visible" Background="Blue"  ShowGridLines="True"  VerticalAlignment="Stretch"  Margin="10">  <----BLUE
    </Grid>

  </StackPanel>
</Border>

So as you can see I have put the red colour in the stack panel and the blue in the grid. I would like to extend the blue grid up to all the red stack panel but the effect is that the grid doesn't show up.

and if i put something in the red stack panel it only gets to the size of the inside element instead than getting to all the parent size.

I am a newbie at wpf but Generally speaking if I set margin=0 and stretch schouldn't a UI element take all the spake of its parent?

Thank you for any help Patrick

Answer 1

Simply change the StackPanel to a Grid, it seems to be more appropriate to your case

 <Border x:Name="Border2Tab3" BorderBrush="Gainsboro" Background="{x:Null}"  MinWidth="100" BorderThickness="5" Grid.Column="1" Margin="10,10,10,10"  >
        <Grid Name="spTab3" Margin="0" Background="Red" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
            <Grid Name="grd7Tab3" Visibility="Visible" Background="Blue"  ShowGridLines="True"  VerticalAlignment="Stretch"  Margin="10">

            </Grid>
        </Grid>
    </Border>