還有一個形狀不應該忘記：橢圓，使用<Ellipse>元素表現。最重要的屬性是Width和Height，用來決定了橢圓的尺寸。例4-9顯示了一個橢圓，圖4-8是它在瀏覽器中的輸出效果。
圖4-7 橢圓
提示：當橢圓的寬度和高度相同時，可以得到一個圓。
幾何元素
繪製形頭的另一種方法是使用所謂的幾何元素。可以把它比喻爲形狀（直線，矩形，路徑等等），但這些元素不能自繪，而是在其它元素中定義自己的外觀。例如，UI對象的Clip屬性可以用於給幾何元素定義一條路徑。這條路徑定義了UI對象的輪廓。或者，您可以通過<Path>元素的Data屬性使用幾何元素，從而提供路徑的佈局。
有幾個幾何元素，包括EllipseGeometry，LineGeometry，PathGeometry和RectangleGeometry.下面演示了使用路徑來包含一幅圖像（稍後，例4-16將演示達到相同效果的不同方法）：
<ImageSource="image.png">
<Image.Clip>
<EllipseGeometryCenter="150,75"RadiusX="300"RadiusY="150" />
</ImageClip>
</Image>
幾何元素也可以組合成組，在<GeometryGroup>元素下面嵌套它們。
元素位置
如果您不指定元素的位置，它將位於顯示區域的原點（0,0）。您可以自己做個實驗：創建一個Silverlight XAML文件並在裏面放置一個<TextBlock>元素。這些元素中的所有文字將重疊，因爲它們都顯示在左上角（0,0）。
大多數元素可以通過設置Canvas.Top和Canvas.Left屬性來改變它們的位置。它們分別指示元素的x和y座標。下面的文本塊將顯示於向右50個像素，向下100個像素的位置：
<TextBlockCanvas.Left="50"Canvas.Top="100"Text="Silverlight" />
當有更多的東西需要定位時，可以在<Canvas>元素中實現。一個canvas也可以有位置：
<CanvasCanvas.Left="50"Canvas.Top="100">
...
</Canvas>
當一個canvas內有多個canvas環繞時，如例4-10，它包含了多個canvas，每個都有屬性Canvas.Left=”50”和Canvas.Top=”50”（除了最外層）。最裏層的<Canvas>元素的<TextBlock>元素使用Canvas.Left=”50”和Canvas.Top=”50”。它們中的每個都使用了相對於父canvas的相對座標而不是絕對座標。從而，每個canvas都距它的父親向右50個像素，向下50個像素。這些Canvas.Left=”50”和Canvas.Top=”50”屬性又稱爲依賴屬性：它們依賴於上一級的<Canvas>元素。同理，<Canvas>元素也可以被稱爲依賴對象。圖4-9顯示了它的輸出結果。
例4-10 嵌套的canvas，XAML文件（Canvas.xaml）
<Canvasxmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="500"Height="500"Background="Red">
<CanvasCanvas.Left="50"Canvas.Top="50"Background="Green"
Width="400"Height="400">
<CanvasCanvas.Left="50"Canvas.Top="50"Background="Yellow"
Width="300"Height="300">
<CanvasCanvas.Left="50"Canvas.Top="50"Background="Blue"
Width="200"Height="200">
<TextBlockCanvas.Left="50"Canvas.Top="50"FontSize="20"
Text="Silverlight"/>
</Canvas>
</Canvas>
</Canvas>
</Canvas>
（譯者注：不知爲什麼，我的瀏覽器沒有把這張圖顯示完全）
提示：只有<Canvas>元素擁有確定的長和寬時纔會顯示它的背景色。如果您忽略了這些信息，背景色將爲默認的白色。
當然，這些canvas互相重疊。Silverlight使用了下面的方法：所有元素相互堆疊，使得它得到視覺上的三維效果。因此，例4-10文字顯示在所有canvas的上方，因爲它的元素在文檔的最後。這就是爲什麼能看見文本的根本原因。在CSS樣式中，這是一個屬性，叫z-index 3，它包含兩個矩形：z-index 2和z-index 1。高的z-index放置在比它低的z-index上。然而，外層canvas不會覆蓋矩形，雖然它的z-index最高。
例4-11對例4-10做了一些改動：除了最外層canvas所有我們加入的矩形都被遮擋。通常它們會象圖4-9那樣交迭，但這一次我們設置了Canvas.ZIndex，所以內層元素擁有一個低的z-index，從而使得第一個矩形遮擋了第二個，第二個遮擋了第三個，依此類推。文本被賦予了最低的z-index，這個文本現在被藍色矩形覆蓋，從而無法顯示，如圖4-10所示。
例4-11 設置z-index，XAML文件（ZIndex.xaml）
<Canvasxmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="500"Height="500"Background="White">
<RectangleCanvas.Left="50"Canvas.Top="50"Fill="Red"
Width="200"Height="200"Canvas.ZIndex="5"/>
<RectangleCanvas.Left="100"Canvas.Top="100"Fill="Green"
Width="200"Height="200"Canvas.ZIndex="4"/>
<RectangleCanvas.Left="150"Canvas.Top="150"Fill="Yellow"
Width="200"Height="200"Canvas.ZIndex="3"/>
<RectangleCanvas.Left="200"Canvas.Top="200"Fill="Blue"
Width="200"Height="200"Canvas.ZIndex="2"/>
<TextBlockCanvas.Left="250"Canvas.Top="250"FontSize="20"
Text="Silverlight"Canvas.ZIndex="1"/>
</Canvas>
