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

最近通过看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="Left" VerticalAlignment="Top" Margin="10,12,0,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.Left="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.Left="5" Canvas.Top="5"
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="Silver" />

  <Ellipse
      Canvas.ZIndex="2"
      Canvas.Left="50" Canvas.Top="50"
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="DeepSkyBlue" />

  <Ellipse
      Canvas.ZIndex="-1"
      Canvas.Left="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,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 10,110 110,110 110,85 45,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.Left="118" Canvas.Top="57" 
	  UseLayoutRounding="False" />
	  
	<Path Data="M 10,100 C 10,300 300,-200 250,100z"
      Stroke="Red" Fill="Orange" Canvas.Left="54" Canvas.Top="167" 
	  UseLayoutRounding="False" />

        <Path Data="M 0,200 L100,200 50,50z"
      Stroke="Black" Fill="Gray" Canvas.Left="397" Canvas.Top="66" 
	  UseLayoutRounding="False" />

  Canvas>

   UserControl>

上面 Path 元素的 Data 属性描述的是路径，这里的路径描述使用几何迷你语言命令，这个语言命令规范如下图：

参考资料：

WPF 中的形状和基本绘图概述
http://msdn.microsoft.com/zh-cn/library/ms747393.aspx