c# - WPF Expander overlay used in ItemsControl -

I've been searching for a while, but all the solutions I can only deal with parts of my issue. With an item control, which includes the expansion, upon expansion, the content of the extensioner should be shown as an item which is overlapping the other item in the item control and not taking them down.

The following XAML-code is actually a big problem: the content of the expansion does not overlap other objects but is hidden behind them, I think it is because of ZIndex because the following in ItemsControl Items are added after expander content.

I managed to set a single spreader's ZIndex 99 style triggers, but it appears to be very complicated and error-prone solution any thoughts?

& lt; Window x: orbit = "wpfTest.MainWindow" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns: x = "http://schemas.microsoft.com/winfx/2006/ Xaml "title =" main window "height =" 350 "width =" 525 "& gt; & Lt; Window.Resources & gt; & Lt; X: array x: key = "item" type = "sys: string" xmlns: sys = "clr-namespace: system; assembly = mscoreib" & gt; & Lt; Sys: string & gt; A & lt; / Sys: string & gt; & Lt; Sys: string & gt; Two & lt; / Sys: string & gt; & Lt; Sys: string & gt; Three & lt; / Sys: string & gt; & Lt; Sys: string & gt; Four & lt; / Sys: string & gt; & Lt; / X: array & gt; & Lt; DataTemplate x: key = "template" & gt; & Lt; Grid Background = "Red" margin = "0,0,0,10" & gt; & Lt; Grid.RowDefinitions & gt; & Lt; RowDefinition Height = "Auto" /> & Lt; RowDefinition Height = "Auto" /> & Lt; /Grid.RowDefinitions> & Lt; Text block text = "{binding}" /> & Lt; Canvas height = "25" grid. Rau = "1" & gt; & Lt; Expander ExpandDirection = "Header" header = "Header" grid. Line = "1" & gt; & Lt; Expander.Content & gt; & Lt; TextBlock Height = "80" text = "content" background = "yellow" /> & Lt; /Expander.Content> & Lt; / Expander & gt; & Lt; / Canvas & gt; & Lt; / Grid & gt; & Lt; / DataTemplate & gt; & Lt; /Window.Resources> & Lt; Grid & gt; & Lt; ScrollViewer & gt; & Lt; Items control items source = "{static resource item}" item template = "{static resource template}" horizontal content element = "stretch" & gt; & Lt; / ItemsControl> & Lt; / ScrollViewer & gt; & Lt; / Grid & gt; & Lt; / Window & gt;

The way you are trying to do it, to get it It's going to be difficult. The problem is nested structure - since each canvas is nested inside the grid , then you will not be able to control your z-index relative to the other canvas element. To illustrate this, here is a planned topic of the visual tree created by your current markup:

  & lt; StackPainel & gt; & Lt ;! - item panel - & gt; & Lt; ContentPresenter & gt; & Lt ;! - item wrapper - & gt; & Lt; Grid & gt; & Lt; Canvas & gt; & Lt; / Canvas & gt; & Lt; / Grid & gt; & Lt; / ContentPresenter & gt; & Lt; ContentPresenter & gt; & Lt ;! - item wrapper - & gt; & Lt; Grid & gt; & Lt; Canvas & gt; & Lt; / Canvas & gt; & Lt; / Grid & gt; & Lt; / ContentPresenter & gt; & Lt; / StackPanel & gt;  

In the context of the above, the canvas element for your goal will appear in front of the siblings of its origin, ContentPresenter . It is impossible in this hierarchy, because ZIndex applies only to the brothers and sisters of the same basic element. Now, there can be methods that you massage upwards in a flat structure. So that you can apply your expanded content to ZIndex as needed.

However, I think that there will be an easier and more natural approach to using elements for expanded content. Popup is an outline primitive that is located outside the view tree, and always the top of your second content Will sit on You can use a togglebutton or something similar to create the "detail" effect. For example:

  & lt; Stackpaneel grid Rau = "1" & gt; & Lt; ToggleButton x: name = "popupputal" content = "extension" /> & Lt; Popup IsOpen = "{IsChecked, Binding, ElementName = PopupToggle}" & gt; & Lt; TextBlock Height = "80" text = "content" background = "yellow" /> & Lt; / Popup & gt; & Lt; / StackPanel & gt;