Question

我希望我的TabItems位于边框之间以实现“粘合剂”效果，如下所示：

但是，我似乎无法使用ZIndex与我的边框和每个TabItem项目实现这种效果。目前，我得到了这个结果：

使用此代码：

<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>

然而，这并未达到预期的效果。我怎么能在WPF中这样做？ TabControl是最佳选择吗？

Answer 1

你的方法相当复杂！一个更简单的替代方法是在背景图像的选项卡上使用隐藏按钮，使用隐藏选项卡的内容选项卡控件。

换句话说，在图像中的选项卡上放置对用户透明或不可见的图像。单击一个按钮时，如果Firefox控件位于选项卡编号1并单击了firefox按钮，则代码会将选项卡控件的ItemIndex更改为1。当然，您可能希望隐藏用户的tabcontrol中的实际选项卡。

这种方法可以更容易维护和开发！

希望这能帮到你！

Answer 2

我不太确定我是否理解正确，但这可能与您尝试做的很接近：

<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>
            <Border CornerRadius="40,40,0,0" Background="Orange" Grid.RowSpan="4" Panel.ZIndex="-3" ></Border>
        </TabItem>
        <TabItem Name="tabItem2" Panel.ZIndex="5">
            <TabItem.Header>
                <TextBlock Height="13" Width="91">
            Internet Explorer</TextBlock>
            </TabItem.Header>
            <Border CornerRadius="40,40,0,0" Background="OrangeRed" Grid.RowSpan="4" Name="border1" Panel.ZIndex="5"></Border>
        </TabItem>
        <TabItem Name="tabItem3" Panel.ZIndex="0">
            <TabItem.Header>
                <TextBlock>
           Firefox</TextBlock>
            </TabItem.Header>
            <Border CornerRadius="40,40,0,0" Background="Red" Grid.RowSpan="4" Panel.ZIndex="-1"></Border>
        </TabItem>
        <TabItem Name="tabItem4" Panel.ZIndex="-2">
            <TabItem.Header>
                <TextBlock>
           Chrome</TextBlock>
            </TabItem.Header>
            <Border CornerRadius="40,40,0,0" Background="Yellow" Grid.RowSpan="4" Panel.ZIndex="1"></Border>
        </TabItem>
        <TabItem Name="tabItem5" Panel.ZIndex="-4">
            <TabItem.Header>
                <TextBlock>
           Opera</TextBlock>
            </TabItem.Header>
            <Border CornerRadius="40,40,0,0" Background="DarkRed" Grid.RowSpan="4" Panel.ZIndex="3"></Border>
        </TabItem>
    </TabControl>

如何在TabItem上设置Z索引？

2 个答案: