How can I remove this little space between first TabItem and edge of Window?

Question

How can I remove the space between the TabItem and edge of Window. There also seems to be a border around the tab content box as well that is not needed. How can I remove that as well?

Here's my XAML:

<Grid>
        <TabControl Margin="0" ItemsSource="{Binding TabItems}" SelectedIndex="0">
            <TabControl.ItemContainerStyle>
                <Style TargetType="TabItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TabItem">
                                <Grid Name="Panel">
                                    <Border Name="Border" 
                                            Margin="0,0,-4,0">
                                    </Border>
                                    <ContentPresenter x:Name="ContentSite"
                                                          VerticalAlignment="Center"
                                                          HorizontalAlignment="Center"
                                                          ContentSource="Header"
                                                          Margin="10,2"/>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter TargetName="Panel" Property="Background" Value="Orange" />
                                    </Trigger>
                                    <Trigger Property="IsSelected" Value="False">
                                        <Setter TargetName="Panel" Property="Background" Value="LightGray" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Header" Value="{Binding Header}"/>
                    <Setter Property="Content" Value="{Binding Content}"/>
                </Style>
            </TabControl.ItemContainerStyle>
        </TabControl>
    </Grid>

I tried adding a border and setting it to -4 margin, but doesn't seem to be working. Any help will be appreciated. Thanks!

Answer 1

Set the TabControl's BorderThickness property to 0:

<TabControl Margin="0"
            ItemsSource="{Binding TabItems}"
            SelectedIndex="0"
            BorderThickness="0">
    <!--The rest of your code here-->
</TabControl>

Update - Adjusting the tab headers

This one is a bit trickier - this will require updating the TabControl's template. You can do this by hand but the TabControl's template is quite large so I recommend using Blend to get started. Open your project in Blend, open the 'Objects and Timeline' window, right click your TabControl, click edit template, and then 'Edit a copy'. This will create a copy of the default TabControl's template for you to start working with.

This is going to create a lot of XAML for you. You will end up with a style resource that looks something like this:

<Style x:Key="TabControlStyle1"
       TargetType="{x:Type TabControl}">
    <Setter Property="Padding"
            Value="2" />
    <Setter Property="HorizontalContentAlignment"
            Value="Center" />
    <Setter Property="VerticalContentAlignment"
            Value="Center" />
    <Setter Property="Background"
            Value="{StaticResource TabItem.Selected.Background}" />
    <Setter Property="BorderBrush"
            Value="{StaticResource TabItem.Selected.Border}" />
    <Setter Property="BorderThickness"
            Value="1" />
    <Setter Property="Foreground"
            Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid x:Name="templateRoot"
                      ClipToBounds="true"
                      SnapsToDevicePixels="true"
                      KeyboardNavigation.TabNavigation="Local">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition x:Name="ColumnDefinition0" />
                        <ColumnDefinition x:Name="ColumnDefinition1"
                                          Width="0" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition x:Name="RowDefinition0"
                                       Height="Auto" />
                        <RowDefinition x:Name="RowDefinition1"
                                       Height="*" />
                    </Grid.RowDefinitions>
                    <TabPanel x:Name="headerPanel"
                              Background="Transparent"
                              Grid.Column="0"
                              IsItemsHost="true"
                              Margin="2,2,2,0"
                              Grid.Row="0"
                              KeyboardNavigation.TabIndex="1"
                              Panel.ZIndex="1" />
                    <Border x:Name="contentPanel"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            Grid.Column="0"
                            KeyboardNavigation.DirectionalNavigation="Contained"
                            Grid.Row="1"
                            KeyboardNavigation.TabIndex="2"
                            KeyboardNavigation.TabNavigation="Local">
                        <ContentPresenter x:Name="PART_SelectedContentHost"
                                          ContentSource="SelectedContent"
                                          Margin="{TemplateBinding Padding}"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="TabStripPlacement"
                             Value="Bottom">
                        <Setter Property="Grid.Row"
                                TargetName="headerPanel"
                                Value="1" />
                        <Setter Property="Grid.Row"
                                TargetName="contentPanel"
                                Value="0" />
                        <Setter Property="Height"
                                TargetName="RowDefinition0"
                                Value="*" />
                        <Setter Property="Height"
                                TargetName="RowDefinition1"
                                Value="Auto" />
                        <Setter Property="Margin"
                                TargetName="headerPanel"
                                Value="2,0,2,2" />
                    </Trigger>
                    <Trigger Property="TabStripPlacement"
                             Value="Left">
                        <Setter Property="Grid.Row"
                                TargetName="headerPanel"
                                Value="0" />
                        <Setter Property="Grid.Row"
                                TargetName="contentPanel"
                                Value="0" />
                        <Setter Property="Grid.Column"
                                TargetName="headerPanel"
                                Value="0" />
                        <Setter Property="Grid.Column"
                                TargetName="contentPanel"
                                Value="1" />
                        <Setter Property="Width"
                                TargetName="ColumnDefinition0"
                                Value="Auto" />
                        <Setter Property="Width"
                                TargetName="ColumnDefinition1"
                                Value="*" />
                        <Setter Property="Height"
                                TargetName="RowDefinition0"
                                Value="*" />
                        <Setter Property="Height"
                                TargetName="RowDefinition1"
                                Value="0" />
                        <Setter Property="Margin"
                                TargetName="headerPanel"
                                Value="2,2,0,2" />
                    </Trigger>
                    <Trigger Property="TabStripPlacement"
                             Value="Right">
                        <Setter Property="Grid.Row"
                                TargetName="headerPanel"
                                Value="0" />
                        <Setter Property="Grid.Row"
                                TargetName="contentPanel"
                                Value="0" />
                        <Setter Property="Grid.Column"
                                TargetName="headerPanel"
                                Value="1" />
                        <Setter Property="Grid.Column"
                                TargetName="contentPanel"
                                Value="0" />
                        <Setter Property="Width"
                                TargetName="ColumnDefinition0"
                                Value="*" />
                        <Setter Property="Width"
                                TargetName="ColumnDefinition1"
                                Value="Auto" />
                        <Setter Property="Height"
                                TargetName="RowDefinition0"
                                Value="*" />
                        <Setter Property="Height"
                                TargetName="RowDefinition1"
                                Value="0" />
                        <Setter Property="Margin"
                                TargetName="headerPanel"
                                Value="0,2,2,2" />
                    </Trigger>
                    <Trigger Property="IsEnabled"
                             Value="false">
                        <Setter Property="TextElement.Foreground"
                                TargetName="templateRoot"
                                Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Find the TabPanel with the name 'headerPanel' and set its left margin to 0. One last thing, if you used Blend it should have set your TabControl's style to use your new style but if not you need make sure you set the style yourself:

Style="{StaticResource TabControlStyle1}"