Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>O man what a nightmare that was to find the problem. The problem is with the default template that tabcontrol uses. </p> <p><a href="https://gist.github.com/battleguard/7375100">DefaultTemplate for TabControl</a></p> <p>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.</p> <p>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.</p> <p>Hopefully that makes sense you should be able to see what I am getting at by looking at the default Template.</p> <p>Here is the actual code for it to work</p> <pre><code>&lt;TabControl&gt; &lt;TabControl.Resources&gt; &lt;Style TargetType="{x:Type Grid}"&gt; &lt;Setter Property="Background" Value="Red"/&gt; &lt;/Style&gt; &lt;Style TargetType="{x:Type TabPanel}"&gt; &lt;Setter Property="HorizontalAlignment" Value="Center"/&gt; &lt;/Style&gt; &lt;/TabControl.Resources&gt; &lt;TabItem Header="Test 1"/&gt; &lt;TabItem Header="Test 2"/&gt; &lt;TabItem Header="Test 3"/&gt; &lt;TabItem Header="Test 4"/&gt; &lt;/TabControl&gt; </code></pre> <p>And here is what it should look like <img src="https://i.stack.imgur.com/5bQ4x.png" alt="enter image description here"></p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload