列表内画布的 Expander 的 ZOrder

Question

我有一个包含一些控件的列表，其中包括 Expander。扩展器内有另一个列表，我想将其覆盖在外部列表上。这是一个简单的重现：

<Page.Resources>
    <x:Array x:Key="array1" Type="sys:String">
        <sys:String>item 1</sys:String>
        <sys:String>item 2</sys:String>
        <sys:String>item 3</sys:String>
    </x:Array>
    <DataTemplate x:Key="buttonTemplate">
        <Button Content="{Binding}"/>
    </DataTemplate>
    <DataTemplate x:Key="expanderItem">
        <StackPanel>
            <Expander Header="Options">
                <Canvas>
                    <StackPanel Panel.ZIndex="999" Background="Red">
                        <Label>A1</Label>
                        <Label>A2</Label>
                        <Label>A3</Label>
                        <Label>A4</Label>
                    </StackPanel>
                </Canvas>
            </Expander>
            <Label BorderBrush="Black" BorderThickness="2" Content="{Binding}"/>
        </StackPanel>
    </DataTemplate>
</Page.Resources>
<Grid>
    <ListBox ItemsSource="{StaticResource array1}" ItemTemplate="{StaticResource expanderItem}"/>
</Grid>

当 Expander 打开时，内部标签将在与同一 DataTemplate 中的标签以及列表中后面的项目的内容相同的级别进行渲染。我尝试将 Panel.ZIndex 移至面板而不进行任何更改。

如果我添加以下样式：

<Style TargetType="{x:Type Expander}">
    <Style.Triggers>
        <Trigger Property="IsExpanded" Value="True">
            <Setter Property="Panel.ZIndex" Value="999"/>
        </Trigger>
    </Style.Triggers>
</Style>

它将正确地覆盖同一列表项中的项目，但仍会与后面的列表项中的内容混合呈现。

（我怀疑这是一个相当明显的布局问题，但我一直无法找到它。）

Answer 1

您可以尝试编写一个转换器，根据列表中项目的索引在数据模板中设置 ZIndex。有趣的是，当添加/删除项目时，确保所有内容都正确更新。

您需要扩展器独立于布局吗？