將文本框放在它下面的畫布上

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>