使用纯色绘制区域
在任何平台上,最常见的一个操作就是使用纯色绘制区域,
Silverlight图形 画笔
。 为了实现此任务 ,Silverlight 提供了 SolidColorBrush 类。 以下各节介绍使用 SolidColorBrush 进行绘制的不同方式。若要在 XAML 中用纯色绘制区域,请使用以下选项之一:
按名称选择一个预定义的 SolidColorBrush。 例如,可以将 Rectangle 的 Fill 设置为"Red"或"MediumBlue"。 该示例使用预定义 SolidColorBrush 的名 称来设置 Rectangle 的 Fill。
XAML
通过指定红色、绿色和蓝色的分量以组合成单一纯色,从 32 位调色板中选 择一种颜色。 从 32 位调色板中指定一种颜色时使用的格式为 #rrggbb,其中 rr 是指定红色相对量的两位十六进制数,gg 指定绿色相对量,bb 指定蓝色相 对量。 此外,还可以按 #aarrggbb 格式指定颜色,其中 aa 指定颜色的 alpha 值或透明度。 通过此方法可以创建部分透明的颜色。 在下面的示例中,使用十 六进制表示法将 Rectangle 的 Fill 设置为完全不透明的红色。
XAML
使用属性元素语法描述 SolidColorBrush。 此语法更为详细,可用于指定其 他设置,如画笔的不透明度。 在下面的示例中,两个 Rectangle 元素的 Fill 属性设置为完全不透明的红色。 第一支画笔的颜色使用预定义的颜色名称进行 描述。 第二支画笔的颜色使用十六进制表示法进行描述。
XAML
使用渐变绘制区域
渐变画笔使用沿一条轴彼此混合的多种颜色绘制区域。 可以使用它们来形成 光和影的效果,使 UI 元素具有三维外观。 还可以使用它们来模拟玻璃、镶边 、水和其他光滑表面。 Silverlight 提供两种类型的渐变画笔: LinearGradientBrush 和 RadialGradientBrush。
线性渐变
LinearGradientBrush 使用沿一条直线(即"渐变轴")定义的渐变来绘制区 域。 可以使用 GradientStop 对象指定渐变的颜色及其在渐变轴上的位置。 还 可以修改渐变轴,这样能够创建水平和垂直渐变并反转渐变方向。 渐变轴将在 下一节中介绍。 默认情况下创建对角线渐变。
下面的示例创建了一个具有四种颜色的线性渐变,并且使用该渐变绘制 Rectangle。
XAML
下图演示了结果渐变。
对角方向的线性渐变
GradientStop 是渐变画笔的基本构造块。 渐变停止点指定渐变轴上 Offset 处的 Color:
渐变停止点的 Color 属性指定渐变停止点的颜色。 可以使用预定义的颜色 来设置颜色,也可以通过指定 ScRGB 或十六进制 ARGB 值来设置颜色。
渐变停止点的 Offset 属性指定渐变停止点的颜色在渐变轴上的位置。 偏移 量是一个范围从 0 至 1 的 Double 值。渐变停止点的偏移量值越接近 0,颜色 越接近渐变起点。 渐变偏移量值越接近 1,颜色越接近渐变终点。
渐变停止点之间每个点的颜色按两个边界渐变停止点指定的颜色组合执行线 性内插。 下图突出显示了上一示例中的渐变停止点。 圆圈标记渐变停止点的位 置,虚线显示渐变轴。
线性渐变中的渐变停止点
第一个渐变停止点指定偏移量 0.0 处的颜色为黄色。 第二个渐变停止点指 定偏移量 0.25 处的颜色为红色。沿渐变轴从左到右移动,这两个停止点之间的 点逐渐从黄色变为红色。 第三个渐变停止点指定偏移量 0.75 处的颜色为蓝色 。第二个和第三个渐变停止点之间的点逐渐从红色变为蓝色。 第四个渐变停止 点指定偏移量 1.0 处的颜色为浅绿色。第三个和第四个渐变停止点之间的点逐 渐从蓝色变为浅绿色。
渐变轴
如前所述,线性渐变画笔的渐变停止点位于一条直线上,即渐变轴上。 可以 使用画笔的 StartPoint 和 EndPoint 属性更改直线的方向和大小。 通过操作 画笔的 StartPoint 和 EndPoint,可以创建水平和垂直渐变、反转渐变方向以 及压缩渐变的范围等。
默认情况下,线性渐变画笔的 StartPoint 和 EndPoint 与绘制区域相关。 点 (0,0) 表示绘制区域的左上角,(1,1) 表示绘制区域的右下角。 LinearGradientBrush 的默认 StartPoint 为 (0,0),其默认 EndPoint 为 (1,1),这就创建了一个从绘制区域的左上角开始延伸到右下角的对角线渐变。 下图显示了带有默认 StartPoint 和 EndPoint 的线性渐变画笔的渐变轴。
对角线方向线性渐变的渐变轴
下面的示例演示如何通过指定画笔的 StartPoint 和 EndPoint 来创建水平 渐变。 请注意,渐变停止点与前面的示例相同;只是更改了 StartPoint 和 EndPoint,就将对角线渐变更改为水平渐变。
XAML
下图演示了结果渐变,
电脑资料
《Silverlight图形 画笔》(https://www.unjs.com)。 渐变轴用虚线标记,而渐变停止点用圆圈标记。水平方向线性渐变的渐变轴
下一个示例演示如何创建垂直渐变。
XAML
下图演示了结果渐变。 渐变轴用虚线标记,而渐变停止点用圆圈标记。
垂直渐变的渐变轴
径向渐变
与 LinearGradientBrush 类似,RadialGradientBrush 用沿一条轴混合在一 起的颜色绘制区域。 前面的示例演示线性渐变画笔的轴是一条直线。 径向渐变 画笔的轴由一个圆圈定义;其颜色从圆圈的原点向外辐射。
在下面的示例中,用径向渐变画笔绘制矩形内部。
XAML
绘制图像
ImageBrush 类支持您将图像用作填充、背景和轮廓。 ImageBrush 使用由 ImageSource 属性指定的 JPEG 或 PNG 图像来绘制区域。 使用要加载的图像的 路径来设置 ImageSource 属性。
默认情况下,ImageBrush 会将其图像拉伸以完全充满要绘制的区域,如果绘 制的区域和该图像的长宽比不同,则可能会扭曲该图像。 您可以通过将 Stretch 属性从默认值 Fill 更改为 None、Uniform. 或 UniformToFill 来更改 此行为。
以下示例使用 ImageBrush 绘制 Canvas 的 Background。
XAML
绘制视频
VideoBrush 类支持您使用视频绘制某个区域。 以下示例使用 VideoBrush 绘制 TextBlock 的 Foreground。
XAML
Source="Butterfly.wmv" IsMuted="True"
pacity="0.0" IsHitTestVisible="False" />
FontWeight="Bold" TextWrapping="Wrap"
Text="Video">
有关使用 VideoBrush 的更多信息,请参见 VideoBrush 概述。