I am wanting my TabItems to be positioned in between a border to achieve a "binder" affect, like this:
However, I cannot seem to achieve this affect using ZIndex with my borders and each TabItem item. Currently, I get this result:
Using this code:
<Border CornerRadius="40,40,0,0" Background="Orange" Margin="8,31,2,21" Grid.RowSpan="4" Panel.ZIndex="-3" ></Border>
<Border CornerRadius="40,40,0,0" Background="Red" Margin="6,29,4,23" Grid.RowSpan="4" Panel.ZIndex="-1"></Border>
<Border CornerRadius="40,40,0,0" Background="Yellow" Margin="3,26,7,26" Grid.RowSpan="4" Panel.ZIndex="1"></Border>
<Border CornerRadius="40,40,0,0" Background="DarkRed" Margin="1,23,9,29" Grid.RowSpan="4" Panel.ZIndex="3"></Border>
<Border CornerRadius="40,40,0,0" Background="OrangeRed" Margin="-2,19,12,33" Grid.RowSpan="4" Name="border1" Panel.ZIndex="5"></Border>
<TabControl Name="tabControl1" TabStripPlacement="Bottom" Background="Transparent" Margin="-2,32,15,6" Grid.RowSpan="4" BorderThickness="0">
<TabItem Name="tabItem1" Margin="0,0,0,1" Panel.ZIndex="4">
<TabItem.Header>
<TextBlock>
Main</TextBlock>
</TabItem.Header>
</TabItem>
<TabItem Name="tabItem2" Panel.ZIndex="5">
<TabItem.Header>
<TextBlock Height="13" Width="91">
Internet Explorer</TextBlock>
</TabItem.Header>
</TabItem>
<TabItem Name="tabItem3" Panel.ZIndex="0">
<TabItem.Header>
<TextBlock>
Firefox</TextBlock>
</TabItem.Header>
</TabItem>
<TabItem Name="tabItem4" Panel.ZIndex="-2">
<TabItem.Header>
<TextBlock>
Chrome</TextBlock>
</TabItem.Header>
</TabItem>
<TabItem Name="tabItem5" Panel.ZIndex="-4">
<TabItem.Header>
<TextBlock>
Opera</TextBlock>
</TabItem.Header>
</TabItem>
</TabControl>
However, this does not achieve the desired affect. How can I do this in WPF? Is TabControl the best choice?
