Docked control tabs not rendering correclty - wpf

Question

I'm working on customizing a user control containing a tab control child element. The user control docks to the side of the main window. I want the tab items to orient based on the docking position, eg. left docked tab items rotate 90 degrees to lay along the side. I have the tabs aligning correctly by binding to the attached property DockPanel.Dock. The problem is that when the tabs are rendered they are disconnected by a line from the tab control. I can manually set the (DockPanel.Dock) property for the outer user control object and the tabs docked along that direction draw correctly but the other tabs are separated by a line.
Here is the TabDockControl XML:
<UserControl x:Class="AnimationMotionCaptureStudio.TabDockControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300" x:Name="Root" DockPanel.Dock="Left">
<Grid>
<TabControl Height="Auto" HorizontalAlignment="Stretch" Name="tabControl1" VerticalAlignment="Stretch" Width="Auto" TabStripPlacement="{Binding Path=(DockPanel.Dock),ElementName=Root}">
<TabControl.Resources>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Padding" Value="2" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<ContentPresenter Content="{TemplateBinding Content}" />
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=(DockPanel.Dock), ElementName=Root}" Value="Left">
<Setter Property="Padding" Value="2" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<ContentPresenter Content="{TemplateBinding Content}">
<ContentPresenter.LayoutTransform>
<RotateTransform Angle="90" />
</ContentPresenter.LayoutTransform>
</ContentPresenter>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Path=(DockPanel.Dock), ElementName=Root}" Value="Right">
<Setter Property="Padding" Value="5" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<ContentPresenter Content="{TemplateBinding Content}">
<ContentPresenter.LayoutTransform>
<RotateTransform Angle="-90" />
</ContentPresenter.LayoutTransform>
</ContentPresenter>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</TabControl.Resources>
<TabItem Header="{Binding Path=(DockPanel.Dock), ElementName=Root}" Name="tabItem1">
<Grid>
<Border BorderBrush="Silver" BorderThickness="1" Height="Auto" HorizontalAlignment="Stretch" Name="border1" VerticalAlignment="Stretch" Width="Auto" />
</Grid>
</TabItem>
</TabControl>
</Grid>
The code behind file has no additional code added beyond the constructor generated by VS2010.
And the MainWindow XML usage of the control:
<DockPanel Grid.Row="1" Height="Auto" HorizontalAlignment="Stretch" Name="MainDockPanel" VerticalAlignment="Stretch" Width="Auto" >
<DockPanel.Children>
<StatusBar Height="23" Name="statusBar1" Width="Auto" DockPanel.Dock="Bottom" Background="#FF00476D" />
<AMCS:TabDockControl DockPanel.Dock="Left">
</AMCS:TabDockControl>
<AMCS:TabDockControl DockPanel.Dock="Right">
</AMCS:TabDockControl>
<AMCS:TabDockControl DockPanel.Dock="Bottom">
</AMCS:TabDockControl>
<Border BorderBrush="Silver" BorderThickness="2" Height="Auto" Name="border1" Width="Auto" DockPanel.Dock="Top" Background="#FF898888">
<Image Height="Auto" HorizontalAlignment="Stretch" Name="D3DImage" Stretch="Fill" VerticalAlignment="Stretch" Width="Auto" MouseLeftButtonDown="D3DImage_MouseLeftButtonDown" MouseLeftButtonUp="D3DImage_MouseLeftButtonUp" MouseMove="D3DImage_MouseMove" Grid.RowSpan="1" Grid.Row="1" MouseWheel="D3DImage_MouseWheel">
<Image.Source>
<i:D3DImage x:Name="D3DImageSource"/>
</Image.Source>
</Image>
</Border>
</DockPanel.Children>
</DockPanel>
Any suggestions for how to set this up to render the tabs correctly would be greatly appreciated.