HTML5 and CSS3 enabled 3D web experience at roomsay.com:

RoomSay.com 3D Web Experience RoomSay.com 3D Web Experience DIY

Vectorlight News

  • 3D CSS used to Create Website
    Feb 08, 2014

    With the CSS 3D effects being implemented in modern browsers RoomSay.com takes this new technology and enables you to map your traditional 2D content onto the walls of a 3D room.

  • Chat App Converted to HTML and JQuery
    Sep 08, 2011

    Converted from Silverlight to HTML and Javascript/JQuery is the Vectorlight Chat App. Login using your Vectorlight password to chat using your username and avatar.

  • HTML5 iPhone,Android Big Guns Tower Defense
    Jul 02, 2011

    Big Guns has made the leap from Windows Phone 7 (XNA) to HTML5 so you can now play it on your iPhone, Android and other HTML5 compatible devices.

  • HTML5 Games - Word Poppers and Batty
    Jun 04, 2011

    As the take-up of HTML5 quickens (74% of users currently have a browser capable of HTML5 Canvas) we present two more games for both your browser and mobile.

  • Big Guns Tower Defense on Windows Phone 7
    May 06, 2011

    Coming soon to Windows Phone 7 is an XNA port of the popular Vectorlight tower defense game Super Tower Defense. Whilst retaining many of the graphical and gameplay features of the original Silverlight game.

  • Home Page News

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"
    <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.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" />

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.

Screenshot showing two sets of rectangles

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

Pankaj posted

Great Demostration....

rookieleo posted

Very very straightful and clear, thank you

Adriana posted


I have to manage the zindex of the children of a container which inherites from panel, but I don't know how... could add some dynamic examples?

By the way, thanks for the explanation :-)

Ashish posted

Thank you very much

Ashish posted

Thank you very much

Huzefa Mala posted

Please continue the good work

Camil AK posted


Jawahar posted

Nice expalanation about Z-index... easy to understand.

Raghuraman posted

Thanks for posting about silverlight Canvas.ZIndexProperty found the image displayed very helpful to easily understand.



prabhash posted

Thank you for sharing this Nice Information


Post your Comments

Rate this: 

1 Star 2 Star 3 Star 4 Star 5 Star
40 Ratings / 3.1 Average


Silverlight Controls

  • Rich TextBox

    Create and edit rich content with this slick and expandable Rich TextBox...

  • TreeView

    This easy to use TreeView comes with drag and drop, sorting, searching and much more...

  • Context Menu

    You too can have cool popup context menus in your Silverlight applications...

  • Resizable Dialog

    Draggable and resizable popup dialogs are what serious Silverlight developers need...

  • Spell Checker

    Real-time spell checking in Silverlight? We did it first here...