1

我希望我的 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 是最佳选择吗？

4

2 回答 2

1

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

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

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

希望这对你有帮助！

于 2012-12-08T23:02:10.533 回答
0

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

<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>
于 2012-12-05T03:02:50.243 回答