-2

How can I set the height of the header in a TabControl (marked in red in the attached picture)? I figured out how to control the height of the single tabs (marked in blue) but could not find a way to change the height of the complete header line.

Header of tab control, height of the whole header line indicated by red arrows and height of tab headers indicated with blue arrows.

thatguy
  • 21,059
  • 6
  • 30
  • 40
chrmue
  • 1,552
  • 2
  • 18
  • 35

1 Answers1

1

In order to change the tab header dimensions or margin, you have to edit the control template of the TabControl. Extract the default style and its control template using Visual Studio or Blend and adapt the section for TabPanel, which hosts the tab headers.

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

Update for your comment: When you decrease the height of the TabPanel, the text in the tab header might appear to be cut-off, although there is space left. This is caused by the default Padding of the item container. You can remove it using a style.

<TabControl.ItemContainerStyle>
   <Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource {x:Type TabItem}}">
      <Setter Property="Padding" Value="0"/>
   </Style>
</TabControl.ItemContainerStyle>
thatguy
  • 21,059
  • 6
  • 30
  • 40
  • Thanks for this hint. The Property "Height" og the TabPanel controls the height of the header. So far so good. The only problem left ist that the tabs are partly covered when I decrease the height. – chrmue Aug 05 '22 at 10:10
  • 1
    @chrmue Updated the answer to cover your issue with decreased size. – thatguy Aug 05 '22 at 10:19