一步一步学Silverlight 2系列（27）：使用Brush进行填充

概述

Silverlight 2 Beta 1版本发布了，无论从Runtime还是Tools都给我们带来了很多的惊喜，如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython，对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章将从Silverlight 2基础知识、数据与通信、自定义控件、动画、图形图像等几个方面带您快速进入Silverlight 2开发。

本文将简单介绍 Silverlight中的画刷，在Silverlight中，共提供了五种：SolidColorBrush、 LinearGradientBrush、RadialGradientBrush、ImageBrush、VideoBrush，接下来将逐一进行介 绍。

SolidColorBrush

SolidColorBrush用单一的颜色进行填充， 在使用SolidColorBrush时只要指定Color属性就可以了，除此之外，还可以选择指定Opacity等属性。在我们使用其他图形时，如果指 定了Fill属性，则默认会用SolidColorBrush进行填充。下面的示例，使用SolidColorBrush填充两个矩形：

<CanvasBackground="#CDFCAE">
p+o3S(j
PBm+`S0<RectangleCanvas.Top="60"Canvas.Left="20"

E%Q\.D.h@"OCF?0Width="200"Height="100"Stroke="Green"ITPUB个人空间X
D_q
L}5j#I![
StrokeThickness="2">ITPUB个人空间
\!Kq/_#J*GRD4v
<Rectangle.Fill>ITPUB个人空间,{q
IE*sV^|EP
<SolidColorBrushColor="Orange">
/{2\DA:d4Nt0</SolidColorBrush>
,~#qgf|!b0</Rectangle.Fill>ITPUB个人空间
PNR!o6]CgJ6M
</Rectangle>ITPUB个人空间
[U:d/t8jD K+B;k

|	S$x;]4Ej6f/T0<RectangleCanvas.Top="60"Canvas.Left="280"
!Jn'd*`*k+|0Width="200"Height="100"Stroke="Green"
	[ OfAZ*W0StrokeThickness="2">ITPUB个人空间0dYVZ
by*@Q
<Rectangle.Fill>
1P8T*DT3e6}Y7[4W0<SolidColorBrushColor="Orange"ITPUB个人空间
h`(ctn:LC0B1z
Opacity="0.5">ITPUB个人空间h*o4dxG7@
R%t|
</SolidColorBrush>ITPUB个人空间
V}.Q#FJl2H6U3i%l/Vg
</Rectangle.Fill>
:Y]A+C} K0</Rectangle>ITPUB个人空间V
_HN3Dn!UG
</Canvas>

运行后如下所示：ITPUB个人空间\~J+a3?l1x| c
ITPUB个人空间o7b qX$O9a5F

LinearGradientBrush

LinearGradientBrush将会使用线性渐变来进行填充，需要设置渐变的坐标：起始点属性StartPoint和结束点EndPoint，两点的坐标最大值为1，最小值为0，用GradientStop来设置不同的颜色渐变以及它的偏移量。如下面的例子：

<CanvasBackground="#FFFFFF">ITPUB个人空间xDB kSa
<RectangleCanvas.Top="40"Canvas.Left="100"ITPUB个人空间~s.ce?6Q
Width="300"Height="160"Stroke="Green"
&D"_H
\-}T3f5c0StrokeThickness="4">ITPUB个人空间.M)c7TYJl
<Rectangle.Fill>
4@.b0F&e
p0<LinearGradientBrushStartPoint="0,0"EndPoint="1,0">
k p`P2PC0<GradientStopColor="#FBFE03"Offset="0.0" />ITPUB个人空间lQC}"~\)Az
<GradientStopColor="#41F702"Offset="0.25" />ITPUB个人空间'GiB-eI#A'[
<GradientStopColor="#FF0000"Offset="0.75" />ITPUB个人空间Gw$Et4Vx){?
<GradientStopColor="#0066FF"Offset="1.0" />ITPUB个人空间q)L%`)T:I`
</LinearGradientBrush>ITPUB个人空间B uf_3^h
</Rectangle.Fill>
`n"J1MUL&V}0</Rectangle>
wm,Nb]%\-eMc0</Canvas>

运行后如下图所示：

设置不同的渐变起始点和偏移量我们可以得到多种不同的渐变效果，如下面的示例：

<CanvasBackground="#FFFFFF">ITPUB个人空间!z3^O%[+gG|
<RectangleCanvas.Top="80"Canvas.Left="20"ITPUB个人空间U1Ty~t-U4Ju
Width="120"Height="80"Stroke="Green"
R
O!zf1r
`]E0StrokeThickness="4">
W
\%|K+G,|)t}7M0<Rectangle.Fill>

~
@"L0X`0<LinearGradientBrushStartPoint="0,0"EndPoint="1,0">ITPUB个人空间*s^cNSg
<GradientStopColor="#FBFE03"Offset="0.0" />ITPUB个人空间Iou5i&{t	~$K
<GradientStopColor="#41F702"Offset="0.25" />
jS4|r;\)P0<GradientStopColor="#FF0000"Offset="0.75" />
 fm*i
H$x l0<GradientStopColor="#0066FF"Offset="1.0" />

iX.F3RjPk'XI0</LinearGradientBrush>ITPUB个人空间vKG
Il"]K"P
</Rectangle.Fill>ITPUB个人空间
s&{-L3{)@j;Yu
</Rectangle>
'CG1_y6lEX0ITPUB个人空间h4A2eUP|c-L
<RectangleCanvas.Top="80"Canvas.Left="160"ITPUB个人空间5y)R,h9ytk7l{f9[(y'P
Width="120"Height="80"Stroke="Green"
OL,_#s$i
c@[0StrokeThickness="4">ITPUB个人空间V0m,D,j	|f
<Rectangle.Fill>ITPUB个人空间%Us.z(Q+c:l&f_$l
<LinearGradientBrushStartPoint="0,0"EndPoint="0,1">ITPUB个人空间P*b
Dc5Qt`2P$?r
<GradientStopColor="#FBFE03"Offset="0.0" />ITPUB个人空间C?Ich
_)f:G1uqy
<GradientStopColor="#41F702"Offset="0.25" />ITPUB个人空间,^@a+yk	u3u
p
<GradientStopColor="#FF0000"Offset="0.75" />ITPUB个人空间LDTF.XYnr~
<GradientStopColor="#0066FF"Offset="1.0" />
/?'k*_"?m\
]
cp0</LinearGradientBrush>
e
S#|x;|,v8F0</Rectangle.Fill>ITPUB个人空间"`K8nN0y2Ih
</Rectangle>ITPUB个人空间@s
T;[!g?
ITPUB个人空间[%}-IA}Zz*cK
<RectangleCanvas.Top="80"Canvas.Left="300"
g.Cp4s*btDD0Width="120"Height="80"Stroke="Green"ITPUB个人空间3ZS
{&zhF
StrokeThickness="4">

e:ec(N"{!Y5d!b'C0<Rectangle.Fill>ITPUB个人空间Qi/`!AiH5g|
<LinearGradientBrushStartPoint="0,0"EndPoint="1,1">ITPUB个人空间J6L2H+Im
<GradientStopColor="#FBFE03"Offset="0.0" />
6I
Xk3b4R%h@:Y(i0i0|0<GradientStopColor="#41F702"Offset="0.25" />ITPUB个人空间},g]#Orj
<GradientStopColor="#FF0000"Offset="0.75" />ITPUB个人空间#go[	O
i6oJx%I
<GradientStopColor="#0066FF"Offset="1.0" />ITPUB个人空间`+H2c8a'k
</LinearGradientBrush>
X"`6O@!^Wd0</Rectangle.Fill>
Ak"kly0</Rectangle>
&T;dbodp)F0</Canvas>

运行后如下图所示：
Ml4uF1Q0ITPUB个人空间-{;^7yJ9gc

RadialGradientBrush

RadialGradientBrush使用放射性渐变来进行颜色填充，用GradientOrigin来指定放射源的位置坐标，Center指定 图形的中心位置坐标，RadiusX和RadiusY分别指定在X轴和Y轴上的放射半径，同样使用GradientStop指定不同颜色的渐变及偏移量， 如下面的例子：

<CanvasBackground="#CDFCAE">
z(PkC&z&kB+]
c0<EllipseCanvas.Top="30"Canvas.Left="100"
-}%tf6veH0Width="300"Height="180">
&W'k+ce7`e2t0<Ellipse.Fill>ITPUB个人空间}9|'P
|c*u$P.}pJ
<RadialGradientBrushGradientOrigin="0.5,0.5"Center="0.5,0.5"ITPUB个人空间	[Y:rF^Icg6`3UH
RadiusX="0.5"RadiusY="0.5">
	ES1[@z)En0<GradientStopColor="#FBFE03"Offset="0.0" />

IwH$Ko#o/Ek?*n0<GradientStopColor="#41F702"Offset="0.25" />ITPUB个人空间't2e^9\/_s[0Aw
<GradientStopColor="#FF0000"Offset="0.75" />ITPUB个人空间vX,[6U9H,s
<GradientStopColor="#0066FF"Offset="1.0" />
:KYI
jUI7o-B3K%C0</RadialGradientBrush>ITPUB个人空间6F/S	`|hM1b
</Ellipse.Fill>ITPUB个人空间+cRQI(die
</Ellipse>ITPUB个人空间
A6x7s;NU4X*O-v
</Canvas>

运行后如下所示：
gUk Us0
rv/Z?bHO0

在这个示例中，对于上面提到的放射源位置的坐标和图形中心坐标、在X轴和Y轴上的放射半径它们四个之间的关系，大家看下面四个圆形，我们为四个属性设置不同的值：

<CanvasBackground="#CDFCAE">
C9pM0a:X/^s_)U0<EllipseCanvas.Top="20"Canvas.Left="80"
!xY:Vy1X.llgr,M+~0Width="120"Height="120">ITPUB个人空间
_ev?#q*r
<Ellipse.Fill>ITPUB个人空间_)Ew:FQCY;V%d*v
<RadialGradientBrushGradientOrigin="0.5,0.5"Center="0.5,0.5"ITPUB个人空间'Y2QkUN(F'q4U
RadiusX="0.5"RadiusY="0.5">
{ tI	}
~X6YTR
h0<GradientStopColor="#FFFFFF"Offset="0.0" />ITPUB个人空间&Jh(k/}5~
L/}
<GradientStopColor="#000000"Offset="1.0" />
Q9O,S~-HQ
L;Q0</RadialGradientBrush>ITPUB个人空间f\jq)_4|Bv
</Ellipse.Fill>ITPUB个人空间9{,S|{*Rg\"^"?
</Ellipse>
	u+OK&c%K"\"o0
eKn
[#E0xu~3f0<EllipseCanvas.Top="20"Canvas.Left="280"ITPUB个人空间9?
WWU#lb9e_6SX
Width="120"Height="120">ITPUB个人空间N[Xio(U:Ad
D
<Ellipse.Fill>
YD"`\x5dm'RW+Q:x0<RadialGradientBrushGradientOrigin="0.75,0.25"Center="0.5,0.5"
t2j_%k}Y0RadiusX="0.5"RadiusY="0.5">
%j6Z0z/w5{h,M/_A4l0<GradientStopColor="#FFFFFF"Offset="0.0" />ITPUB个人空间V3|A3t](d
<GradientStopColor="#000000"Offset="1.0" />ITPUB个人空间A_#i(Dj$X
</RadialGradientBrush>ITPUB个人空间WY'QC:t0RP
</Ellipse.Fill>
'c9Mm.Qd}+tD0</Ellipse>
h&cWil6WtZ0
%H%OM4b.t0<EllipseCanvas.Top="160"Canvas.Left="80"ITPUB个人空间K|,u&Xc-b
Width="120"Height="120">ITPUB个人空间g zKVD-Ai
<Ellipse.Fill>ITPUB个人空间LE5j	[9ej(YJK
<RadialGradientBrushGradientOrigin="0.5,0.5"Center="0.5,0.5"

z
^
v5TQ
x*Kj0RadiusX="0.25"RadiusY="0.5">
A)f-cCRj\P5GS0<GradientStopColor="#FFFFFF"Offset="0.0" />ITPUB个人空间[Wq[h_
<GradientStopColor="#000000"Offset="1.0" />
n4\-p5ZH}+?0</RadialGradientBrush>
xO%]?I
W~j0</Ellipse.Fill>ITPUB个人空间U;NU.[Qc3S^,Sr
</Ellipse>ITPUB个人空间Sa9u9G:Oh
ITPUB个人空间i2r.E0y.b5JI
<EllipseCanvas.Top="160"Canvas.Left="280"
hL8u6~X
~V0iF5?
^0Width="120"Height="120">ITPUB个人空间%Q1|rRs
PG~
<Ellipse.Fill>ITPUB个人空间
m@0CyR$Gg2F
<RadialGradientBrushGradientOrigin="0.5,0.5"Center="0.5,0.5"ITPUB个人空间ID
cd
L6l!D
RadiusX="0.5"RadiusY="0.25">ITPUB个人空间F
wbv(uA
<GradientStopColor="#FFFFFF"Offset="0.0" />ITPUB个人空间,H`k?0f	UR
<GradientStopColor="#000000"Offset="1.0" />
%f3u-H6|1yv
OS0</RadialGradientBrush>ITPUB个人空间y6i$T5O1\
</Ellipse.Fill>ITPUB个人空间$ic
Z-}A%@3s]G
</Ellipse>ITPUB个人空间
{.l%pgMG	[:Gs
</Canvas>

运行后的效果如下所示，在图上标注了他们各自的放射源位置坐标、中心位置坐标、X轴上和Y轴上的放射半径。ITPUB个人空间A])o:Iv*{i^ak

a^Y'Ag0

ImageBrush

ImageBrush使用图片来对图形进行填充，使用方式比较简单，我们只需要指定ImageSource属性就可以了，如下面的例子使用图片来填充一个矩形：

<CanvasBackground="#CDFCAE">
;XWH.j\i0<RectangleCanvas.Top="40"Canvas.Left="100"ITPUB个人空间1Y.t"S6oy-o,ey`I,L
Width="300"Height="160"Stroke="Green"
@3NF.^1S?|5f0StrokeThickness="4"RadiusX="10"RadiusY="10">ITPUB个人空间C J%uNf@
<Rectangle.Fill>
8X	{]+K&c
c%q0<ImageBrushImageSource="bg1.png"></ImageBrush>
.Nb4jIb0</Rectangle.Fill>ITPUB个人空间E3b+i4y_v.]2W
</Rectangle>
3?l?6{^&jma![o^,Y?0</Canvas>

运行后效果如下所示：

对于图片我们后面会有专门一篇文章进行讲解，这里就不再说明。

结束语

本文简单介绍了Silverlight中的Brushes，这些Brushes对于自定义控件的外观或者做出更酷更炫的界面效果，将会有很大的帮助。

3