Silverlight QuickStart：绘图和喷涂

basic shapes

Silverlight 提供三个基本的形状元素：Ellipse、Rectangle 和 Line。

一个 Ellipse 元素描绘了一个椭圆或圆。你通过设置它的 Width 属性来控制它的水平直径，而它的垂直直径由它的 Height 属性控制。
一个 Rectangle 元素描绘了一个正方形或长方形形状，圆抹角可选。你通过设置它的 Width 属性来控制它的水平尺寸，而它的垂直尺寸由它的 Height 属性控制。你也可以使用 RadiusX 和 RadiusY 属性来控制它边角的弯曲。
代替 Width 和 Height 使用，你通过设置它的 X1、Y1、X2 和 Y2 属性来控制 Line 的大小和位置。

下面的示例在一个 Canvas 中画了一个 Ellipse、一个 Rectangle 和一个 Line 。

[隐藏 XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30"
      Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/>
  <Rectangle Height="100" Width="100" Canvas.Left="5" Canvas.Top="5"
      Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/>
  <Line X1="280" Y1="10" X2="10" Y2="280"
      Stroke="black" StrokeThickness="5"/>
</Canvas>

[隐藏] [重新开始]

其它形状元素

为了扩展 Ellipse、Line 和 Rectangle 元素， Silverlight 提供了其它三个形状元素： Polygon、 Polyline 和 Path。一个 Polygon 是一个有任意边的闭合形状，而一个 Polyline 是一系列连接的可闭合也可不闭合的直线。下面的示例创建了一个 Polygon 和一个 Polyline。

[隐藏 XAML]

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Polyline Points="150, 150 150, 250 250, 250 250, 150"
      Stroke="Black" StrokeThickness="10"/>
  <Polygon Points="10,10 10,110 110,110 110,10"
      Stroke="Black" StrokeThickness="10" Fill="LightBlue"/>
</Canvas>

[隐藏] [重新开始]

Path 元素可以被用来展现复杂的形状，包括曲线和弧。要使用一个 Path 元素，你使用一个特别的属性语法类型来设置它的 Data 属性。下面的元素创建了三个 Path 元素。

[隐藏 XAML]

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Path Data="M0,0 L11.5,0 11.5,30 5.75,40 0,30z"
      Stroke="Black" Fill="SlateBlue"
      Canvas.Left="10" Canvas.Top="10" />

  <Path Data="M 10,100 C 10,300 300,-200 250,100z"
      Stroke="Red" Fill="Orange"
      Canvas.Left="10" Canvas.Top="10" />
      
  <Path Data="M 0,200 L100,200 50,50z"
      Stroke="Black" Fill="Gray"
      Canvas.Left="150" Canvas.Top="70" />

  
</Canvas>

[隐藏] [重新开始]

要获取 path 标记语法的更多信息，请参见 Silverlight SDK 中的 Path Markup Syntax。

用笔刷喷涂形状

许多形状由两部分组成，描边（大纲）和填充，它们由 Stroke 和 Fill 属性控制。下面的插图标记了第一个例子中的 Rectangle 描边和填充。

不是每一个形状都有填充和描边：一个 Line 没有描边。为一条线设置 Fill 属性值不会有效果。

你通过 Brush 设置形状的 Stroke 和 Fill。有五款笔刷对象供你使用：

SolidColorBrush
LinearGradientBrush
RadialGradientBrush
ImageBrush
VideoBrush（在 media 主题中有描述）

使用 SolidColorBrush 喷涂纯色

要使用纯色喷涂一个区域，使用 SolidColorBrush。 XAML 提供几种方法创建 SolidColorBrush。

你可以使用属性语法来标识颜色的名称，比如 "Black" 或 "Gray"。
你可以使用 16 进制记法的属性语法来描绘颜色的红色、绿色和蓝色的值，透明度可选。这里有几种格式可供你使用。
- 6 位标记。格式是 #rrggbb，rr 是两位的 16 进制值表示颜色中红色的数量， gg 描述绿色的数量，bb 描述蓝色的数量。比如，#0033FF。
- 8 位标记。格式和 6 位标记一样，不同的是扩展的两位用来表示颜色的 alpha 值或不透明度： #aarrggbb。比如，#990033FF。
- 同样也有 3 位和 4 位的标记 8 位颜色，但他们都不常用。
你可以使用对象元素语法来显式地创建一个 SolidColorBrush 和设置它的 Color 属性，使用一种字符串格式描绘属性语法。

下面的示例展示了几种喷涂对象为黑色的方法。

[隐藏 XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
  <Ellipse Height="90" Width="90" Canvas.Left="10" Canvas.Top="10"
      Fill="black"/> <!-- SolidColorBrush by color name. -->
      
  <Ellipse Height="90" Width="90" Canvas.Left="110" Canvas.Top="10"
      Fill="#000000"/> <!-- SolidColorBrush by 6-digit hexadecimal notation. -->
      
  <Ellipse Height="90" Width="90" Canvas.Left="10" Canvas.Top="110"
      Fill="#ff000000"/> <!-- SolidColorBrush by 8-digit hexadecimal notation. -->
      
  <Ellipse Height="90" Width="90" Canvas.Left="110" Canvas.Top="110">
    <Ellipse.Fill>
    
      <!-- SolidColorBrush by object element syntax. -->
      <SolidColorBrush Color="Black"/>
    </Ellipse.Fill>
  </Ellipse>
</Canvas>

[隐藏] [重新开始]

用 LinearGradientBrush and RadialGradientBrush 喷涂渐变色

Silverlight 支持线性和放射性的渐变。渐变有一个或多个渐变点以描绘不同的颜色，渐变在这些颜色间变化。许多渐变只需要两个渐变点，但你可以添加任意多个你需要的渐变点。

LinearGradientBrush 沿一条直线喷涂。该线默认是从喷涂对象的左上角到右下角的对角线。你可以使用 StartPoint 和 EndPoint 属性改变线的位置。
RadialGradientBrush 洞一个圆喷涂渐变。默认情况下，圆位于喷涂区的中间。你可以通过设置它的 GradientOrigin、Center、RadiusX 和 RadiusY 属性来改变渐变。

要为一个渐变笔刷添加渐变点，你需要创建 GradientStop 对象。将 GradientStop 的 Offset 属性设置在 0-1 之间来设置它在渐变中的相对位置。将 GradientStop 的 Color 属性设置为一个颜色名称或 16 进制的值。

下面的示例使用 LinearGradientBrush 和 RadialGradientBrush 对象来喷涂四个矩形对象。

[隐藏 XAML]

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  
  <!-- Linear gradients -->
  <Rectangle Width="140" Height="70" Canvas.Left="10" Canvas.Top="10">
    <Rectangle.Fill>
      <LinearGradientBrush>
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
  
  <Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="10">
    <Rectangle.Fill>
      <LinearGradientBrush  StartPoint="0,0" EndPoint="1,0">
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
  
  <!-- Radial gradients -->
  <Rectangle Width="140" Height="70" Canvas.Left="10" Canvas.Top="110">
    <Rectangle.Fill>
      <RadialGradientBrush>
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
      </RadialGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
  
  <Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="110">
    <Rectangle.Fill>
      <RadialGradientBrush GradientOrigin="1,0">
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
      </RadialGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
</Canvas>

[隐藏] [重新开始]

你也可以使用渐变喷涂形状的 Stroke。

下面的插图标注了前一个示例中的第一个 LinearGradientBrush 的渐变点。

使用 ImageBrush 喷涂图像

另一种类型的笔刷是 ImageBrush。默认情况下，图像被拉伸以填充整个形状，但你可以使用 Stretch 属性来控制笔刷如何拉伸图像。下面的示例使用两个具有不同 Stretch 的 ImageBrush 对象来喷涂两个 Rectangle 对象。

[隐藏 XAML]

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Background="White">
  
  <Rectangle Height="180" Width="90" Canvas.Left="10" Canvas.Top="10"
      Stroke="Black" StrokeThickness="1">
    <Rectangle.Fill>
      <ImageBrush ImageSource="star.png"/>
    </Rectangle.Fill>
  </Rectangle>
  
  <Rectangle Height="180" Width="90" Canvas.Left="110" Canvas.Top="10"
      Stroke="Black" StrokeThickness="1">
    <Rectangle.Fill>
      <ImageBrush ImageSource="star.png" Stretch="Uniform"/>
    </Rectangle.Fill>
  </Rectangle>
</Canvas>

[隐藏] [重新开始]

下一步是什么？

像所有的 UI 元素一样，形状元素可以被缩放、旋转或通过设置它们的 RenderTransform 属性来进行形状变换。更多信息，请参见下一个主题，通用图像属性。