Question

以下是我尝试的内容：

在我的窗口添加了一个堆叠面板（方向：水平）
添加了一组按钮
将第一个按钮的ZIndex设置为高于第二个按钮
增加第一个按钮的宽度

我的期望：

我希望第一个按钮位于第二个按钮（atlest overlay）
除非第一个按钮的宽度不够充足，否则StackPanel的宽度不应改变

实际发生了什么：

第一个按钮的宽度增加，第二个按钮相应地向右移动。他们待在同一架飞机上
StackPanel的宽度随着第一个按钮宽度的增加而增加

以下是我的问题：

我知道stackpanel在安排物品时没有考虑ZIndex，但是为什么？在安排它们时，它不应该考虑它的孩子的ZIndex吗？

Answer 1

Stackpanel'根据它们的宽度堆叠'它的子节点，即如果你增加一个项目的宽度（或增加它的边距），stackpanel将简单地扩展以适应这个。如果要强制堆栈面板中的项目重叠，则必须在计算布局后更改其位置。您可以使用RenderTransform执行此操作。请参阅以下示例：

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

是的，ZIndex受到尊重。这是Canvas的附加说明，然而，它似乎是由渲染引擎直接使用而不是Canvas，因此它适用于上面的代码。

Answer 2

我试图找到一些关于如何设置wpf布局元素和面板的z索引的相关信息。使用Canvas带来了一组不同的定位问题，我根本没有时间进行调查。这是一个使用xaml中的Panel.ZIndex属性的简单解决方案。

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

生成的两个方形边框元素将重叠。可以使用堆栈面板而不是边框，并使用此逻辑轻松地重叠任何内容。

以下是适用于按钮问题的相同代码：

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

为什么不考虑在堆栈面板的排列覆盖中考虑ZIndex

2 个答案: