Geek Answers Handbook

Get rid of the line below this tab of the tab control

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

Illustration A

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

Illustration B

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

The line appears when I define a tab element, but it seems to be attached to the tab control, as a result, changing the BorderThickness on either of them or on both elements of the Tab or Tab element does not produce the desired result.

I need to do this on a transparent background where a solid fill rectangle cannot be used to mask the problem.

Here is 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

+6
wpf border tabcontrol
source share
6 answers

Using ShowMeTheTemplate I learned part of the style, this is on TabItem. In a default management template that can be customized, you may be interested in customizing 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>
+2
source share

This works great.

 <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 to the selected Tab element.

+1
source share

There was the same problem. We noticed that this line is drawn only for a tab with a set height (it is set for only one tab, and automatically all tabs have a save height). So I added a new TabItem with width=0 and height specified and removed height from all other tabs and it helped.

+1
source share
  <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>
+1
source share

Setting margins and padding did not work for me. However, drawing white (background color) over the tab control frame did the trick:

 <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>

0
source share

Another very simple way is to simply add one additional tab with zero width, where you can set the height according to what you want, or even just make it visible hidden. Then you can set the height of the tab without the annoying horizontal line in the tab where you set the height.

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

More articles:


All Articles