Overwrite Mahapps Metro style for me header Tabitem

Question

I am working with WPF and MVVM. I installed Mahapps Metro, this nuget package provides all styles for my app.

I made a TabControl, but the FontSize that Mahapps uses for the header in each TabItem is very big for my application.

I need to create a StaticResource that changes the FontSize of the header in a TabItem without removing others properties that Mahapps provides.

Answer 1

Put the following code in your window's resources like:

<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="24"></Setter>
        </Style>
<Window.Resources>

Looking at the source code [ https://github.com/MahApps/MahApps.Metro/blob/master/MahApps.Metro/Styles/Controls.TabControl.xaml ,at line 158] you can see that the programmers made a special exception to set this property, because the font is in a Control Template, inside a Content Presenter. It is easier to set ControlsHelper.HeaderFontSize property.

Answer 2

As suggested in the above answer, 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.

Answer 3

It looks like the API changed since 2019. The 'ControlHelper' doesn't seem to exist anymore. For some info on the changes see: link to MahApps GitHub issue

Here is the code that works for me:

<mah:MetroWindow.Resources>
        <Style BasedOn="{StaticResource MahApps.Styles.TabControl}" TargetType="TabControl">
            <Setter Property="mah:HeaderedControlHelper.HeaderFontSize" Value="12" />
            <Setter Property="mah:HeaderedControlHelper.HeaderFontWeight" Value="Bold" />                 
        </Style>
</mah:MetroWindow.Resources>