Get rid of the line under that tab of the tab cont

Question

Using xaml ( wpf ) I'm trying to get rid of the line under the tab control as show in the "Illustration A" below so that it ends up looking like "Illustration B":

Illustration A

http://www.arulerforwindows.com/images/peskylinea.png

Illustration B

http://www.arulerforwindows.com/images/peskylineb.png

The line shows up when I define the Tab Item but appears to be attached to the Tab Control, as a result changing BorderThickness on either or both the Tab Item or Tab Control doesn't seem to yield the desired result.

I need to do this over a transparent background where a solid fill rectangle can't be used to mask the problem.

Here's the code:

<!--Tab Control-->
<Style  TargetType="{x:Type TabControl}">
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="SnapsToDevicePixels" Value="True" />
     <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid KeyboardNavigation.TabNavigation="Local">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <TabPanel Name="HeaderPanel" Grid.Row="0" Panel.ZIndex="1" Margin="0,0,0,-1" IsItemsHost="True" KeyboardNavigation.TabIndex="1" Background="Transparent" />
                    <Border 
                        Name="Border" 
                        Grid.Row="1" 
                        Background="{StaticResource WindowBackgroundBrush}" 
                        BorderBrush="{StaticResource DefaultSystemBrush}" 
                        BorderThickness="1,1,1,1" 
                        Margin="0,0,0,0"
                        CornerRadius="4" 
                        KeyboardNavigation.TabNavigation="Local"
                        KeyboardNavigation.DirectionalNavigation="Contained"
                        KeyboardNavigation.TabIndex="2" >
                        <ContentPresenter 
                             Name="PART_SelectedContentHost"
                             Margin="4"
                             ContentSource="SelectedContent" />
                    </Border>                                         
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
                        <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
                    </Trigger>
        <Trigger Property="IsEnabled" Value="False">
          <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
          <Setter Property="BorderBrush" TargetName="Border" Value="{StaticResource DisabledBorderBrush}" />
        </Trigger>
      </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="{x:Type TabItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Grid>
                    <Border Name="Border" Background="Transparent" BorderBrush="{StaticResource DefaultSystemBrush}" BorderThickness="1,1,1,1" CornerRadius="6,6,0,0">
                        <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Panel.ZIndex" Value="100" />
                        <Setter TargetName="Border" Property="Background" Value="Transparent" />
                        <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
                    </Trigger>
                    <Trigger Property="IsSelected" Value="False">
                        <Setter TargetName="Border" Property="Background" Value="LightGray" />
                        <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Thanks in advance,

Rob

Answer 1

Adjusting the margins and padding did not work well for me. Drawing a white (background color) border over the tab control border did the trick however:

<ControlTemplate TargetType="{x:Type TabItem}">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0 0 7 0">
        <Border x:Name="tabContentBorder" BorderThickness="2 2 2 0" Background="AliceBlue" BorderBrush="AliceBlue" CornerRadius="6 6 0 0">
        <ContentPresenter HorizontalAlignment="Center" x:Name="Content" VerticalAlignment="Center" ContentSource="Header" Margin="7 3 7 3"/>
    </Border>
    <Border  x:Name="tabBottomBorder"  BorderBrush="White" BorderThickness="1" Visibility="Hidden" Margin="2 0 2 -2" HorizontalAlignment="Stretch"></Border>
</StackPanel>
<ControlTemplate.Triggers>
    <Trigger Property="IsSelected" Value="True">
        <Setter TargetName="tabContentBorder" Property="Background" Value="White" />
        <Setter TargetName="tabBottomBorder" Property="Visibility" Value="Visible"/>
    </Trigger>
</ControlTemplate.Triggers>

Answer 2

   <Style TargetType="TabControl">
        <Setter Property="Template">
            <Setter.Value>

                <ControlTemplate TargetType="{x:Type TabControl}">
                    <Grid KeyboardNavigation.TabNavigation="Local">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <TabPanel x:Name="HeaderPanel"
                              Grid.Row="0"
                              Panel.ZIndex="1"
                              Margin="0,0,0,-1"
                              IsItemsHost="True"
                              KeyboardNavigation.TabIndex="1"
                              Background="Transparent" />

                        <Border x:Name="Border"
                            Grid.Row="1"
                            BorderThickness="1"
                            KeyboardNavigation.TabNavigation="Local"
                            KeyboardNavigation.DirectionalNavigation="Contained"
                            KeyboardNavigation.TabIndex="2">

                            <Border.Background>
                                <SolidColorBrush Color="White"/>
                            </Border.Background>

                            <Border.BorderBrush>
                                <SolidColorBrush Color="White"/>
                            </Border.BorderBrush>

                            <ContentPresenter x:Name="PART_SelectedContentHost"
                                          Margin="0"
                                          ContentSource="SelectedContent" />
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        </Style>

Answer 3

Another very simple way is to just add one extra tab with zero width where you can set the height to what you want, or even just make it's visibility Hidden. Then you get to set the tab height without the annoying horizontal line on the tab where you set the height.

            <TabItem Header="" Width="0" Height="30" Visibility="Hidden" />

Answer 4

This works just fine.

<Style TargetType="TabItem">
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Border x:Name="Chrome"
                        BorderThickness="1,1,1,0" 
                        BorderBrush="Black" 
                        Background="{TemplateBinding Background}" 
                        Padding="2,2,2,1" Margin="1,1,1,0">
                    <ContentPresenter ContentSource="Header" 
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="Selector.IsSelected" Value="True">
                        <Setter TargetName="Chrome" Property="Margin" Value="1,1,1,-1"/>
                        <Setter TargetName="Chrome" Property="Padding" Value="2"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Just change Margin and Padding on selected Tab item.

Answer 5

Had the same problem. Noticed that this line is drawn only for the tab with height set (it is set for only one tab and automatically all the tabs have the save height). So I've added a new TabItem with width=0 and height specified and removed height from all the other tabs and that made the trick for me.

Answer 6

Using ShowMeTheTemplate I found out part of the style, it's on the TabItem. There is a lot more in the default control template you may be interested in setting up if you override it.

<MultiTrigger>
  <MultiTrigger.Conditions>
    <Condition Property="Selector.IsSelected">
      <Condition.Value>
        <s:Boolean>True</s:Boolean>
      </Condition.Value>
    </Condition>
    <Condition Property="TabItem.TabStripPlacement" Value="{x:Static Dock.Top}" />
  </MultiTrigger.Conditions>
  <Setter Property="FrameworkElement.Margin">
    <Setter.Value>
      <Thickness>-2,-2,-2,-1</Thickness>
    </Setter.Value>
  </Setter>
</MultiTrigger>