I’m making a dress up doll game in WPF and I have a problem with ZIndex layering.

I have a working logic that allows for HairFront and HairBack to be dragged together and moved over DollImage, but I can’t get HairBack to be behind the DollImage while HairFront would be at the front. When I check the ZIndex values for these three images in debug they show that the values are in order HairBack > DollImage > HairFront but the images don’t layer in that order.

<Grid x:Name="MainGrid"> (...)
 <Label Content="Doll"/>
 <WrapPanel x:Name="DollPanel" Panel.ZIndex="1">
  <Image x:Name="DollImage" Source="/img/doll_placeholder.png" Panel.ZIndex="2"/>
 </WrapPanel>
 <Label Content="Items"/>
  <DockPanel x:Name="draggableItems" LastChildFill="True" Panel.ZIndex="0">
   <Border> 
    <Grid>
     <Image x:Name="HairBack" Source="/img/hairback_placeholder.png" Panel.ZIndex="-1" />
     <Image x:Name="HairFront" Source="/img/hair_placeholder.png" Panel.ZIndex="4"/>
    </Grid>
   </Border>
  </DockPanel>
</Grid>

Fragment of the LeftButtonUp method that sets ZIndexes after dragging (it sets the values but the images still aren’t layered correctly):

            Panel.SetZIndex(frontImage, 99);
            Panel.SetZIndex(backImage, -99);
            Panel.SetZIndex(DollImage, 2);

I tried experimenting with the ZIndexes of the parents but all I got was the DollImage being at the front or behind both HairBack and HairFront.