TabControl TabItem Header Height

[AlMcLeanYF]

Hi

I am looking for a bit of help if possible, please.

I have put together the following markup:

<TabItem.Header>
      <StackPanel Orientation="Horizontal">
          <Label Content="Results Blocks"/>
          <Button
              Style="{StaticResource MaterialDesignFloatingActionButton}"
              Command="{Binding AddNewResultsBlockCommand}"
              ToolTip="Add"
              >
              <materialDesign:PackIcon
                  Kind="Plus"
                  Height="{StaticResource IconSize}"
                  Width="{StaticResource IconSize}" />
          </Button>
      </StackPanel>
  </TabItem.Header>

This inserts a button in my tab header, which is great. Unfortunately I cannot suss out how to increase the height of the tab header to prevent the button from being cut off. Could anyone please advise?

This is what the rendered control currently looks like:

Cheers

Al

[nicolaihenriksen]

@AlMcLeanYF have you tried setting the Height property directly on the TabItem? I can see that it defaults to 48px in the template, and then some default padding as well.

[nicolaihenriksen]

@AlMcLeanYF I just verified that you can indeed just override the Height directly on the TabItem. Another approach would be to override it using a style override instead. In any case, this is not an issue, so I will close it.

<TabControl Width="300">
  <TabItem Header="TAB 1">
    <TextBlock Margin="8" Text="Default Tab 1" />
  </TabItem>
  <TabItem Height="80">
    <TabItem.Header>
      <StackPanel Orientation="Horizontal">
        <Label Content="Results Blocks" />
        <Button Style="{StaticResource MaterialDesignFloatingActionButton}" ToolTip="Add">
          <materialDesign:PackIcon Kind="Plus" Height="30" Width="30" />
        </Button>
      </StackPanel>
    </TabItem.Header>
    <TextBlock Margin="8" Text="Default Tab 2" />
  </TabItem>
</TabControl>