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

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页