ZOrder of Expander with Canvas inside of List

Question

I have a list which contains some controls, including an Expander. Within the expander is another list, which I want to overlay the outer list. Here's a simple repro:

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

When the Expander gets opened, the inner labels get rendered at the same level as the label in the same DataTemplate and the contents later items in the list. I have tried moving the Panel.ZIndex up to the panel with no change.

If I add the following style:

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

It will properly overlay items in the SAME list item, but still renders intermixed with contents from later list items.

(I suspect this is a fairly obvious layout problem, but I have not been able to find it.)

Answer 1

You could try writing a converter that sets the ZIndex in the datatemplate based on the index of the item in the list. The interesting thing with this would be making sure everything updates correctly as items are added / removed.

Do you need the expander to be independent of layout?