Canvas.ZIndex Attached Property

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.

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.

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="Transparent">
    <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.

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="Transparent">
    <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.

Windows Phone OS

Windows Phone

Reference

Other Resources