WPF: Changing background behind tabs for TabControl when tabItems are centered

Question

So, I want the tab items in my tabs to be centered horizontally. I also want to change the background behind the tabs. I found an answer for both of those things:

This one explains exactly what I want to do for the background and gives a solution

This one explains how to center the tabItems

The problem I have is that they both work great individually, but when combined, they don't work. The tabItems are centered fine, but the background color isn't the color I specify.

E.g. Code:

<TabControl>
    <TabControl.Resources>
        <Style TargetType="{x:Type TabPanel}">
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="Background" Value="Red" />
        </Style>
    </TabControl.Resources>

    <TabItem Header="Test 1" />
    <TabItem Header="Test 2" />
    <TabItem Header="Test 3" />
    <TabItem Header="Test 4" />
</TabControl>

Help?

Answer 1

O man what a nightmare that was to find the problem. The problem is with the default template that tabcontrol uses.

DefaultTemplate for TabControl

TabPanel itself when set to something besides stretch does not fill up anymore than it needs to in the grid. That is why the background was not showing.

Another problem was the background of the ContentPanel was template bound to the TabControl's background. So after digging around I found that I could override the style for the grid that makes up the tabcontrol with a background and it would only fill up the first row of the grid since the second rows background was template bound.

Hopefully that makes sense you should be able to see what I am getting at by looking at the default Template.

Here is the actual code for it to work

<TabControl>
    <TabControl.Resources>
        <Style TargetType="{x:Type Grid}">
            <Setter Property="Background" Value="Red"/>
        </Style>
        <Style TargetType="{x:Type TabPanel}">
            <Setter Property="HorizontalAlignment" Value="Center"/>
        </Style>
    </TabControl.Resources>
    <TabItem Header="Test 1"/>
    <TabItem Header="Test 2"/>
    <TabItem Header="Test 3"/>
    <TabItem Header="Test 4"/>
</TabControl>

And here is what it should look like