如何使ui元素相對於父畫布而不是包含畫布的zindex？

Question

基本上，我試圖在用戶控件中的一個簡單的Path元素上創建一個陰影效果，方法是在陰影元素（也是Path）上放置1個ZIndex，並在另一個UI元素上放置一個zindex。這2個元素位於用戶控件中，其中根是一個畫布並按用戶控件中的預期工作。

我也有一個包含此控件的2個實例的包含畫布，我希望每個圖元的陰影元素都出現在另一個非陰影元素的下面。它不工作，一個控件的陰影出現在其他非陰影元素之上。如果我爲用戶控件更改父畫布的ZIndex索引，則會將用戶控件中的兩個元素放在其他用戶控件元素的頂部。我認爲這是因爲ZIndex只相對於包含畫布而不是所有畫布。

什麼是最好的方式去解決這個問題，而不把所有的UI元素放在同一個畫布上。

Answer 1

恐怕你將不得不找到一種方法來組裝你的路徑到一個單一的畫布。當一個Canvas被渲染時，它只會尊重其直接子對象的Z-Index。可以測試此如下：

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

在上述例子中，即使藍色矩形具有16的Z-索引，這是比綠矩形的Z-索引時，將其下方呈現的，因爲它被包含在ZIndex爲5的Canvas中移除包含的畫布，並將藍色的rectangel呈現在綠色上方。