wpf zIndex in TabControl

Question

I am trying to get zIndexing working on a custom UserControl but it clips the bottom of the control when it pops up inside a TabControl as shown here.

This is my 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>

Answer 1

It is unclear from your example what you expect the ZIndex's to do. ZIndex only affects the relative stacking of elements in the same container so none of the ZIndex settings you have in your example will have any effect. The OrderList will be clipped by the TabItem regardless of the relative values of ZIndex between it and any of its children.

Answer 2

Maybe you want to break the UserControl out of the StackPanel. Something you can do to play around with the element placement in the Z plane is to use a Grid as the outermost container (if you're not doing so already) and use this as a guide to laying out your elements. Since items inside of a grid can occupy the same space and are z-ordered based on the order in which they're declared, you might be able to get the functionality you're looking for.

Not sure if this fits what you're trying to do, but it's worth a try. Items within a container are going to be clipped at the boundaries of their parent container, so to accomplish what you're looking for I would think the UserControl would have to be a sibling of the StackPanel instead of being a child of it.

Answer 3

Hi Alex,

From the image you posted, it looks as though the user control has some sort of a simulated popup window (the Notes pane), which is a child of the UserControl. If this is the case, it might explain the clipping if the Notes panel is not part of the OrderList's layout calculations. Consider making the Notes control a true popup window, or else use something like an Expander which, when expanded, can tell it's parent (the UserControl) that it requires more space to render.

It's worth noting that containers like StackPanel will always "stack" their child controls (hence the name), meaning that child controls will never overlap. For this reason, setting the Z-index on any of it's childred is meaningless. I'd suggest using Grid or Canvas as containers of you want to overlap controls and then set their Z-Index. Also, remember that Z-Index is only relevant in the context of the control's immediate parent, so giving all controls Panel.Zindex="n" as in the above example won't work.

From what I can see, this problem is a layout problem, not a Z-index problem.