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.

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

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

Comments

[Shreyas]

This worked for me. My resources tag looks like this <controls:MetroContentControl.Resources > <Style BasedOn="{StaticResource MetroTabItem}" TargetType="{x:Type TabItem}"> <Setter Property="controls:ControlsHelper.HeaderFontSize" Value="20"></Setter> </Style> </controls:MetroContentControl.Resources >

[Leon]

missed / in </Window.Resources>