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 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 or User Control, any object that can contain elements such as the TextBlock, Rectangle.
<UserControl x:Class="ZIndex.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<Canvas Width="640" Height="480">
<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>
</Grid>
</UserControl>
In the screenshot below you can see 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.
Your Comments and Questions Answered
You are not logged in. You need to login to post new messages, if you do not have a login you can register for free!