原文：http://www.cnblogs.com/chukaren/archive/2010/01/15/1648902.html
1. 先寫一個分頁檔 test.html
<html><head> <title>My SilverLight Test</title></head><body> <object type="application/x-silverlight-2" id="mySL" width="800" height="600"> <param name="background" value="silver" /> <param name="source" value="mytest.xaml" /> </object></body></html>
2. 然後寫xaml檔案， mytest.xaml，以後更改這個檔案看效果就行了， 如下：
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Rectangle Canvas.Top="10" Canvas.Left="10" Width="100" Height="100" Fill="Red" Stroke="Black" StrokeThickness="10"/></Canvas>
這樣，Html頁面中設定了SilverLight控制項的大小是800X600,背景色是銀灰色。而xaml檔案就是我們的內容。
內容使用Canvas作為布局控制項，現在在其中放置了一個矩形圖形，位於左上方10，10的位置，寬度和高度都是
100， 紅色背景，邊線是黑色，邊線線寬為10.如下：
3. 矩形（Rectangle）
矩形除了上面的幾個屬性外，還可以設定圓角矩形。
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Rectangle Canvas.Top="10" Canvas.Left="10" Width="150" Height="100" Fill="Red" Stroke="Black" StrokeThickness="10" RadiusX="20" RadiusY="50"/></Canvas>
4. 橢圓（Ellipse）
橢圓和矩形沒有什麼本質區別，只是為了設定更方便，將RadiusX和RadiusY設為長或寬的一半。
因此橢圓就是比矩形少兩個屬性，不用再設定RadiusX和RadiusY了。這裡就不抓圖了。
5. 多邊形 （Polygon）
多邊形當然就是需要指定多條線，因此多了一個Points屬性，指定每個點，同時Fill, Stroke, StrokeThickness都可用。
當在Canvas中時，如果不指定Canvas.Top和Canvas.Left，則起始點是基於Canvas的0，0點，否則基於指定的點。
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Polygon Canvas.Top="10" Canvas.Left="10" Fill="Red" Stroke="Black" StrokeThickness="10" Points="50,50 100,100 200,10"/></Canvas>
6. 線段（Line）
線當然需要指定起點和終點，這就多了X1,Y1,X2,Y2四個屬性，同時還可以指定兩個端點的樣式，如方的，圓的，三角
的之類的。也就又多了兩個屬性，StrokeStartLineCap和StrokeEndLineCap。此外還有Stroke和StrokeThickness.
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Line X1="20" Y1="20" X2="200" Y2="20" Stroke="Black" StrokeThickness="10" StrokeStartLineCap="Triangle" StrokeEndLineCap="Triangle"/> <Line X1="20" Y1="40" X2="200" Y2="40" Stroke="Black" StrokeThickness="10" StrokeStartLineCap="Round" StrokeEndLineCap="Round"/> <Line X1="20" Y1="60" X2="200" Y2="60" Stroke="Black" StrokeThickness="10" StrokeStartLineCap="Square" StrokeEndLineCap="Square"/> <Line X1="20" Y1="80" X2="200" Y2="80" Stroke="Black" StrokeThickness="10" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat"/></Canvas>
7. 多線段
這個跟Polygon基本一樣，只是最後一個點與第一個點不一樣，就不會封閉。如：
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Polyline Canvas.Top="10" Canvas.Left="10" Fill="Red" Stroke="Black" StrokeThickness="10" Points="50,50 100,100 200,10"/></Canvas>
8. 路徑（Path）
路徑用來表示比較複雜的圖形。前面的幾種圖形它都能表示，同時還可以表示各種複雜曲線圖形。
Path主要使用Data屬性來表示圖形。Data裡面指定命令，M表示移動到，L表示畫直線到，V表示畫垂直線到，
H表示畫水平線到，Z表示結束（直接到起始點），C表示三次貝茲路徑，Q表示兩次貝茲路徑，
S表示平滑的貝茲路徑，A表示曲線，具體就需要看看協助文檔了。
如下，先移動到50，50，再畫線到100，100，再畫線到200，10，再橫向畫到150，再縱向畫到90，再結束。
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Path Stroke="Black" StrokeThickness="10" Data="M 50,50 L 100,100 L 200,10 H 150 V 90 Z"/></Canvas>
路徑中的Data屬性還可以設定一些幾何形狀，如RectangleGeometry, EllipseGeometry, LineGeometry, PathGeometry等等。
如：
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Path Canvas.Top="10" Canvas.Left="10" Fill="Red" Stroke="Black" StrokeThickness="10"> <Path.Data> <RectangleGeometry Rect="10,10,150,100" /> </Path.Data> </Path></Canvas>
如果有多個形狀，需要放到GeometryGroup中。
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Path Canvas.Top="10" Canvas.Left="10" Fill="Red" Stroke="Black" StrokeThickness="10"> <Path.Data> <GeometryGroup> <RectangleGeometry Rect="10,10,150,100" /> <EllipseGeometry RadiusX="30" RadiusY="30" Center="220, 40" /> </GeometryGroup> </Path.Data> </Path></Canvas>
幾何形狀與上面的圖形的區別主要在於幾何形狀完全是數學描述，不涉及顯示相關，也就沒有Fill, Stroke之類的屬性。
9. 其它幾個常用的相關屬性
StrokDashArray: 畫虛線用。裡面放著短線和空格的寬度，如奇數位代表短線，偶數位代表空格。
如：StrokeDashArray=”2,1”, 代表短線為2，空格為1
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Polygon Canvas.Top="10" Canvas.Left="10" StrokeDashArray="2,1" Fill="Red" Stroke="Black" StrokeThickness="10" Points="50,50 100,100 200,10"/></Canvas>
StrokeLineJoin: 線串連，可以設為Miter, Round, Bevel.
StrokeMiterLimit: 線延伸時的限值。
Visibility: 可視。可以設為Visible或Collapsed. 當設為Collapsed時，不能接收輸入事件。
Opacity：透明度。0到1之間的任何值。0表示完全透明。當設為0時，可以接收輸入事件。
Stretch: 伸縮。可以設為None,Uniform, UniformToFill。主要是當圖形填滿為映像，畫刷或媒體時用。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
