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.

score 15 · Answer 1 · answered May 16 '14 at 22:23

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.

This worked for me. My resources tag looks like this – Shreyas Jun 25 '14 at 16:11 — Shreyas, Jun 25 '14 at 16:11

Praveen M B · Answer 2 · 2022-12-28T07:53:35.360

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.

edited Dec 28 '22 at 07:53

answered Nov 10 '16 at 09:59

Praveen M B

187
2
3

2

missed `/` in `` – Leon Dec 09 '17 at 09:49

score 0 · Answer 3 · answered Sep 07 '22 at 17:36

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>

Overwrite Mahapps Metro style for me header Tabitem

3 Answers3