9

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?

ASh
  • 34,632
  • 9
  • 60
  • 82
PhilBel
  • 227
  • 1
  • 3
  • 12

1 Answers1

14

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 enter image description here

mhoward
  • 455
  • 5
  • 12
  • "TabPanel itself when set to something besides stretch does not fill up anymore than it needs to in the grid." That's what I figured and eventually decided to put the tab control inside a grid and give that grid a background, which is similar to your solution, except I think yours looks better, so I'll be changing to that. Thanks! – PhilBel Nov 08 '13 at 19:39
  • You can also access this from within the `TabPanel` by adding a few more setters inside of the style. Setting the Vertical and Horizonal Alignment of the Grid to Stretch like: `Property="Grid.HorizontalAlignment" Value="Stretch"`, `Property="Grid.VertcialAlignment" Value="Stretch"` and then setting your background color like: `Property="Grid.Background" Value=""` – Kidiskidvogingogin Feb 15 '16 at 17:00