WPF 通过设置Canvas.ZIndex属性修改图像的图层

对Canvas.ZIndex,MSDN的解释是:获取或设置 Canvas 中对象的 z 顺序呈现行为。

并附有以下示例代码:

 <Grid x:Name="LayoutRoot" Background="White">
        <Canvas>
            <Ellipse Canvas.ZIndex="3" Canvas.Left="5" Canvas.Top="5" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="Silver"/>
            <Ellipse Canvas.ZIndex="2" Canvas.Left="50" Canvas.Top="50"  Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="DeepSkyBlue"/>
            <Ellipse Canvas.ZIndex="1" Name="Ellipse1" Canvas.Left="95" Canvas.Top="95"  Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="Lime"/>
        </Canvas>
    </Grid>

注意:本示例使用了Canvas布局对象。

我不禁要问：我平时根本不用Canvas布局，基本都是Grid，如何实现Z序的排列呢？

今天突然发现：还是使用Canvas.ZIndex属性，也就是说用Grid布局，也可以用此属性来实现叠放，不必再套一个Canvas的外衣。让我们修改代码：

    <Grid x:Name="LayoutRoot2" Background="White">
        <Ellipse     Canvas.ZIndex="3"    Canvas.Left="50" Canvas.Top="50"     Height="200" Width="200"    Stroke="Black" StrokeThickness="10" Fill="Silver" Margin="-9,-9,127,41"/>
        <Ellipse     Canvas.ZIndex="2"    Canvas.Left="50" Canvas.Top="50"     Height="200" Width="200"    Stroke="Black" StrokeThickness="10" Fill="DeepSkyBlue" Margin="25,10,93,22"/>
        <Ellipse     Canvas.ZIndex="1"    Canvas.Left="50" Canvas.Top="50"     Height="200" Width="200"    Stroke="Black" StrokeThickness="10" Fill="Lime" Margin="65,32,53,0"/>
    </Grid>

我们去掉了Canvas布局元素，得到的结果：

这就是附加属性的特别之处，可以被附加到任何元素上。至于有没有用，要根据具体情况具体分析了。

注意到了吗？我特意设置了Ellipse的Canvas.Left="50" Canvas.Top="50"，但是Left和Top并不起作用。

转自：https://www.cnblogs.com/slmk/archive/2011/11/07/2238832.html