Resize TabItem header size inside TabControl

Question

I am using MahApps TabControl and i have several TabItems:

<TabControl Name="tabControl" FontSize="12">
    <TabItem Header="Statistics" />
</TabControl>

I try to change the font size of the TabControl and TabItems in order to resize my headers but it seems that this not changing anything.

score 25 · Answer 1 · answered Aug 05 '15 at 19:29

25

You should use the attached property HeaderFontSize to set the header font size of the tav items.

<TabControl Name="tabControl">
  <TabItem Header="Statistics" Controls:ControlsHelper.HeaderFontSize="12" />
</TabControl>

or

<TabControl Name="tabControl">
  <TabControl.Resources>
    <Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource {x:Type TabItem}}">
      <Setter Property="Controls:ControlsHelper.HeaderFontSize" Value="12" />
    </Style>
  </TabControl.Resources>
  <TabItem Header="Statistics" />
</TabControl>

Hope that helps.

answered Aug 05 '15 at 19:29

punker76

14,326
5
58
96

it seems this property doesn't exist anymore – JobaDiniz May 25 '17 at 23:44
2

@JobaDiniz It's still available in the ControlsHelper class. – punker76 May 29 '17 at 13:40
1

yeah... V2013 *xaml designer* bad, not mine =D. It wasn't showing it in code completion. – JobaDiniz May 29 '17 at 16:50
works like charm. + may need to use Vertical Alignment="Center" – Thiha Jan 28 '18 at 08:23

score 6 · Answer 2 · answered Dec 10 '19 at 23:29

In 2.* versions of MahApps.Metro it changes to:

<TabControl Name="tabControl">
  <TabItem Header="Statistics" Controls:HeaderedControlHelper.HeaderFontSize="12" />
</TabControl>

or

<TabControl Name="tabControl">
  <TabControl.Resources>
    <Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource {x:Type TabItem}}">
      <Setter Property="Controls:HeaderedControlHelper.HeaderFontSize" Value="12" />
    </Style>
  </TabControl.Resources>
  <TabItem Header="Statistics" />
</TabControl>

Source: https://github.com/MahApps/MahApps.Metro/issues/3711

Documentation is not available at the time of writing.

score 3 · Answer 3 · answered Nov 10 '16 at 10:04

Put the below code in Window.Resources

    <Window
    ......
    xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
    ......
    >

<Window.Resources>
        <Style x:Key="MenuLevel2" BasedOn="{StaticResource MetroTabItem}" TargetType="{x:Type TabItem}">
            <Setter Property="mah:ControlsHelper.HeaderFontSize" Value="15"></Setter>
        </Style>
<Window.Resources>

In the TabItem section add the style details.

<TabItem Header="Dimension Alias" Style="{DynamicResource MenuLevel2}">

This worked for me.

score 2 · Answer 4 · answered May 17 '20 at 15:25

since tabItems is a list of item having some common bindings modifying one of Tabitem header height will automatically do for the others

<TabControl>
  <TabItem >
     <TabItem.Header>
          <Label Height="30" Content="Main" FontSize="16" >   
          </Label>
     </TabItem.Header>
  </TabItem>
  <TabItem  Header="Second header" >
  <TabItem  Header="Third header" >

</TabControl>

score 1 · Answer 5 · answered Apr 25 '20 at 14:02

In my case this has solved my problem:

<TabControl>
    <TabControl.Resources>
        <Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource {x:Type TabItem}}">
            <Setter Property="Controls:ControlsHelper.HeaderFontSize" Value="12" />
        </Style>
    </TabControl.Resources>
</TabControl>

score 1 · Answer 6 · answered Apr 28 '21 at 09:29

1

Since 2.0 we have to use this in your App.xaml or directly in the resources of your control:

<System:Double x:Key="MahApps.Font.Size.TabItem">16.67</System:Double>

answered Apr 28 '21 at 09:29

Suplanus

1,523
16
30

Resize TabItem header size inside TabControl

6 Answers6