MaterialDesign WPF TabControl Header

[ProgramistaZaDyszke]

How to change height of the TabItem Header in TabControl?

<materialDesign:Card> <TabControl materialDesign:ColorZoneAssist.Mode="PrimaryMid" Style="{StaticResource MaterialDesignFilledTabControl}"> <TabItem Header="TAB 1"> <TextBlock Margin="8" Text="PrimaryMid Tab 1" /> </TabItem> <TabItem Header="TAB 2"> <TextBlock Margin="8" Text="PrimaryMid Tab 2" /> </TabItem> </TabControl> </materialDesign:Card>

[nicolaihenriksen]

@ProgramistaZaDyszke The TabItem style has a default Height property set. Either you can explicitly set this to something else, or possibly "clear" it to make it respond to the size of its content (note: I haven't actually tested that the latter would work).

Also, you can see the an example of the first solution in this issue: #3150

[ProgramistaZaDyszke]

When changing height of tabItem only this section changes its height:

Area behind this white section still stays with default 48 height. I found out that there is a "root" grid behind in the styles
<Grid x:Name="Root">
With comment:
<!-- This is the Header label ColorZone. -->
Here is style link: Line 301

I understand that this grid stays behind with default height. Question is how to access it to change height of tabItem header without changing whole style? Otherwise using material themes doesn't have sense if I will have to rewrite whole style again.

[nicolaihenriksen]

@ProgramistaZaDyszke I think you have probably set it on TabControl instead of TabItem.

I took your code above and simply added Height=100 to the TabItem and this is what I get:

<materialDesign:Card>
  <TabControl materialDesign:ColorZoneAssist.Mode="PrimaryMid" Style="{StaticResource MaterialDesignFilledTabControl}">
    <TabItem Header="TAB 1" Height="100">
      <TextBlock Margin="8" Text="PrimaryMid Tab 1" />
    </TabItem>
    <TabItem Header="TAB 2">
      <TextBlock Margin="8" Text="PrimaryMid Tab 2" />
    </TabItem>
  </TabControl>
</materialDesign:Card>

Naturally, setting it on one TabItem will affect the others. So you may want to set it in a style or something instead. I'll leave that up to you.

[ProgramistaZaDyszke]

@nicolaihenriksen yes because you can increase height above 48 without any problem but you cannot go below this number. Let's say I want header to be 35 and this will not work.

[nicolaihenriksen]

@ProgramistaZaDyszke Ah! It wasn't clear to me that you wanted to decrease it.

I'll have a look at the templates tomorrow when I'm behind my computer again; done for tonight...

[nicolaihenriksen]

@ProgramistaZaDyszke I had a look at the templates. I think you're being hit by the default padding applied to the TabItem. If you explicitly override that (ideally via a style), you can also get "shorter tabs". In the example below I have explicitly set Height=20 and Padding=0 just to showcase this.

<materialDesign:Card>
  <TabControl materialDesign:ColorZoneAssist.Mode="PrimaryMid" Style="{StaticResource MaterialDesignFilledTabControl}">
    <TabItem Header="TAB 1" Height="20" Padding="0">
      <TextBlock Margin="2" Text="PrimaryMid Tab 1" />
    </TabItem>
    <TabItem Header="TAB 2" Height="20" Padding="0">
      <TextBlock Margin="2" Text="PrimaryMid Tab 2" />
    </TabItem>
  </TabControl>
</materialDesign:Card>

[ProgramistaZaDyszke]

Yes that works! I have tried this before but didn't applied it to both TabItems. Thanks!

[nicolaihenriksen]

I have tried this before but didn't applied it to both TabItems

That is why I hinted that you should probably do this in a style instead, to apply it uniformly across all TabItems. In the below example I simply override the existing style for TabItem, basing it on the original one but clearing Padding and setting a fixed Height. That way you don't need to do anything special on the TabItems themselves. You can place the style in any resource dictionary ("inherited" by the control in question), but be aware that it will affect all children of that visual element (unless overridden again further down the tree).

<materialDesign:Card>
  <materialDesign:Card.Resources>
    <Style TargetType="TabItem" BasedOn="{StaticResource MaterialDesignTabItem}">
      <Setter Property="Padding" Value="0" />
      <Setter Property="Height" Value="20" />
    </Style>
  </materialDesign:Card.Resources>
  <TabControl materialDesign:ColorZoneAssist.Mode="PrimaryMid" Style="{StaticResource MaterialDesignFilledTabControl}">
    <TabItem Header="TAB 1">
      <TextBlock Margin="2" Text="PrimaryMid Tab 1" />
    </TabItem>
    <TabItem Header="TAB 2">
      <TextBlock Margin="2" Text="PrimaryMid Tab 2" />
    </TabItem>
  </TabControl>
</materialDesign:Card>