.NEt专家博客！

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

上一篇 / 下一篇 2008-04-11 21:22:47 / 个人分类：经典文章

概述

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">ITPUB个人空间&M{E.EW	p
<RectangleCanvas.Top="60"Canvas.Left="20"
`IB%|G2@%A0Width="200"Height="100"Stroke="Green"
7r%PuZ
Ls|O\0StrokeThickness="2">ITPUB个人空间p^@~'Ig7G?5[v
<Rectangle.Fill>ITPUB个人空间$H3Q1x#Ah8e0?
<SolidColorBrushColor="Orange">ITPUB个人空间#G3M/Ol/w.Q&p
</SolidColorBrush>ITPUB个人空间%ii2C:HL
Z:}
</Rectangle.Fill>ITPUB个人空间|busg
</Rectangle>
G'h$~8a
}'L-~k0
B{jd)G
F4DZ0<RectangleCanvas.Top="60"Canvas.Left="280"
'p1s&r6U"jC-@a0Width="200"Height="100"Stroke="Green"
"Jt;d4M ]
Q-j0StrokeThickness="2">ITPUB个人空间4C0?s(AIyVsl
<Rectangle.Fill>
rv{2rjv0<SolidColorBrushColor="Orange"
YQ%l4XK8tou,R0Opacity="0.5">
;dOr-oBXauv0</SolidColorBrush>ITPUB个人空间5\V'k2f#b.]
</Rectangle.Fill>
J"x
]1uU,O
i0</Rectangle>
 N;z:|4[.I0</Canvas>

运行后如下所示：ITPUB个人空间%F'_e@]#cl

-A;rt;_U,T0

LinearGradientBrush

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

<CanvasBackground="#FFFFFF">
X5Ygv1qE0<RectangleCanvas.Top="40"Canvas.Left="100"
8gK1EAU	l0Width="300"Height="160"Stroke="Green"ITPUB个人空间#R!r9O]
H;W/Z
}D"x
StrokeThickness="4">ITPUB个人空间8~L
];wFLQ3d%CuJ
<Rectangle.Fill>ITPUB个人空间U2T8yuU1US
<LinearGradientBrushStartPoint="0,0"EndPoint="1,0">
J7lPB4Z3J8y `Ul
}0<GradientStopColor="#FBFE03"Offset="0.0" />ITPUB个人空间8WT{.Ffq$m
<GradientStopColor="#41F702"Offset="0.25" />
\m/ps-CA0<GradientStopColor="#FF0000"Offset="0.75" />ITPUB个人空间3xtbn!~
sZ
<GradientStopColor="#0066FF"Offset="1.0" />
4fLR,F8d
fX0</LinearGradientBrush>ITPUB个人空间 eL)UoLg9c
</Rectangle.Fill>ITPUB个人空间zG}p7N
yRn
</Rectangle>ITPUB个人空间+T9m/P
gD `
</Canvas>

运行后如下图所示：

下面我们对渐变的坐标以及各个颜色渐变的偏移量做一下解释，如下图所示：

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

<CanvasBackground="#FFFFFF">ITPUB个人空间,rU*oh.xx/}#~;B.m
<RectangleCanvas.Top="80"Canvas.Left="20"
M!|3xR-_{(S*L(BY0Width="120"Height="80"Stroke="Green"ITPUB个人空间t?G!FK5N?
StrokeThickness="4">ITPUB个人空间Q&f)xDz#Kf
<Rectangle.Fill>ITPUB个人空间;HL{
rPAd4N'}
<LinearGradientBrushStartPoint="0,0"EndPoint="1,0">
CwoB8IE0<GradientStopColor="#FBFE03"Offset="0.0" />
T8]hJ(P!iNb+qE0<GradientStopColor="#41F702"Offset="0.25" />
8f#mWjB0<GradientStopColor="#FF0000"Offset="0.75" />ITPUB个人空间 l	OLQR S"TUp
<GradientStopColor="#0066FF"Offset="1.0" />
e4~p"p+^.WJOA0</LinearGradientBrush>ITPUB个人空间
~(G
zT3{)g	n^lx
</Rectangle.Fill>
1_W$QHO	|8o
R0</Rectangle>ITPUB个人空间.hLQ[PLJv

a,L2s#I3iR0<RectangleCanvas.Top="80"Canvas.Left="160"ITPUB个人空间'Al;x9[a{B
Width="120"Height="80"Stroke="Green"ITPUB个人空间([/iF	v0T
StrokeThickness="4">
kt7m)b_0<Rectangle.Fill>ITPUB个人空间0O-Gn1XCo0v
<LinearGradientBrushStartPoint="0,0"EndPoint="0,1">ITPUB个人空间'u%Y@YL`
<GradientStopColor="#FBFE03"Offset="0.0" />
Yl^'_d,D4_0<GradientStopColor="#41F702"Offset="0.25" />
'LVBb4GPG0<GradientStopColor="#FF0000"Offset="0.75" />
4i&x+kk_/V0<GradientStopColor="#0066FF"Offset="1.0" />
&yT
P(k%PK"E5^0</LinearGradientBrush>ITPUB个人空间5D1TeyW'W
</Rectangle.Fill>ITPUB个人空间1C]E(]%E+Iz Eb
</Rectangle>ITPUB个人空间Y^r%A'DN
ITPUB个人空间8p1](v@x}5b
<RectangleCanvas.Top="80"Canvas.Left="300"ITPUB个人空间0f4r}4Qt
Width="120"Height="80"Stroke="Green"ITPUB个人空间
i!c)M3igYN)H3EU
StrokeThickness="4">
G@l9mL/puy7le0<Rectangle.Fill>
m'p:Mf7Na0<LinearGradientBrushStartPoint="0,0"EndPoint="1,1">ITPUB个人空间hQ	E%C7Uu
<GradientStopColor="#FBFE03"Offset="0.0" />
L;J'Q(y7M0<GradientStopColor="#41F702"Offset="0.25" />ITPUB个人空间PlFo	R)]'j
<GradientStopColor="#FF0000"Offset="0.75" />
knS#CJ(E|#S0<GradientStopColor="#0066FF"Offset="1.0" />
.qA#VnNAm,_6U
n&A]t0</LinearGradientBrush>ITPUB个人空间i2?/Fh `e@8B
</Rectangle.Fill>ITPUB个人空间 K"y3X@['a
</Rectangle>ITPUB个人空间d7Pk|AS&gD8};Q)_]
</Canvas>

运行后如下图所示：ITPUB个人空间`L8f&t7dxW

-@_-q,s{:L~6cz0

RadialGradientBrush

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

<CanvasBackground="#CDFCAE">ITPUB个人空间._!{B;UOx)Yhh
<EllipseCanvas.Top="30"Canvas.Left="100"ITPUB个人空间	R$N,}"H8|
Width="300"Height="180">
9[|~9]
\'cXR0<Ellipse.Fill>
M
g.q2S
Cb6cF4S0<RadialGradientBrushGradientOrigin="0.5,0.5"Center="0.5,0.5"
2Y}_2m.FlwML0RadiusX="0.5"RadiusY="0.5">
ct$LV2{OF&E0<GradientStopColor="#FBFE03"Offset="0.0" />
@O0Z6DW+l0<GradientStopColor="#41F702"Offset="0.25" />ITPUB个人空间ZPh"ogV~;xdq%v
<GradientStopColor="#FF0000"Offset="0.75" />ITPUB个人空间:u%lp&R k	?*y
Zc
<GradientStopColor="#0066FF"Offset="1.0" />ITPUB个人空间/N5{4GH6D}
</RadialGradientBrush>ITPUB个人空间O$a	UV+KJ
</Ellipse.Fill>

LL'mujrT0</Ellipse>
.wOd1H
T(M0</Canvas>

运行后如下所示：
o;v0]&Xse'v't0ITPUB个人空间`d}-u ]3O n

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

<CanvasBackground="#CDFCAE">ITPUB个人空间/e2E['{N6RN
<EllipseCanvas.Top="20"Canvas.Left="80"ITPUB个人空间C
GY\IJ
aorz.a
Width="120"Height="120">ITPUB个人空间B:{fm
w8}
<Ellipse.Fill>ITPUB个人空间UXM:Z#xX)u
<RadialGradientBrushGradientOrigin="0.5,0.5"Center="0.5,0.5"
F H8S/E.a:[!f'G0RadiusX="0.5"RadiusY="0.5">
(p,`1T&hj'\q3FR#[0<GradientStopColor="#FFFFFF"Offset="0.0" />
;?7AV,b"S.I
u0<GradientStopColor="#000000"Offset="1.0" />
e
V9j2^et0</RadialGradientBrush>ITPUB个人空间XSNE	qF[)ya3{G
</Ellipse.Fill>
&@
L$a~8Y^n~0</Ellipse>
j(sI+Pj
LeJ+UM
MqHw0ITPUB个人空间He!m
l%mM+Aj&R
<EllipseCanvas.Top="20"Canvas.Left="280"ITPUB个人空间T"FB4] W`Rl,`
Width="120"Height="120">ITPUB个人空间"O)J|j%vr'dk
T7Af
<Ellipse.Fill>
6DH^;lf)G0<RadialGradientBrushGradientOrigin="0.75,0.25"Center="0.5,0.5"
L$@] D%meF@0RadiusX="0.5"RadiusY="0.5">
.eVO3r+L*D0<GradientStopColor="#FFFFFF"Offset="0.0" />ITPUB个人空间5C0lj~,tIk
<GradientStopColor="#000000"Offset="1.0" />ITPUB个人空间1m`_lD	B
</RadialGradientBrush>ITPUB个人空间}{(M%~}5k'Z'd
</Ellipse.Fill>ITPUB个人空间U*CiHTB
</Ellipse>
'Q2@iC5x:hU0ITPUB个人空间*oy~:P0K0@+s
<EllipseCanvas.Top="160"Canvas.Left="80"ITPUB个人空间h*dInrX]y
_,p
Width="120"Height="120">
lY^Q*uypdL0<Ellipse.Fill>
)W.yx(TH0<RadialGradientBrushGradientOrigin="0.5,0.5"Center="0.5,0.5"
bW G:EvcU0RadiusX="0.25"RadiusY="0.5">ITPUB个人空间_	B}9V.P
<GradientStopColor="#FFFFFF"Offset="0.0" />ITPUB个人空间	?5|TkK	o
<GradientStopColor="#000000"Offset="1.0" />ITPUB个人空间+^
R7t M@fu+d'^
</RadialGradientBrush>
OH'N7a)d/i0</Ellipse.Fill>
d^[2\WP0</Ellipse>ITPUB个人空间p3^}9I4Q$U~/o\
ITPUB个人空间}.N+_Y_)C
<EllipseCanvas.Top="160"Canvas.Left="280"
b@5~3d(V2V0Width="120"Height="120">ITPUB个人空间h3h6oQsZSY
<Ellipse.Fill>ITPUB个人空间\
iN*}H
<RadialGradientBrushGradientOrigin="0.5,0.5"Center="0.5,0.5"ITPUB个人空间n
F!D8B	G,M
RadiusX="0.5"RadiusY="0.25">ITPUB个人空间!L\`?Z	b*bp
<GradientStopColor="#FFFFFF"Offset="0.0" />
qp	^1EM ?MFg0<GradientStopColor="#000000"Offset="1.0" />
+d7NV5mU:R0</RadialGradientBrush>
+N0Q'so5sO0</Ellipse.Fill>ITPUB个人空间_'gy
~hc.i
Z
</Ellipse>ITPUB个人空间\
p2aa di'S:D?VV
</Canvas>

运行后的效果如下所示，在图上标注了他们各自的放射源位置坐标、中心位置坐标、X轴上和Y轴上的放射半径。ITPUB个人空间n7vT3g~1Ps
ITPUB个人空间)lLXymTn_Tr

ImageBrush

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

<CanvasBackground="#CDFCAE">ITPUB个人空间;aW3HXi MMd
<RectangleCanvas.Top="40"Canvas.Left="100"
"R,ZHd#wn*F0Width="300"Height="160"Stroke="Green"
aZ|+Vr6x0StrokeThickness="4"RadiusX="10"RadiusY="10">
j,p
`0s!m
q1u4qS0<Rectangle.Fill>
S:@eu3X0<ImageBrushImageSource="bg1.png"></ImageBrush>ITPUB个人空间|_vkfU~e
</Rectangle.Fill>ITPUB个人空间/A}%`%X*n*L(w
</Rectangle>
U1A#\_:WI'AB8X0</Canvas>