TabControl - 使 TabItem 出现在内容的顶部答案

【问题标题】：TabControl - Making a TabItem appear on top of the ContentTabControl - 使 TabItem 出现在内容的顶部
【发布时间】：2013-12-11 05:10:17
【问题描述】：

我有一个TabControl 的自定义样式。作为样式的一部分，我希望选定的 TabItem 出现在内容的顶部。目前TabPanel 没有设置ZIndex，因此它出现在内容下方（期望的行为）。

我似乎无法正常工作的是使选定的 TabItem 出现在内容的顶部。在那个TabItem上设置Panel.ZIndex似乎没有效果

<TabPanel x:Name="HeaderPanel" Panel.ZIndex="0" Grid.Column="0" Grid.Row="0" IsItemsHost="true" Margin="2,10,2,0" KeyboardNavigation.TabIndex="1" />

TabItem 样式（重要一点）：

<Trigger Property="IsSelected" Value="true">
    <Setter Property="Panel.ZIndex" Value="1"/>
    <Setter Property="Background" TargetName="Bd" Value="#fff"/>
</Trigger>

这是我目前拥有的（左）和我想要的（右）的图像。请注意，TabPanel 右侧的阴影来自 Border 周围的 ContentPresenter TabControl 模板本身。因此我希望选中的TabItem 出现在它上面！

与

附：如果有人知道如何使TabPanel 的左上角和左下角变圆，则奖励标记 - 我放弃了尝试让它工作

【问题讨论】：

您能否添加一张您所期望的图片与您目前的情况，因为我无法真正理解您的问题。
@Viv 谢谢 - 更新了我的问题
嗯，你正在寻找的似乎是我在TabControl 上没有自定义样式集的默认行为。 All WPF seems to do for that is when the TabItem is selected, it's Header ends up taking 2 pixel's more than normal in Width or height based on orientation to end up covering the Border between it and the Content.
默认行为实际上是TabPanel“标题”在Content之上。我可以这样做，但随后我失去了未选中项目的阴影

标签： wpf xaml styles tabcontrol

【解决方案1】：

您不能更改 TabControl 的 ControlTemplate 吗？

问题似乎是默认的 ControlTemplate (http://msdn.microsoft.com/en-us/library/ms754137(v=vs.110).aspx) 在 TabPanel 之后声明了 ContentPresenter，有效地强制它在上面按 Z 顺序排列。

一个简单的解决方案可能是简单地从提供的链接中复制它，将其粘贴进去并颠倒 TabPanel 和 Border 元素的顺序（一些调整可能是需要，因为 Border 现在可能完全位于 TabPanel 顶部，挡住了它的视线）。

<Style TargetType="{x:Type TabControl}">

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate TargetType="{x:Type TabControl}">

                <Grid KeyboardNavigation.TabNavigation="Local">

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>

                    <!-- VisualStateManager stuff... -->

                    <Border Grid.Row="1" ... >

                        <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent"/>

                    </Border>

                    <TabPanel Grid.Row="0" ... />

                </Grid>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

对于 TabPanel 上的圆角，我再次建议您查看 TabPanel 类的 ControlTemplate。

【讨论】：