How to remove the default margin on the content of a TabItem?

Question

I'm using the TabControl class in WPF and I've noticed that the content of each TabItem has a default margin of 4 pixels on all sides.

Sample code:

<Window x:Class="TabControlPadding.Window1"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Title="Window1" Height="300" Width="300">   <Grid>     <TabControl Margin="10">       <TabItem Header="Tab 1">         <Grid Background="Pink"/>       </TabItem>       <TabItem Header="Tab 2">         <Grid Background="LightBlue"/>       </TabItem>     </TabControl>   </Grid> </Window> 

Screenshot:

I'd like to get rid of this margin (reduce it to zero), but I'd prefer not to have to completely replace templates or anything heavy like that.

Is there a simple way I can do this in a very targeted manner?

Answer 1

Just set Padding to zero on the TabControl:

<TabControl Margin="10" Padding="0"> 

The default style for TabControl sets the Padding to 4 and binds the Margin on the content host to the Padding on the TabControl.

Answer 2

If you're looking to make the pink box expand all the way to the black border line with no white in between, there is an easy way that doesn't involved making your own control template.

The default style for TabItem has a margin of 4 around the content presenter. A quick way to compensate for this is to make the margin of the control inside the TabItem -4.

   <TabItem>      <Grid Margin="-4">      </Grid>    <TabItem>