Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

Canvas.ZIndex Attached Property

Silverlight

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

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

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.

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

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.

Silverlight

Supported in: 5, 4, 3

Silverlight for Windows Phone

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

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

Community Additions

Show:
© 2014 Microsoft