.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个人空间/@%?u'q9t7u
<RectangleCanvas.Top="60"Canvas.Left="20"ITPUB个人空间:K;hSwT0O!x9H
Width="200"Height="100"Stroke="Green"ITPUB个人空间j8r,k\Y)S
l,~0S
StrokeThickness="2">
p8\QRU[WT0<Rectangle.Fill>ITPUB个人空间,_DbmM)P-k
<SolidColorBrushColor="Orange">
WI|M:i.J;yp.T0</SolidColorBrush>
	Ve8~+z9gv!Yin D:Eh j0</Rectangle.Fill>ITPUB个人空间,~
IX8dtcM
</Rectangle>
/\\q0B0U4]AL,G_-B0ITPUB个人空间x-El"Q-T6r^_Z
<RectangleCanvas.Top="60"Canvas.Left="280"ITPUB个人空间7}~
D1I']1TW:L
Width="200"Height="100"Stroke="Green"ITPUB个人空间
r0h
~HEZ	{
StrokeThickness="2">
$U0sD&`/W0<Rectangle.Fill>ITPUB个人空间!d#N@la5Rj"K
<SolidColorBrushColor="Orange"ITPUB个人空间*{y4le9z
Opacity="0.5">ITPUB个人空间T	Un;|zk9iy
</SolidColorBrush>ITPUB个人空间R-g)o;A#T
</Rectangle.Fill>
hgN]X N,FZ6Q0</Rectangle>
)a#^&NH!Lr:j"G{0</Canvas>

运行后如下所示：
2AhJJ:nL0
R:GB#j0}(k#r0

LinearGradientBrush

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

<CanvasBackground="#FFFFFF">ITPUB个人空间*lJN3H0X'eXH/[^
<RectangleCanvas.Top="40"Canvas.Left="100"
Wj6}:QA|	@0Width="300"Height="160"Stroke="Green"ITPUB个人空间 fb'g+|(vl:h/y
StrokeThickness="4">ITPUB个人空间+P)Z*x6J	m8?6Q4Q-o
<Rectangle.Fill>ITPUB个人空间Ly5m@j4V
<LinearGradientBrushStartPoint="0,0"EndPoint="1,0">
7B8q:Q!F'F0<GradientStopColor="#FBFE03"Offset="0.0" />ITPUB个人空间Y;C}qupi
<GradientStopColor="#41F702"Offset="0.25" />
7T+{b)q&lS'W0<GradientStopColor="#FF0000"Offset="0.75" />ITPUB个人空间iT,@p"G$I
<GradientStopColor="#0066FF"Offset="1.0" />
$S\4v&q
N0</LinearGradientBrush>
T){`!i'rmc.v0</Rectangle.Fill>ITPUB个人空间$Zy8p#G'P
k\
</Rectangle>
^zz@%qC`0</Canvas>

运行后如下图所示：

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

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

<CanvasBackground="#FFFFFF">ITPUB个人空间p@c7qy&Xq
<RectangleCanvas.Top="80"Canvas.Left="20"ITPUB个人空间%IS3[p!lcgI@Cx
Width="120"Height="80"Stroke="Green"ITPUB个人空间P!m@)v
R2\
StrokeThickness="4">
9t*W9BylJ7G5X+O0<Rectangle.Fill>
-ev:oG+[h9ji0<LinearGradientBrushStartPoint="0,0"EndPoint="1,0">ITPUB个人空间B
QYMI
<GradientStopColor="#FBFE03"Offset="0.0" />ITPUB个人空间tUDk*e/U(q6V
c
<GradientStopColor="#41F702"Offset="0.25" />
NA
_gk0zq0<GradientStopColor="#FF0000"Offset="0.75" />ITPUB个人空间5A-pT&Nu#|
<GradientStopColor="#0066FF"Offset="1.0" />ITPUB个人空间
N%O)Y%h3u9In	[
</LinearGradientBrush>
/yH})tv0</Rectangle.Fill>
IU%aRmKJ4U9T0</Rectangle>ITPUB个人空间jTr ^+iceuV
ITPUB个人空间/B8C`k/FT'Qf
<RectangleCanvas.Top="80"Canvas.Left="160"
6bm
n5d4|	Y-^0Width="120"Height="80"Stroke="Green"ITPUB个人空间)jI W
Fi
StrokeThickness="4">
$b7T^O1R0jq0<Rectangle.Fill>
|&]{vjo0<LinearGradientBrushStartPoint="0,0"EndPoint="0,1">ITPUB个人空间"h*r-aE,m
<GradientStopColor="#FBFE03"Offset="0.0" />
0O{#YxT
C$\0<GradientStopColor="#41F702"Offset="0.25" />
L[yh*_q}Oz-R	B0<GradientStopColor="#FF0000"Offset="0.75" />
:T+q~UyU_#Z3V0<GradientStopColor="#0066FF"Offset="1.0" />
*SOr%x"A,|0</LinearGradientBrush>
@u4b(apEUx0</Rectangle.Fill>ITPUB个人空间.tS] \[i)q\&|l
</Rectangle>
I&U.b
Z
Kv(A0
!UM%B#n?j0<RectangleCanvas.Top="80"Canvas.Left="300"ITPUB个人空间(Pt.Vvu
Width="120"Height="80"Stroke="Green"
*A2Q:[vMw0StrokeThickness="4">
MF*L
uKLaH)]0<Rectangle.Fill>ITPUB个人空间oB:[QT8D#K0X}M
<LinearGradientBrushStartPoint="0,0"EndPoint="1,1">
fZb*x,G;M0<GradientStopColor="#FBFE03"Offset="0.0" />
w$YzqP{,S|0<GradientStopColor="#41F702"Offset="0.25" />ITPUB个人空间7N/q ]	zYz
<GradientStopColor="#FF0000"Offset="0.75" />
x.M5Vvn)U0<GradientStopColor="#0066FF"Offset="1.0" />
{\LX4E0</LinearGradientBrush>ITPUB个人空间7M)Z!v2Dn_
</Rectangle.Fill>
7s{zK:v&l1n6n0</Rectangle>
1V}0i&z3w0</Canvas>

运行后如下图所示：
/X1J?)v'Ck}xy0
&pe[Cu0

RadialGradientBrush

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

<CanvasBackground="#CDFCAE">
"V+VUI,@0uIH0<EllipseCanvas.Top="30"Canvas.Left="100"
.h%JchGA!@E9nr0Width="300"Height="180">ITPUB个人空间zK
w	_hb
<Ellipse.Fill>
*Y
l)x^7]SHX6N0<RadialGradientBrushGradientOrigin="0.5,0.5"Center="0.5,0.5"
(o%m*|si
n
]8q(D0RadiusX="0.5"RadiusY="0.5">
"r,t%oU_
TdJ0<GradientStopColor="#FBFE03"Offset="0.0" />ITPUB个人空间%z%gQ?5A;P7t(@
<GradientStopColor="#41F702"Offset="0.25" />ITPUB个人空间+VSGMiI+E?
<GradientStopColor="#FF0000"Offset="0.75" />
H7jT7}YA9H0<GradientStopColor="#0066FF"Offset="1.0" />ITPUB个人空间!ay@%|2d3h!NS8m
</RadialGradientBrush>
wO
C+NU0u0</Ellipse.Fill>
4gkvW5bJ!WM zK0</Ellipse>ITPUB个人空间Y;N]
S
Y
</Canvas>

运行后如下所示：
\sf}l%}0ITPUB个人空间d JHP f6]"BU

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

<CanvasBackground="#CDFCAE">
zKI?-N)C1W8A0<EllipseCanvas.Top="20"Canvas.Left="80"
M6tsUm7{	jK0Width="120"Height="120">
"Z};Yn-f+dG0<Ellipse.Fill>ITPUB个人空间k9b}v+S
t2z
<RadialGradientBrushGradientOrigin="0.5,0.5"Center="0.5,0.5"ITPUB个人空间)qJ M%PCV j"\v^&PQ
RadiusX="0.5"RadiusY="0.5">
pSVG/qTWF9S$P0<GradientStopColor="#FFFFFF"Offset="0.0" />ITPUB个人空间)za\^v&|w
<GradientStopColor="#000000"Offset="1.0" />
/p?8O^0hnfS0</RadialGradientBrush>
+O'A$L7_!HB	^	],T0</Ellipse.Fill>ITPUB个人空间h-gHV	U	u
[
</Ellipse>ITPUB个人空间"r-e	C%\,DtuL(F
ITPUB个人空间0@pvzn3EI)naT/yG
<EllipseCanvas.Top="20"Canvas.Left="280"ITPUB个人空间S(V;P&{6rH	Q+P
Width="120"Height="120">ITPUB个人空间;DTcEs#H!k1C'U'qW
<Ellipse.Fill>ITPUB个人空间Zv z-v\BBm.|7p
<RadialGradientBrushGradientOrigin="0.75,0.25"Center="0.5,0.5"ITPUB个人空间WdeX/^sK0k
RadiusX="0.5"RadiusY="0.5">ITPUB个人空间ZY`QMr
<GradientStopColor="#FFFFFF"Offset="0.0" />
M(|'E:H4qd0<GradientStopColor="#000000"Offset="1.0" />
j	I+By	M/O-g0</RadialGradientBrush>
)m8S`V*`1N0</Ellipse.Fill>
{d(YR/`/p0</Ellipse>
3g]P4d8a]"}u,XS0ITPUB个人空间}*` F#y/{
<EllipseCanvas.Top="160"Canvas.Left="80"ITPUB个人空间2LsARsa
Width="120"Height="120">
].} hXc~0<Ellipse.Fill>ITPUB个人空间1QG_p,U-e.?'\:J
<RadialGradientBrushGradientOrigin="0.5,0.5"Center="0.5,0.5"
l9o{+mB0RadiusX="0.25"RadiusY="0.5">ITPUB个人空间
BEq9Q'Z
<GradientStopColor="#FFFFFF"Offset="0.0" />ITPUB个人空间Qx;}9xdm#~-G9B9{QX
<GradientStopColor="#000000"Offset="1.0" />
[[ E?j0</RadialGradientBrush>ITPUB个人空间![$fTa5aR9tLN
</Ellipse.Fill>
&[bkKUO#i$g%Y0</Ellipse>
'P/P,Q$y$qo^%XE0ITPUB个人空间:G"VY~${)VY
<EllipseCanvas.Top="160"Canvas.Left="280"
	hg L}%i;\L(d0Width="120"Height="120">ITPUB个人空间!S6[v8HS?5V7o
rd
<Ellipse.Fill>
7mf.K7x6ar
n~"s0<RadialGradientBrushGradientOrigin="0.5,0.5"Center="0.5,0.5"
%eX(A7Y(`+T2d0RadiusX="0.5"RadiusY="0.25">
X d/V,W-xb1nh'YM'i0<GradientStopColor="#FFFFFF"Offset="0.0" />
8f"`6qL#He/J
hx0<GradientStopColor="#000000"Offset="1.0" />
sU_@xnIX0</RadialGradientBrush>ITPUB个人空间S#H\"aX3]1T+M
</Ellipse.Fill>
P*L@1]c0</Ellipse>
}4e:}D}W0</Canvas>

运行后的效果如下所示，在图上标注了他们各自的放射源位置坐标、中心位置坐标、X轴上和Y轴上的放射半径。
ITPUB个人空间'`T3GV [ {S,f(q

ImageBrush

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

<CanvasBackground="#CDFCAE">ITPUB个人空间2`8Af!u;P^5[
@	g
<RectangleCanvas.Top="40"Canvas.Left="100"
]!v'd-z4U0Width="300"Height="160"Stroke="Green"
z	Z6n)TKgHr0StrokeThickness="4"RadiusX="10"RadiusY="10">ITPUB个人空间t6J(aV
R3iOV\x:q
<Rectangle.Fill>

RQ1snPoiZ0<ImageBrushImageSource="bg1.png"></ImageBrush>ITPUB个人空间B+_9q&j%k
</Rectangle.Fill>ITPUB个人空间#s\UWC4R
</Rectangle>
?+[0a,xOj r6vj0</Canvas>