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>

将文本框放在其下方的画布上

2 个答案: