Canvas 元素表示定制一个区域,并可以通过相对坐标定义子元素位置,在一下情况下Canvas是不可见的

 

  • Height 属性等于 0。

  • Width 属性等于 0。

  • Opacity 属性等于 0。

  • Canvas 的某个上级对象不可见。

  • Background等于null
  • Visiblity属性等于Collapsed

 下面是一个的示例是一个绘制奥运五环旗的效果

xaml主要代码:

  1. <!--ContentPanel - 在此处放置其他内容--> 
  2.        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
  3.            <Canvas> 
  4.                <Canvas.Resources> 
  5.                    <Style x:Key="ellipseStyle" TargetType="Ellipse"> 
  6.                        <Setter Property="Width" Value="100"></Setter> 
  7.                        <Setter Property="Height" Value="100"></Setter> 
  8.                        <Setter Property="Stroke" Value="{StaticResource PhoneAccentBrush}"></Setter> 
  9.                        <Setter Property="StrokeThickness" Value="9"></Setter> 
  10.                    </Style> 
  11.                </Canvas.Resources> 
  12.                <Ellipse Style="{StaticResource ellipseStyle }" Stroke="Blue" Canvas.Left="50" Canvas.Top="0"></Ellipse> 
  13.                <Ellipse Style="{StaticResource ellipseStyle }" Stroke="Yellow" Canvas.Left="150" Canvas.Top="0"></Ellipse> 
  14.                <Ellipse Style="{StaticResource ellipseStyle }" Stroke="Black" Canvas.Left="250" Canvas.Top="0"></Ellipse> 
  15.                <Ellipse Style="{StaticResource ellipseStyle }" Stroke="Green" Canvas.Left="100" Canvas.Top="50"></Ellipse> 
  16.                <Ellipse Style="{StaticResource ellipseStyle }" Stroke="Red" Canvas.Left="200" Canvas.Top="50"></Ellipse> 
  17.            </Canvas> 
  18.        </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文件代码如下:

  1. <!--ContentPanel - 在此处放置其他内容--> 
  2.         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
  3.             <Canvas Name="cav" SizeChanged="cav_SizeChanged"> 
  4.             </Canvas> 
  5.         </Grid> 

显然这里canvas并没有占有实际的空间,因为我们并没有看到最上面那些属性,并且grid也是显示的,但是它仍然有具体的大小和SizeChange 事件,当SizeChange事件触发是,首先要情况所有的子元素,然后再通过循环创建新的Ellipse对象,并添加到Canvas中去

  1. // 构造函数 
  2.         public MainPage() 
  3.         { 
  4.             InitializeComponent(); 
  5.         } 
  6.  
  7.         private void cav_SizeChanged(object sender, SizeChangedEventArgs e) 
  8.         { 
  9.             cav.Children.Clear(); 
  10.             for (double y = 0; y < e.NewSize.Height; y++) 
  11.             { 
  12.                 for (int x = 0; x < e.NewSize.Width; x++) 
  13.                 { 
  14.                     Ellipse el = new Ellipse(); 
  15.                     el.Width = 100
  16.                     el.Height = 100
  17.                     //代码读取自定义样式 
  18.                     el.Stroke = this.Resources["PhoneAccentBrush"] as Brush; 
  19.                     el.StrokeThickness = 9
  20.                     Canvas.SetLeft(el, x); 
  21.                     Canvas.SetTop(el, y); 
  22.  
  23.                     cav.Children.Add(el); 
  24.                 } 
  25.             } 
  26.         } 

 设置附加属性Left和Top

Canvas.SetLeft(el, x);
Canvas.SetTop(el, y);

这两个方法是在Canvas中定义的静态方法,可以在未添加子元素和添加子元素后使用这些方法,或者在Canvas对象不存在的时候调用;也可以把静态方法换成

  1. el.SetValue(Canvas.LeftProperty,x); 
  2. el.SetValue(Canvas.TopProperty,y); 

 SetValue方法是访问一个有DependencyObject创建和维护的内部字典表,第一个参数是key,第二个是value