【李会军】一步一步学Silverlight 2系列（9）：使用控件模板

概述

Silverlight 2 Beta 1版本发布了，无论从Runtime还是Tools都给我们带来了很多的惊喜，如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython，对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章带您快速进入Silverlight 2开发。

本文为系列文章第九篇，主要介绍如何使用控件模板定制控件的观感。Silverlight提供了极其强大的功能，允许用户完全定制控件的外观。

定制控件内容

在Silverlight中，WatermarkedTextBox控件可以为用户的输入提供一段提示信息，如果只是简单的一点文字信息，有时候未免显得单调，如果加上相应的图片说明效果会更好，如下图所示的一个简单的用户登录界面：
U7C~\+E'o0
aX,@ ]'~#J!H{PB*B%x0

这样看起来界面显的就生动多了，XAML声明如下：

<CanvasBackground="#46461F">
,wV&f3l u0<WatermarkedTextBoxx:Name="UserName"Canvas.Top="30"Canvas.Left="50"ITPUB个人空间
~VV"yy*|
Width="320"Height="48">
 ?8X v\[$U(F
S0<WatermarkedTextBox.Watermark>
@z7Q
l*{e	`0<StackPanelWidth="320"Height="48"Orientation="Horizontal">ITPUB个人空间!A ~XiY'x~vaMl
<ImageSource="admin.png"HorizontalAlignment="Left"></Image>ITPUB个人空间#Bh!m	v
OQ)k4p
<TextBlockText="请输入用户名"VerticalAlignment="Center"Foreground="#999999"/>

TND%N'?
y#_,rt0</StackPanel>
8N,QT5z:u0</WatermarkedTextBox.Watermark>ITPUB个人空间"u~-F	n.h
</WatermarkedTextBox>
t?!Cw3W0
y6fa4jZ0<WatermarkedTextBoxx:Name="Password"Canvas.Top="110"Canvas.Left="50"ITPUB个人空间I	V*@;J-F+w8]*i
Width="320"Height="48"HorizontalAlignment="Left">
3WpT`A r0<WatermarkedTextBox.Watermark>
f._bQN)bMW0<StackPanelWidth="320"Height="48"Orientation="Horizontal">ITPUB个人空间q[8j+bw2p y.?
<ImageSource="lock.png"HorizontalAlignment="Left"></Image>ITPUB个人空间BdKnO'K/]_d
<TextBlockText="请输入密码"VerticalAlignment="Center"Foreground="#999999"/>
 U Z5o#lX5h.E0</StackPanel>
3^5k1_!k(tR5LL0</WatermarkedTextBox.Watermark>
+t8w
t#PK7TZ0</WatermarkedTextBox>
;F2g*kkw3M-W0ITPUB个人空间3tFKU.{8G9_]@
<ButtonCanvas.Top="180"Canvas.Left="100"ITPUB个人空间`f
AN-B@@
Width="120"Height="48">ITPUB个人空间9w;?
d
Rm_3W-a$@
d/~
<Button.Content>ITPUB个人空间w.X*@Vz
z
I!M
<StackPanelOrientation="Horizontal">
;Z7l
a*c*~4j#B2|!l0<ImageSource="apply.png"HorizontalAlignment="Left"></Image>ITPUB个人空间g0o1W9sc:`:K{u9qet
<TextBlockText="登 录"VerticalAlignment="Center"Margin="10 0 0 0"></TextBlock>
/N|V^^KE0</StackPanel>

ru.o9X1K"\w2p0</Button.Content>ITPUB个人空间5h'd)@.[L5aN)P
</Button>ITPUB个人空间:F#^^{[l%Y
</Canvas>

很多控件都有Content或者Text属性，我们完全可以充分发挥自己的想象力去进行定制，定制后控件仍然具有原来的功能行为，如上面的示例，当输入用户名控件获得焦点时文字和图片都将消失：ITPUB个人空间(fK,HNo},c

.o3w}!~0]t2iW0

使用控件模板定制控件

前面的示例中我们只是定制了控件的内容，Silverlight允许我们完全对控件进行定制，而不仅仅是内容。下面的示例中我们定制一个渐变色的圆角矩形按钮。首先我们在App.xaml中创建一个RoundButton样式，改写按钮的Template属性：

<Style.x:Key="RoundButton"TargetType="Button">ITPUB个人空间5_;nrcX8y&g,g
<SetterProperty="Template">ITPUB个人空间#k|9j]db0B
<Setter.Value>
(t,fc)l`2r8]0<ControlTemplateTargetType="Button">
+|$Y |U5|'v$gl#Q0<Gridx:Name="RootElement">ITPUB个人空间I;|-I
L7\3~@:e I4L
<RectangleWidth="200"Height="80"RadiusX="15"RadiusY="15">
,{/qYf+B8OH nS0<Rectangle.Fill>ITPUB个人空间{i4n	w
c[$pcC
<LinearGradientBrushStartPoint="0,0">ITPUB个人空间{C*F1O#N%~
<GradientStopColor="#FFFFFF"Offset="0.0" />ITPUB个人空间`+x8CT
d3Z-X3k
<GradientStopColor="#EC04FA"Offset="1.0" />
4RG A,h	F^_"l:U0</LinearGradientBrush>
:de?E%K&tnT0</Rectangle.Fill>ITPUB个人空间C"U,lT3?2ho{
<Rectangle.Stroke>
*r(O|	k$o/T'{v0<LinearGradientBrushEndPoint="0.5,1"StartPoint="0.5,0">ITPUB个人空间3G4Ww"dFNq
<GradientStopColor="#FCB2FD"Offset="0" />ITPUB个人空间+]]?*pc@
<GradientStopColor="#FFFFFF"Offset="1" />
"s
n&O
Ff$k9I0</LinearGradientBrush>ITPUB个人空间i'B@5[/E#Cv4E5L9L
</Rectangle.Stroke>ITPUB个人空间h%pX/NL.i
</Rectangle>

RHTjOj0<TextBlockText="提 交"FontSize="26"Foreground="White"
v[7DB;Q]0HorizontalAlignment="Center"VerticalAlignment="Center"/>
M;v4?-|.x/`0</Grid>
s&q2kL}q|	~0</ControlTemplate>ITPUB个人空间UY/\	oc(AlP
</Setter.Value>
3OQH(Ke:G!SW/oh0</Setter>ITPUB个人空间3C
D(yl&p:E7_`E
</Style>

其中的渐变等内容在Graphics相关内容里将会写到。现在在XAML中使用该样式：

<CanvasBackground="#46461F">ITPUB个人空间1Qh$Hw&W	@.]
<Buttonx:Name="button1"Style="{StaticResourceRoundButton}"ITPUB个人空间y)r#ufb+B+R-k
Canvas.Top="80"Canvas.Left="150"/>ITPUB个人空间yZZ	[,P2Qj
wjfJ
y
</Canvas>

运行后就可以看到下面的效果：

创建模板

上面的示例中，控件的文字以及控件的大小都是固定的，我们希望在开发人员使用中再设定，可以在控件模板中通过使用 {TemplateBinding ControlProperty} 的标识扩展句法来绑定到控件的属性来实现，使用ContentPresenter控件可以灵活的设置各个属性。修改RoundButton样式如下所示：

<Style.x:Key="RoundButton"TargetType="Button">ITPUB个人空间:@8Su5qs8g
<SetterProperty="Template">
4Q"`\f6J0<Setter.Value>ITPUB个人空间TKCV-y
k-j't
<ControlTemplateTargetType="Button">ITPUB个人空间1G2pO| V.A
<Gridx:Name="RootElement">ITPUB个人空间*|[)Xo	r\
<RectangleWidth="{TemplateBindingWidth}"Height="{TemplateBindingHeight}"ITPUB个人空间+YkKa#}4h#K
RadiusX="15"RadiusY="15">ITPUB个人空间6B7Q@1`XH0f'aU]	W
<Rectangle.Fill>
IyK'u/x8h0<LinearGradientBrushStartPoint="0,0">
(]-v'Q8Ge0<GradientStopColor="#FFFFFF"Offset="0.0" />ITPUB个人空间N	?^U$^8dH4d u
<GradientStopColor="#EC04FA"Offset="1.0" />
-XmbCyaub
X5j0</LinearGradientBrush>ITPUB个人空间P!es7d9o
nVp
</Rectangle.Fill>
&K
F(a'E2m@8},_0<Rectangle.Stroke>
C$To!hZ@{0<LinearGradientBrushEndPoint="0.5,1"StartPoint="0.5,0">
{5U
[6F{x0<GradientStopColor="#EC04FA"Offset="0" />
OJv_5X3m	lS
E0<GradientStopColor="#FFFFFF"Offset="1" />ITPUB个人空间9W{Ad#gN	c'd
</LinearGradientBrush>ITPUB个人空间ceDZ%Uu!n
</Rectangle.Stroke>ITPUB个人空间%z'v-\3F;d)\5|"Q(v
</Rectangle>
~?J'Wi)d/i?0<ContentPresenterITPUB个人空间2p;z&Cf;L^W
Content="{TemplateBindingContent}"
4{rBKOgV0FontSize="{TemplateBindingFontSize}"ITPUB个人空间
nQ?e0F
j/c
HorizontalContentAlignment="{TemplateBindingHorizontalContentAlignment}"ITPUB个人空间@[ymXzr
VerticalContentAlignment="{TemplateBindingVerticalContentAlignment}"ITPUB个人空间fC'])Y1};K_mc,v
Foreground="{TemplateBindingForeground}">
5s	V2nBhA)R;f0</ContentPresenter>
(`{#D0Koa0</Grid>
2gxKK0l0</ControlTemplate>ITPUB个人空间yS*^&l&N-E/eNn\
</Setter.Value>ITPUB个人空间+SBiM/N/?8O/Ma,CL
</Setter>ITPUB个人空间p,k2@;]}0p
</Style>

这样在使用RoundButton时我们可以设定控件的文本及控件的大小：

<CanvasBackground="#46461F">
VANk1@qw&i,X0<Buttonx:Name="button1"Style="{StaticResourceRoundButton}"
5X%w1q5lG8HjEnGx	o0Canvas.Top="80"Canvas.Left="50"ITPUB个人空间]'J
Ugt3h}
Content="提 交"FontSize="26"ITPUB个人空间5qr|7O&HGQj
HorizontalContentAlignment="Center"ITPUB个人空间)~#DsEH+^@
VerticalContentAlignment="Center"
T/jXP9Wq0Foreground="White"Width="200"Height="60"/>ITPUB个人空间3SD/|Sw9PD*v8z
ITPUB个人空间+V%]hW]jh1Mo`
<Buttonx:Name="button2"Style="{StaticResourceRoundButton}"ITPUB个人空间u5f/_
]9xUvG
Canvas.Top="80"Canvas.Left="260"ITPUB个人空间H	y_)}5P^
Content="取 消"FontSize="26"ITPUB个人空间@S4pU;_h'`8s-r
HorizontalContentAlignment="Center"ITPUB个人空间CVKX!C9Ev
VerticalContentAlignment="Center"
M |#cjE0Foreground="White"Width="100"Height="100"/>
9c,fE(c-W/sU"f0</Canvas>

运行时效果如下：
E;|Q sQ0
'{T4[J:r1[;`K#FE0

结束语

本文简单的介绍了如何定制控件的内容以及通过控件模板完全定制控件，你可以从这里下载本文示例代码。

xd/co9A-a0