将文本框放在它下面的画布上

Question

我有三个画布，每个画布都包含文本框。 第一个画布包含比画布大的文本框，并且应位于以下画布的顶部。 我试着用z-index，但是看起来画布总是在文本框的上面。

Answer 1

您可以明确地创建项目容器，即ListBoxItems。

的ListBoxItems将ListBox的ItemsPanel的直接子元素，因此具有共同的父元素，这使zIndex属性的工作要求：

<ListBox> 
    <ListBoxItem Panel.ZIndex="1"> 
     <Canvas ...> 
      ... 
     </Canvas> 
    </ListBoxItem> 
    <ListBoxItem> 
     <Canvas ...> 
      ... 
     </Canvas> 
    </ListBoxItem> 
    <ListBoxItem> 
     <Canvas ...> 
      ... 
     </Canvas> 
    </ListBoxItem> 
</ListBox> 

Answer 2

我也申请了一些造型让你的代码方式更短，更容易维护。在应用Clemenses解决方案之前应该看起来像这样：

<ListBox> 
    <ListBox.Resources> 
     <Style TargetType="{x:Type Canvas}"> 
      <Setter Property="Width" Value="500" /> 
      <Setter Property="Background" Value="Blue" /> 
      <Setter Property="Height" Value="40" /> 
     </Style> 
     <Style TargetType="{x:Type TextBox}"> 
      <Setter Property="Width" Value="30" /> 
      <Setter Property="Canvas.Top" Value="10" /> 
      <Setter Property="Height" Value="20" /> 
     </Style> 
    </ListBox.Resources> 

    <Canvas Name="firstCanvas" 
      Top="80" 
      Left="100" 
      ZIndex="3"> 

     <TextBox Name="BigText" 
        Background="White" 
        Canvas.ZIndex="6" 
        Canvas.Left="50"/> 

     <TextBox Canvas.Left="100"/> 
     <TextBox Canvas.Left="150"/> 
     <TextBox Canvas.Left="200"/> 
    </Canvas> 

    <Canvas Top="80" 
      Left="100" 
      ZIndex="1"> 

     <TextBox Canvas.Left="100"/> 
     <TextBox Canvas.Left="150"/> 
     <TextBox Canvas.Left="200"/> 
    </Canvas> 

    <Canvas Top="80" 
      Left="100" 
      ZIndex="2"> 

     <TextBox Canvas.Left="100"/> 
     <TextBox Canvas.Left="150"/> 
     <TextBox Canvas.Left="200"/> 
    </Canvas> 
</ListBox>