default.aspx
Silverlight .NET Controls and CMS
Home
tutorials.aspx
Silverlight .NET Tutorials
Tutorials
Rendering Order using Z-Index

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.

Screenshot showing two sets of rectangles

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!

Be the first to post a comment or question.

 
This page is 22.77KB and was generated by the SilverPages CMS in 0.031 seconds. Total impressions: 1298.