Home/ Questions/Q 8972899
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T18:19:44+00:00

I am wanting my TabItems to be positioned in between a border to achieve

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your approach is rather complicated! One simpler alternative would be to use hidden buttons over the tabs in the background image and tab control for the content with hidden tabs.

    In other words, place images that are transparent or otherwise invisible to the user over the tabs in the images. When a button is clicked, the code would change the ItemIndex for the tab control to say 1 if the Firefox controls are in tab number 1 and the firefox button was clicked. Of course, you would want to hide the actual tabs in the tabcontrol from the user.

    This approach would be a a lot easier to maintain and develop!

    Hope this helps you!

    • 0