• 项目

Canvas.ZIndex Attached Property

Microsoft Silverlight will reach end of support after October 2021. Learn more.

Gets or sets the z-order rendering behavior of objects in a Canvas.

Namespace:  System.Windows.Controls
Assembly:  System.Windows (in System.Windows.dll)

Syntax

'Declaration
See GetZIndex, SetZIndex

See GetZIndex, SetZIndex

<object Canvas.ZIndex="int32"/>

Property Value

Type: System.Int32
The z-order of the object within the Canvas. The default is 0.

Remarks

Dependency property identifier field: ZIndexProperty

The z-order of an object determines whether the object is in front of or behind another overlapping object. By default, the z-order of objects within a Panel is determined by the sequence in which they are declared. Objects that are declared later appear in front of objects that are declared earlier. You can change this behavior by setting the Canvas.ZIndex attached property on objects within the Panel. Higher values are closer to the foreground; lower values are farther from the foreground.

This property is an example of an attached property syntax, whereby non-Canvas objects can set this property that can then be read and interpreted by a parent Canvas. For more information about attached properties, see Attached Properties Overview.

The value of the Canvas.ZIndex property is expressed as any numeric value. Although you can specify the value as a Double in markup, internally the value is converted to and treated as an integer.

You can also set the Canvas.ZIndex value to a negative value, such as "-99", which places the object even farther from the foreground. Canvas.ZIndex values are aligned along the z-axis -- higher values are closer to the foreground; lower values are farther from the foreground. The following illustration shows the relationship of z-order to z-axis.

Relationship of z-order to z-axis

z-order example

Examples

The following example creates three Ellipse objects. You can see that the Ellipse declared last (the lime-colored ellipse) is in the foreground, in front of the other two Ellipse objects.

<Grid x:Name="LayoutRoot" Background="White">
    <Canvas>

        <Ellipse 
    Canvas.Left="5" Canvas.Top="5" 
    Height="200" Width="200"
    Stroke="Black" StrokeThickness="10" Fill="Silver" />

        <Ellipse 
    Canvas.Left="50" Canvas.Top="50" 
    Height="200" Width="200"
    Stroke="Black" StrokeThickness="10" Fill="DeepSkyBlue" />

        <Ellipse 
    Canvas.Left="95" Canvas.Top="95" 
    Height="200" Width="200"
    Stroke="Black" StrokeThickness="10" Fill="Lime" />

    </Canvas>


</Grid>

The preceding example produces output that is similar to the following illustration.

Overlapping Ellipse objects

Positioned circles.

The following example is similar to the preceding one, except that the z-order of the Ellipse objects is reversed. The Ellipse that is declared first (the silver ellipse) is now in front.

<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"
    Canvas.Left="95" Canvas.Top="95" 
    Height="200" Width="200"
    Stroke="Black" StrokeThickness="10" Fill="Lime" />

    </Canvas>


</Grid>

The preceding example produces output that is similar to the following illustration.

Reversing the z-order of the Ellipse objects

Positioned circles.

Version Information

Silverlight

Supported in: 5, 4, 3

Silverlight for Windows Phone

Supported in: Windows Phone OS 7.1, Windows Phone OS 7.0

Platforms

For a list of the operating systems and browsers that are supported by Silverlight, see Supported Operating Systems and Browsers.