WPF problem: Need to draw a control on top of another.

Question

Hi

I've a shell window constructed of an Header, Main Content and Footer. The main content is a tab control. According to the design, one of the tab items content (a user control) needs to expand a little bit over the footer. At first I thought about implmenting this with a negative Margin, but the footer no matter what I did always get drawn on top of my content.

For example consider the following xaml:

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="33*"/>
    <RowDefinition Height="33*"/>
    <RowDefinition Height="33*"/>
  </Grid.RowDefinitions>
  <StackPanel Background="Blue" Grid.Row="0"/> <!-- Header -->
  <StackPanel Background="Red" Grid.Row="2"/>  <!-- Footer -->
  <TabControl Grid.Row="1"  > <!-- Content -->
    <TabItem>
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="33*"/>
          <ColumnDefinition Width="33*"/>
          <ColumnDefinition Width="33*"/>
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="1" Background="Yellow" >
          <Button Width="100" Height="50" Content="Text"  />
        </StackPanel>
      </Grid>
  </TabItem>
</TabControl>

What I would want to achieve is making the Yellow StackPanel to reach the bottom of the screen somewhow, overlapping on top of the red footer.

Hope it is understandable. Thanks Ariel

Answer 1

Try this code sample:

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="33*"/>
    <RowDefinition Height="33*"/>
    <RowDefinition Height="33*"/>
  </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
     <ColumnDefinition Width="33*"/>
     <ColumnDefinition Width="33*"/>
     <ColumnDefinition Width="33*"/>
   </Grid.ColumnDefinitions>      
  <StackPanel Grid.ColumnSpan="3" Background="Blue" Grid.Row="0"/> <!-- Header -->
  <StackPanel Grid.ColumnSpan="3" Background="Red" Grid.Row="2"/>  <!-- Footer -->
  <TabControl Grid.ColumnSpan="3" Grid.Row="1"> <!-- Content -->
    <TabItem>
      <Grid>
          <Button Width="100" Grid.Column="1" Height="50" Content="Text"  />          
      </Grid>
    </TabItem>
  </TabControl>
    <StackPanel Grid.Column="1" Grid.Row="3" Background="Yellow" />
</Grid>

Answer 2

The problem is that you want the stackpanel contained within the tab control, but you want it to extend beyond the bottom of the tab control. This isn't supported by the tab control.

Answer 3

No doubt TabControl is the problem. Maybe try to write your own TabControl.

Cheers.