Silverlight学习笔记--绘制与着色（上）_app

概述最近通过看WebCase的录像来学习Silverlight，为了避免学了后面忘了前面，把录像中的重点整理成笔记记录下来。通过录像来学习Silverlight，我推荐看苏鹏讲的Silverlight探秘系列课程，这个系列课程已经讲到50多讲了。由浅入深，而且连绵不断，确实很有帮助。这篇博客是对苏鹏讲解的“Silverlight探秘系列课程(3)：绘制与着色”的笔记，网上有很多地方都有这个课

最近通过看WebCase的录像来学习Silverlight，为了避免学了后面忘了前面，把录像中的重点整理成笔记记录下来。

通过录像来学习Silverlight，我推荐看苏鹏讲的Silverlight探秘系列课程，这个系列课程已经讲到50多讲了。由浅入深，而且连绵不断，确实很有帮助。

这篇博客是对苏鹏讲解的“Silverlight探秘系列课程(3)：绘制与着色”的笔记，网上有很多地方都有这个课程下载，我就不给链接地址了。不过推荐使用 iReaper 来下载讲座视频。

椭圆

<Ellipse    Height="200" WIDth="200"    stroke="Black" strokeThickness="10" Fill="SlateBlue"  />

stroke 属性来指定用于绘制椭圆轮廓的 Brush。 strokeThickness 属性指定椭圆轮廓的粗细。 Fill 属性来指定用于绘制椭圆内部区域的 Brush。

相对于父控件的定位可以有下面2种：

情况1：

<UserControl	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"	x:Class="SilverlightStudy.MainPage"	WIDth="640" Height="480"><Ellipse       Height="200" WIDth="250"      stroke="Black" strokeThickness="10" Fill="SlateBlue" 	  HorizontalAlignment="@R_403_6823@" VerticalAlignment="top" margin="10,12,0" />    UserControl>

情况2：

<UserControl	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"	x:Class="SilverlightStudy.MainPage"	WIDth="640" Height="480"><Canvas xmlns="http://schemas.microsoft.com/clIEnt/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">	<Ellipse       Height="200" WIDth="250"      stroke="Black" strokeThickness="10" Fill="SlateBlue" 	  Canvas.@R_403_6823@="50" Canvas.top="30" />    Canvas>    UserControl>

图像的遮挡
如果没有指定ZIndex，则后画的遮挡了先画的；如果指定了ZIndex :则给定 element 的 value 越大，element 在前景中出现的可能性就越大。同样，如果 element 具有一个相对较低的 value，则 element 将可能出现在背景中。例如，具有 value 为 5 的 element 将出现在具有 value 为 4 的 element 的上方，后者又将出现在具有值为 3 的 element 的上方，依此类推。允许负值，并且这些负值也适用此优先级模式。如下图，

<UserControl	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"	x:Class="SilverlightStudy.MainPage"	WIDth="640" Height="480"><Canvas >	<Ellipse      Canvas.ZIndex="3"      Canvas.@R_403_6823@="5" Canvas.top="5"      Height="200" WIDth="200"      stroke="Black" strokeThickness="10" Fill="Silver" />  <Ellipse      Canvas.ZIndex="2"      Canvas.@R_403_6823@="50" Canvas.top="50"      Height="200" WIDth="200"      stroke="Black" strokeThickness="10" Fill="DeepSkyBlue" />  <Ellipse      Canvas.ZIndex="-1"      Canvas.@R_403_6823@="95" Canvas.top="95"      Height="200" WIDth="200"      stroke="Black" strokeThickness="10" Fill="lime" />    Canvas>    UserControl>

效果图如下：

线条

<line X1="280" Y1="10" X2="10" Y2="280" stroke="Black" strokeThickness="5"/>

使用 line 元素的 X1 和 Y1 属性设置线条起点，并使用 line 元素的 X2 和 Y2 属性来设置线条终点。最后，设置 line 元素的 stroke 和 strokeThickness，因为没有笔画的线条是看不见的。为线条设置 Fill 元素将毫无意义，因为线条没有内部区域。

矩形

 <Rectangle    WIDth="200"    Height="100"    Fill="Blue"    stroke="Black" strokeThickness="4"    RadiusX="20" RadiusY="20"/>

若要绘制矩形圆角，请指定可选的 RadiusX 和 RadiusY 属性。RadiusX 和 RadiusY 属性设置用于使矩形的角变圆的椭圆的 x 轴和 y 轴半径。这两个的默认值为0，即，没有圆角。

封闭多边形

<polygon Points="10,10 10,110 110,85 45,10"      stroke="Black" strokeThickness="10" Fill="lightBlue"/>

注意，在可扩展应用程序标记语言 (XAML) 中，我们使用由逗号分隔的 x 和 y 坐标对组成的空格分隔列表来设置 Points 属性。即使用简单表示法， x1,y1 x2,y2 ... xn,yn。

未封闭多边形

我们还是使用上面的点，注意，这时候 Fill 意义不大，我们就没设置，这个值也是可设置的

<polyline Points="10,10"      stroke="Black" strokeThickness="10" />

效果如下：

增加 Fill="lightBlue" 带来的效果如下：

路径

<UserControl	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"	x:Class="SilverlightStudy.MainPage"	WIDth="640" Height="480"><Canvas>	<Path Data="M0,0 L11.5,0 11.5,30 5.75,40 0,30z"      stroke="Black" Fill="SlateBlue" Canvas.@R_403_6823@="118" Canvas.top="57" 	  UseLayoutRounding="False" />	  	<Path Data="M 10,100 C 10,300 300,-200 250,100z"      stroke="Red" Fill="Orange" Canvas.@R_403_6823@="54" Canvas.top="167" 	  UseLayoutRounding="False" />        <Path Data="M 0,200 L100,200 50,50z"      stroke="Black" Fill="Gray" Canvas.@R_403_6823@="397" Canvas.top="66" 	  UseLayoutRounding="False" />    Canvas>    UserControl>