CODEWITHSUNDEEP
wpfxamllayoutpanelz-index
sudarsanyes
sudarsanyes

Reputation: 3204

Why ZIndex is not considered in arrange override of a stackpanel

Here is what I tried to to:

  1. Added a stackpanel to my window (Orientation: Horizontal)
  2. Added a set of buttons to it
  3. Set the first button's ZIndex to be higher than the second one
  4. Increased the width of the first button

What I expected:

  1. I expected the first button to be on top of the second button (atlest overlay)
  2. StackPanel's width should not change unless the width of the first button is no more sufficient

What is happening actually:

  1. First button's width increases and the second button moves towards the right accordingly. They stay on the same plane
  2. StackPanel's width increases with increase in the first button's width

Here is my question:

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???

Upvotes: 0

Views: 4714

Answers (2)

pasx
pasx

Reputation: 2985

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>

Upvotes: 0

ColinE
ColinE

Reputation: 70162

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.

Upvotes: 2

Related Questions