Beginning Web Development, Silverlight, and ASP.NET AJAX

376
CHAPTER 16 ■ PROGRAMMING SILVERLIGHT WITH XAML AND JAVASCRIPT
In addition, you can set the Z-order of the Canvas using the Canvas.ZIndex attribute.
Z-order determines which item is drawn on top of another if multiple items are overlapping
on the screen. Silverlight reads a XAML file from the top down, so that items that
appear later in the document will be drawn on top of items that appear earlier.
Here is an example of a XAML document containing two Canvases. Each Canvas contains
a rectangle.
There are a number of things going on in this listing, which, once you understand
them, will help you to understand how to lay elements out in Silverlight XAML.
First, notice that each of the rectangles is contained within a Canvas. The first, or
white, rectangle (the one with the Fill="White" attribute set) has its Canvas.Top property
set to 19. This means that it will be drawn 19 pixels down from its container. Its container
Canvas has a Canvas.Top of 59 and a Canvas.Left of 8. This Canvas is contained by the root
Canvas—thus, the white rectangle will be drawn 78 pixels down from the top of the
screen and 8 pixels from the left. Similarly, the black rectangle’s position is determined by
its Canvas.Top and Canvas.Left properties relative to its container Canvas.
Next, you will notice that the dimensions of the rectangles are set so that they are
actually overlapping and occupying some of the same screen real estate. As mentioned
earlier, Silverlight will draw later elements on top of earlier ones, so the black rectangle
should be drawn on top of the white one.
Figure 16-1 shows how this will appear when it is rendered.