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

Mal Ross picture Mal Ross · Aug 2, 2010 · Viewed 15.4k times · Source

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:

The margin around a TabItem's content

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

Quartermeister picture Quartermeister · Aug 3, 2010

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.