Canvas 元素表示定制一个区域，并可以通过相对坐标定义子元素位置，在一下情况下Canvas是不可见的
-
Height 属性等于 0。
-
Width 属性等于 0。
-
Opacity 属性等于 0。
-
Canvas 的某个上级对象不可见。
- Background等于null
- Visiblity属性等于Collapsed
下面是一个的示例是一个绘制奥运五环旗的效果
xaml主要代码：
<Grid x:Name= " ContentPanel " Grid.Row= " 1 " Margin= " 12,0,12,0 ">
<Canvas>
<Canvas.Resources>
<Style x:Key= " ellipseStyle " TargetType= " Ellipse ">
<Setter Property= " Width " Value= " 100 "></Setter>
<Setter Property= " Height " Value= " 100 "></Setter>
<Setter Property= " Stroke " Value= " {StaticResource PhoneAccentBrush} "></Setter>
<Setter Property= " StrokeThickness " Value= " 9 "></Setter>
</Style>
</Canvas.Resources>
<Ellipse Style= " {StaticResource ellipseStyle } " Stroke= " Blue " Canvas.Left= " 50 " Canvas.Top= " 0 "></Ellipse>
<Ellipse Style= " {StaticResource ellipseStyle } " Stroke= " Yellow " Canvas.Left= " 150 " Canvas.Top= " 0 "></Ellipse>
<Ellipse Style= " {StaticResource ellipseStyle } " Stroke= " Black " Canvas.Left= " 250 " Canvas.Top= " 0 "></Ellipse>
<Ellipse Style= " {StaticResource ellipseStyle } " Stroke= " Green " Canvas.Left= " 100 " Canvas.Top= " 50 "></Ellipse>
<Ellipse Style= " {StaticResource ellipseStyle } " Stroke= " Red " Canvas.Left= " 200 " Canvas.Top= " 50 "></Ellipse>
</Canvas>
</Grid>
从上面代码中可以看到我们定义了一个Style对象，定义在Canvas.Resources集合中，为每一个Elliips定义了宽和高，并且宽和高相同，所以就是圆了，并且定义了颜色和粗细为9，显然我们在用到这个这个Style对象后，有使用了Stroke属性，所以Style对象中的Stroke属性设置的也就没有用了；我们看以看到在Ellipse中的属性Canvas.Left和Canvas.Top，Lefe表示该子元素左侧位置Canvas的距离，Top表示子元素顶部位置Canvas的距离
显示的效果：
如果背景色是黑的，五环中的黑色圈就像是不出来，所以背景设置成了浅色。其实有个蹊跷的地方，就是在Ellipse 中使用Canvas.Left和Canvas.right,这就是附加属性，Left和Top实际上是定义在Canvas类中的，但是这些属性可以在其元素进行设置（如果设置在非子元素，该设置将被忽略），其实之前我们已经用到了，比如Grid.Row
下面的示例是演示代码怎么设置附加属性
xaml文件代码如下：
<Grid x:Name= " ContentPanel " Grid.Row= " 1 " Margin= " 12,0,12,0 ">
<Canvas Name= " cav " SizeChanged= " cav_SizeChanged ">
</Canvas>
</Grid>
显然这里canvas并没有占有实际的空间，因为我们并没有看到最上面那些属性，并且grid也是显示的，但是它仍然有具体的大小和SizeChange事件，当SizeChange事件触发是，首先要情况所有的子元素，然后再通过循环创建新的Ellipse对象，并添加到Canvas中去
public MainPage()
{
InitializeComponent();
}
private void cav_SizeChanged( object sender, SizeChangedEventArgs e)
{
cav.Children.Clear();
for ( double y = 0; y < e.NewSize.Height; y++)
{
for ( int x = 0; x < e.NewSize.Width; x++)
{
Ellipse el = new Ellipse();
el.Width = 100;
el.Height = 100;
// 代码读取自定义样式
el.Stroke = this.Resources[ " PhoneAccentBrush "] as Brush;
el.StrokeThickness = 9;
Canvas.SetLeft(el, x);
Canvas.SetTop(el, y);
cav.Children.Add(el);
}
}
}
设置附加属性Left和Top
Canvas.SetTop(el, y);
这两个方法是在Canvas中定义的静态方法，可以在未添加子元素和添加子元素后使用这些方法，或者在Canvas对象不存在的时候调用；也可以把静态方法换成
el.SetValue(Canvas.TopProperty,y);
SetValue方法是访问一个有DependencyObject创建和维护的内部字典表，第一个参数是key，第二个是value
