堆栈内存溢出
  简体   繁体   English

如何在TabItem上设置ZIndex？

[英]How do you set the ZIndex on a TabItem?

 原文  2012-12-05 02:31:54  6   2    c#/ wpf/ z-index/ tabcontrol

问题描述

I am wanting my TabItems to be positioned in between a border to achieve a "binder" affect, like this: 我希望我的TabItems位于边框之间，以实现“活页夹”效果，如下所示：

However, I cannot seem to achieve this affect using ZIndex with my borders and each TabItem item. 但是，我似乎无法在边框和每个TabItem项目上使用ZIndex来实现这种效果。 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? 如何在WPF中执行此操作？ Is TabControl the best choice? TabControl是最佳选择吗？

2 个解决方案

解决方案1
 1 已采纳  2012-12-08 23:02:10

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. 单击一个按钮时，如果Firefox控件位于选项卡编号1中，并且单击了firefox按钮，则代码会将选项卡控件的ItemIndex更改为1。 Of course, you would want to hide the actual tabs in the tabcontrol from the user. 当然，您可能希望向用户隐藏tabcontrol中的实际选项卡。

This approach would be aa lot easier to maintain and develop! 这种方法将易于维护和开发！

Hope this helps you! 希望这对您有所帮助！

解决方案2
 0  2012-12-05 03:02:50

I'm not quite sure I understand correctly, but this may be close to what your trying to do: 我不确定我是否正确理解，但这可能与您的尝试很接近： 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在StatusBarItem上设置ZIndex - How to set ZIndex on StatusBarItem 如何从选项卡标题中的按钮中找到 TabItem 的标记？ - How do you find the tag of a TabItem from a button in the tabs header? 如何设置TabItem标头的最大宽度？ - How do I set a max width to a TabItem Header? 如何为Tabitem标头和此Tabitem的内容设置不同的字体？ - How can I set different fonts for tabitem header and content of this tabitem? 使用时如何访问控件 <TabItem.Header> ，在代码背后？ - How do you access controls when using <TabItem.Header>, in code behind? 如何更改滑块上拇指的 ZIndex - How do I change the ZIndex of the Thumb on a Slider 使用ItemsSource时如何设置TabItem CommandBindings - How to set TabItem CommandBindings when using ItemsSource WPF ContentControl将ZIndex设置为子ZIndex - WPF ContentControl set ZIndex to child ZIndex 如何在WPF中的TabItem上预呈现控件？ - How do I prerender the controls on a TabItem in WPF? 如何在Click事件中设置画布ZIndex WPF按钮控件？ - How to set canvas ZIndex WPF button control in Click Event?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM