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
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>
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.
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.
<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>
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>
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" />
来源：https://stackoverflow.com/questions/400395/get-rid-of-the-line-under-that-tab-of-the-tab-control