CODEWITHSUNDEEP
wpftabcontrolmargintabitem
Mal Ross
Mal Ross

Reputation: 4701

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

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?

Upvotes: 28

Views: 18689

Answers (4)

kishhr
kishhr

Reputation: 191

Set the margin for the TabItem instead of Tab

    <TabItem Margin="0,0,0,0"/>

Set the margin for the TabItem to 0, this will override the default margin and work as per your requirements

Upvotes: 0

Ryan
Ryan

Reputation: 59

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>

Upvotes: 5

Quartermeister
Quartermeister

Reputation: 59169

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.

Upvotes: 56

Wallstreet Programmer
Wallstreet Programmer

Reputation: 9677

Write your own controltemplate for TabItems, see TabItem ControlTemplate Example

Upvotes: 1

Related Questions