TabControl 中的 WPF zIndex答案

【问题标题】：WPF zIndex in TabControlTabControl 中的 WPF zIndex
【发布时间】：2009-03-27 02:50:57
【问题描述】：

我正在尝试让 zIndexing 在自定义 UserControl 上工作，但是当它在 TabControl 中弹出时，它会剪切控件的底部，如图所示：

这是我的 XAML

<StackPanel Panel.ZIndex="1">
    <TabControl Name="TabCtrlMain" Panel.ZIndex="2">
        <TabItem Name="TabItmOrdrLst" Visibility="Collapsed" Panel.ZIndex="3" >
            <StackPanel Panel.ZIndex="4">
                <ri:OrderList x:Name="OrderList" Panel.ZIndex="5" />
                <Rectangle Fill="Orange" Height="80" Width="300" />
            </StackPanel>
        </TabItem>
    </TabControl>
    <Rectangle Fill="Blue" Height="80" Width="300" />
</StackPanel>

【问题讨论】：

标签： .net wpf popup z-index

【解决方案1】：

从您发布的图像来看，用户控件看起来好像有某种模拟弹出窗口（Notes 窗格），它是 UserControl 的子级。如果是这种情况，如果 Notes 面板不是 OrderList 布局计算的一部分，它可能会解释剪裁。考虑使 Notes 控件成为真正的弹出窗口，或者使用类似 Expander 的东西，当展开时，它可以告诉它的父级（UserControl）它需要更多空间来呈现。

值得注意的是，像 StackPanel 这样的容器将始终“堆叠”它们的子控件（因此得名），这意味着子控件永远不会重叠。出于这个原因，在它的任何子节点上设置 Z-index 是没有意义的。我建议使用 Grid 或 Canvas 作为您想要重叠控件的容器，然后设置它们的 Z-Index。另外，请记住 Z-Index 仅与控件的直接父级上下文相关，因此如上例所示为所有控件提供 Panel.Zindex="n" 将不起作用。

据我所知，这个问题是布局问题，而不是 Z-index 问题。

【讨论】：

是的，这是一个布局问题。我已经把它改成了一个握把并取出了tabcontrol，它现在可以正常工作了。

【解决方案2】：

从您的示例中不清楚您期望 ZIndex 做什么。 ZIndex 仅影响同一容器中元素的相对堆叠，因此您在示例中的任何 ZIndex 设置都不会产生任何影响。 OrderList 将被 TabItem 裁剪，无论它与其任何子项之间的 ZIndex 的相对值如何。

【讨论】：

【解决方案3】：

也许您想将 UserControl 从 StackPanel 中分离出来。您可以在 Z 平面中使用元素放置的方法是使用 Grid 作为最外层容器（如果您还没有这样做的话）并将其用作布置元素的指南。由于网格内的项目可以占据相同的空间并根据它们的声明顺序进行 z 排序，因此您可能可以获得所需的功能。

不确定这是否符合您的要求，但值得一试。容器中的项目将在其父容器的边界处被剪裁，因此要完成您要查找的内容，我认为 UserControl 必须是 StackPanel 的兄弟而不是它的子项。

【讨论】：