TabItem from external XAML is displayed in content area in TabControl. Why and what to do?

Question

Basically this is the following to this:

http://stackoverflow.com/questions/1226622/why-are-tab-headers-displayed-in-the-content-area-of-tabs-in-a-xaml-tabcontrol

So, I have some TabControl:

   <Window x:Class="MyApp.HostTest"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:MyApp"
    Height="300" Width="300">
    <Grid>
        <TabControl>
            <TabItem Header="First">
                <Button>Push me.</Button>
            </TabItem>
            <local:TheSecondOne/>
        </TabControl>
    </Grid>
</Window>

And another XAML with TabItem-derived control:

<TabItem  x:Class="MyApp.TheSecondOne"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Header="Second">
    <Grid>
        <Label HorizontalAlignment="Center" 
               VerticalAlignment="Center">The test label.</Label>
    </Grid>
</TabItem>

with this in .cs file:

public partial class TheSecondOne: TabItem 
{
    public TheSecondOne()
    {
        InitializeComponent();
    }
}

So, TheSecondOne IS a TabItem, unlike what the guy from the link above had. And I'm trying ti use it as a TabItem in the TabControl. However, the TabControl on my form shows both tabs in a distorted way: their "tags" fill the whole TabControl area like shown on the image below. Why?