Question

Basically, I’m trying to create a shadow effect on a simple Path element in a user control by putting a ZIndex on the shadow element (also a Path) of 1 and a zindex on the other UI element of 2. These 2 elements are in a user control where the root is a canvas and work as expected in the user control.

I also have a containing canvas that contains 2 instances of this control, where I want the shadow element of each to appear underneath the other’s non-shadow element. Its not working and the shadow of one control are appearing on top of the others non-shadow element. If I change the parent canvas’s ZIndex index for the user control it puts both elements in the user control on top of the other user controls elements. I assume this is because the ZIndex is only relative to the containing canvas and not all canvases.

What’s the best way to go about fixing this without putting all of the UI elements on the same canvas.

Answer 1

I’m afraid you are going to have to find a way to assemble your paths into a single Canvas. When a Canvas is rendered it respects the Z-Index of its immediate children only. You can test this as follows:

<Canvas x:Name="LayoutRoot" Background="White">
  <Rectangle Width="100" Height="100" Fill="Green"
              Canvas.Left="20" Canvas.Top="20"
              Stroke="Black"
              Canvas.ZIndex="10"/>
  <Canvas Canvas.ZIndex="5">
    <Rectangle Width="100" Height="100" Fill="Blue"
                Canvas.Left="30" Canvas.Top="30"
                Stroke="Black"
                Canvas.ZIndex="16"/>
  </Canvas>
</Canvas>

In the above example, even though the blue rectangle has a ZIndex of 16, which is greater than the ZIndex of the Green rectangle, it is rendered beneath, because it is contained within a Canvas with a ZIndex of 5. Remove the containing canvas and the blue rectangel renders above the green.