45611

Why ZIndex is not considered in arrange override of a stackpanel

Question:

<strong>Here is what I tried to to:</strong>

<ol><li>Added a stackpanel to my window (Orientation: Horizontal)</li> <li>Added a set of buttons to it</li> <li>Set the first button's ZIndex to be higher than the second one</li> <li>Increased the width of the first button</li> </ol>

<strong>What I expected:</strong>

<ol><li>I expected the first button to be on top of the second button (atlest overlay)</li> <li>StackPanel's width should not change unless the width of the first button is no more sufficient</li> </ol>

<strong>What is happening actually:</strong>

<ol><li>First button's width increases and the second button moves towards the right accordingly. They stay on the same plane</li> <li>StackPanel's width increases with increase in the first button's width</li> </ol>

<strong>Here is my question:</strong>

I know that stackpanel has not considered ZIndex while arranging the items within itself, BUT WHY?? Shouldn't it consider the ZIndex of its children while arranging them???

Answer1:

The Stackpanel 'stacks' its children based on their widths, i.e. if you increase the width of an item (or increase its margin), the stackpanel will simply expand to accomodate this. If you want to force items within a stackpanel to overlap, you will have to change their location after the layout has been computed. You can perform this using a RenderTransform. See the example below:

<StackPanel Orientation="Horizontal" VerticalAlignment="Top"> <Button Content="One" Canvas.ZIndex="10"> <Button.RenderTransform> <TranslateTransform X="10"/> </Button.RenderTransform> </Button> <Button Content="One"/> <Button Content="One"/> <Button Content="One"/> </StackPanel>

And yes, the ZIndex is respected. This is an attached proepry of Canvas, however, it seems to be used by the rendering engine directly rather than by Canvas, hence it works in the above code.

Answer2:

I tried to find some relevant info about how to set the z index of wpf layout elements and panels. Using a Canvas comes with a different set of positioning issues which I simply hadn't the time to investigate. Here is a simple solution using the Panel.ZIndex property in xaml.

<Grid> <Border Width="100" Height="100" Margin="0,0,50,50" Panel.ZIndex="1" Background="Navy" Opacity="0.3" VerticalAlignment="Top" HorizontalAlignment="Left"> </Border> <Border Width="100" Height="100" Margin="50,50,0,0" Background="Fuchsia" Opacity="0.3"> </Border>

The resulting two square border elements will overlap. One can use stackpanels instead of borders and use this logic to overlap anything easily.

Here is the same code adapted to the button problem:

<Grid> <StackPanel Panel.ZIndex="10" Margin="20,20,0,0" HorizontalAlignment="Left"> <Button Content="One" Width="50" Height="40"> </Button> </StackPanel> <StackPanel Orientation="Horizontal" Margin="50,0,0,0" > <Button Content="Two" Width="50" Height="40"/> <Button Content="Three" Width="50" Height="40"/> <Button Content="Four" Width="50" Height="40"/> </StackPanel> </Grid>

Recommend

  • Prism App Does Not Exit When Closed
  • Ending the first successful thread in gcc C Linux
  • gap in percentage based layout
  • How do determine gutter-width in the sass version of zurbs foundation
  • Sign extending from a constant bit width in C#
  • How can I iterate over Pandas pivot table? (A multi-index dataframe?)
  • Does GCHandle.Alloc do anything beyond keeping a reference to an object?
  • Not able to stretch an inner StackPanel
  • UWP Template 10 create a dynamic hamburgermenu
  • Handsontable increase row header width
  • Aligning a Stack pointer 8 byte from 4 byte in ARM assembly
  • Is there a greater chance to collide when comparing GUIDs based on a hash vs \"Guid.NewGuid()?
  • detecting end of http header with \\r\\n\\r\\n
  • WPF8/C# - Binding Data To Grid
  • Update two sets of radiobuttons - shiny
  • Using Python objects in C++
  • TCPDF's getNumLines() is sometimes wrong
  • How can I apply differnt styles when transforming data using json2html based on data value?
  • PHP Handling Namespace with SimpleXML
  • Complex Silverlight TreeView, is nested hierarchy possible?
  • Angular2 emit event up to the DOM tree
  • Nested not working on slide
  • Firebase, only get new children
  • Multibinding Multiselection ListView
  • calculating number of bytes of each row in an image
  • Cypher - matching two different possible paths and return both
  • Write output of for loop to multiple files
  • Plotting densities in R
  • Consuming a WCF service in a Java Client using wsHttpBinding
  • How to disable all widgets inside Panel or inside Composite?
  • ListItem.Attributes.Add not working
  • Sequential (transactional) API calls in angular 4 with state management
  • Magento Fatal error: Maximum execution error solution, on WAMP
  • Use of this Javascript
  • C++ Partial template specialization - design simplification
  • How to get next/previous record number?
  • php design question - will a Helper help here?
  • Python: how to group similar lists together in a list of lists?
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How do I use LINQ to get all the Items that have a particular SubItem?