Rendering Order with the Silverlight Z-Index Property
The order in which elements are rendered in Silverlight is determined firstly by where they appear in the visual object hierarchy and secondly by their Z-Index property. Understanding this can be difficult at first but it is no different to the way browsers render plain HTML elements.
As I've said at the start the object hierarchy is the first part of the puzzle. By object I mean a Canvas, Grid or StackPanel (any element derived from Panel), any object that can contain elements such as the TextBlock, Rectangle, Line etc.
<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Page_Loaded"
x:Class="ZIndex.Page;assembly=ClientBin/ZIndex.dll"
Width="640"
Height="480"
Background="White"
>
<Canvas>
<Rectangle Canvas.Left="40" Canvas.Top="40" Fill="#0000ff" Width="100" Height="100" />
<Rectangle Canvas.Left="60" Canvas.Top="60" Fill="#4444ff" Width="100" Height="100" />
<Rectangle Canvas.Left="80" Canvas.Top="80" Fill="#8888ff" Width="100" Height="100" />
<Rectangle Canvas.Left="100" Canvas.Top="100" Fill="#bbbbff" Width="100" Height="100" />
</Canvas>
<Canvas Canvas.Top="200" Canvas.Left="200">
<Rectangle Canvas.Left="0" Canvas.Top="0" Fill="#ff0000" Width="100" Height="100" Canvas.ZIndex="2" />
<Rectangle Canvas.Left="20" Canvas.Top="20" Fill="#ff4444" Width="100" Height="100" />
<Rectangle Canvas.Left="40" Canvas.Top="40" Fill="#ff8888" Width="100" Height="100" />
<Rectangle Canvas.Left="60" Canvas.Top="60" Fill="#ffbbbb" Width="100" Height="100" />
</Canvas>
</Canvas>
In the screenshot below you can see the first set of Rectangles (Blue) are rendered in order of appearance. This is the default behaviour that Silverlight applies to elements when rendering them.
For the second set of rectangles (Red) the first rectangle is visible above the others, this is because of the Canvas.ZIndex setting. Try playing with the settings to see what the effects are.
Using Canvas.ZIndex in a Grid
Just as you can apply the Canvas.ZIndex property to elements in a Canvas you can also use the Canvas.ZIndex property for elements in a Grid as well to control depth rendering order.
Your Comments
Post your Comments
Rate this:
1 Star
2 Star
3 Star
4 Star
5 Star
40 Ratings / 3.1 Average