【李会军】一步一步学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控件可以为用户的输入提供一段提示信息，如果只是简单的一点文字信息，有时候未免显得单调，如果加上相应的图片说明效果会更好，如下图所示的一个简单的用户登录界面：
&Y%T`xE(?z2p7x%C0ITPUB个人空间+]u_9j5Q

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

<CanvasBackground="#46461F">
2FY NWhT0<WatermarkedTextBoxx:Name="UserName"Canvas.Top="30"Canvas.Left="50"ITPUB个人空间&@#ce%?S5b$u oB
Width="320"Height="48">ITPUB个人空间8e%HHp"p1T
<WatermarkedTextBox.Watermark>ITPUB个人空间'K3k
h(w"@:x`
<StackPanelWidth="320"Height="48"Orientation="Horizontal">
Rr6Rg%I-|0<ImageSource="admin.png"HorizontalAlignment="Left"></Image>ITPUB个人空间7?7k8GU5y9cI\6b4[
<TextBlockText="请输入用户名"VerticalAlignment="Center"Foreground="#999999"/>
,|2IYCmT+i6F0</StackPanel>
~I
nG2]+]!r5m3U#v0</WatermarkedTextBox.Watermark>ITPUB个人空间0l,Wu*l sD
</WatermarkedTextBox>ITPUB个人空间({'t8jbET6U[^
ITPUB个人空间)b#b%Q&G0`.['?n1@"s
<WatermarkedTextBoxx:Name="Password"Canvas.Top="110"Canvas.Left="50"
!@ uc2Z:M2^0Width="320"Height="48"HorizontalAlignment="Left">
v/m!L8vA
IZ0<WatermarkedTextBox.Watermark>ITPUB个人空间~7Mk?s
<StackPanelWidth="320"Height="48"Orientation="Horizontal">ITPUB个人空间gcch
k-Q
\-})q
<ImageSource="lock.png"HorizontalAlignment="Left"></Image>ITPUB个人空间8M:|Fy1L!T(Jc*h8`
<TextBlockText="请输入密码"VerticalAlignment="Center"Foreground="#999999"/>
&p/YMo$pK"b/A\A0</StackPanel>
*OR0P~k t"\6F0</WatermarkedTextBox.Watermark>ITPUB个人空间1y_:M/n-~P{&f]-t
</WatermarkedTextBox>
4n}%D(Vfi!]|0ITPUB个人空间8J-ON	DZ[4CPx
<ButtonCanvas.Top="180"Canvas.Left="100"
3v5Q1y3{E"N a0Width="120"Height="48">ITPUB个人空间
h
GP:EQxuZ
<Button.Content>ITPUB个人空间&^zK	St;^HN
<StackPanelOrientation="Horizontal">ITPUB个人空间3DB}	P:]S!x9\h a
<ImageSource="apply.png"HorizontalAlignment="Left"></Image>ITPUB个人空间sy+|
s0~a
m
<TextBlockText="登 录"VerticalAlignment="Center"Margin="10 0 0 0"></TextBlock>

b!G
r9j9r0</StackPanel>ITPUB个人空间PdN:i
]q3hBf
</Button.Content>ITPUB个人空间/j2Y	o+W{"vN
</Button>ITPUB个人空间3p2Y$o9]o5xX&Cf
z
</Canvas>

很多控件都有Content或者Text属性，我们完全可以充分发挥自己的想象力去进行定制，定制后控件仍然具有原来的功能行为，如上面的示例，当输入用户名控件获得焦点时文字和图片都将消失：
%A6|%ruM.MhI5a0ITPUB个人空间#W'^2F6|v~&C0Y+F

使用控件模板定制控件

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

<Style.x:Key="RoundButton"TargetType="Button">ITPUB个人空间v2}%RpE1M
<SetterProperty="Template">ITPUB个人空间g4l0_"~.u
<Setter.Value>

@3u1H5w_7LR0<ControlTemplateTargetType="Button">ITPUB个人空间w{)chE
<Gridx:Name="RootElement">ITPUB个人空间!n(JrocY(?A*H,e	x"K
<RectangleWidth="200"Height="80"RadiusX="15"RadiusY="15">ITPUB个人空间#VG^0Vt0qk&o
<Rectangle.Fill>
qt
hU;r
w[U\R'T0<LinearGradientBrushStartPoint="0,0">ITPUB个人空间7C3U0mc5EV2w
<GradientStopColor="#FFFFFF"Offset="0.0" />
-g;sU|3b,`H`'Y0<GradientStopColor="#EC04FA"Offset="1.0" />ITPUB个人空间UQ3I8p\b8?@
A
</LinearGradientBrush>
N;C,]VX'T%o&}
yW-A0</Rectangle.Fill>
y-Y.V'Th
T	n0<Rectangle.Stroke>
dc9m
BmKx6sq0<LinearGradientBrushEndPoint="0.5,1"StartPoint="0.5,0">
_C7_0CD
A1\9V0<GradientStopColor="#FCB2FD"Offset="0" />ITPUB个人空间 ?6x7OFO l
D#j'_
<GradientStopColor="#FFFFFF"Offset="1" />
H1]V.{(E/L
o
]0</LinearGradientBrush>ITPUB个人空间y2y|Y&f
</Rectangle.Stroke>
:r.ct-}%QS{F0</Rectangle>
G'odH#[eq(I0<TextBlockText="提 交"FontSize="26"Foreground="White"
)`?V	T0vJ3peK(sK({%z0HorizontalAlignment="Center"VerticalAlignment="Center"/>
8E1~4v|_Q0</Grid>
W,X~$j5p.GDk0?0</ControlTemplate>
:j&?pvTE)q0</Setter.Value>ITPUB个人空间6M	V_YA/c4LH
M(R
</Setter>
xVDl
ix0</Style>

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

<CanvasBackground="#46461F">ITPUB个人空间R+a+r_w/SQ
<Buttonx:Name="button1"Style="{StaticResourceRoundButton}"
xe7i1i;[ZjP%I0Canvas.Top="80"Canvas.Left="150"/>ITPUB个人空间-_E?&AF
</Canvas>

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

创建模板

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

<Style.x:Key="RoundButton"TargetType="Button">
'LY(K2n }6c0<SetterProperty="Template">ITPUB个人空间:o'Q*_S(Q7T
<Setter.Value>ITPUB个人空间/Gu-]0Ck
<ControlTemplateTargetType="Button">ITPUB个人空间.z2W(t'r9^7gA
<Gridx:Name="RootElement">
],gT8k2|v1^,J
]0<RectangleWidth="{TemplateBindingWidth}"Height="{TemplateBindingHeight}"
MwG\An	l0RadiusX="15"RadiusY="15">
[4gc
M
_1UY0<Rectangle.Fill>ITPUB个人空间!c{*a
]1|
<LinearGradientBrushStartPoint="0,0">
(MP_(K-|	H6c0<GradientStopColor="#FFFFFF"Offset="0.0" />ITPUB个人空间8HTa qvUHqy$A-_
<GradientStopColor="#EC04FA"Offset="1.0" />
[K4MIe5TO]J'eC0</LinearGradientBrush>
	d5^Q
M0wD0</Rectangle.Fill>ITPUB个人空间^(Y@7a$k6[}$ul!a
<Rectangle.Stroke>ITPUB个人空间#S]8|B A2Qf$S
<LinearGradientBrushEndPoint="0.5,1"StartPoint="0.5,0">
"tR,QC4pD};no0<GradientStopColor="#EC04FA"Offset="0" />ITPUB个人空间&L!l]F]S2KkR
<GradientStopColor="#FFFFFF"Offset="1" />
:S$F@U9R?vSuD0</LinearGradientBrush>
:{.A8[a/k0</Rectangle.Stroke>ITPUB个人空间@BF5d?/tqi
</Rectangle>ITPUB个人空间6}MA&n5n3eBr
<ContentPresenterITPUB个人空间0C2N,e]7p%V
Content="{TemplateBindingContent}"ITPUB个人空间)S8tXpb4Bq7{	_;I
FontSize="{TemplateBindingFontSize}"ITPUB个人空间|&S!YwM
HorizontalContentAlignment="{TemplateBindingHorizontalContentAlignment}"ITPUB个人空间+C3e;?u0F
VerticalContentAlignment="{TemplateBindingVerticalContentAlignment}"
`9`/B`'x2T^{0Foreground="{TemplateBindingForeground}">ITPUB个人空间.T}.wjK}.kn,Q$B?|
</ContentPresenter>
o'mo;wEO0</Grid>
1eg)k/Q)t0</ControlTemplate>
!x#}RD2f @
l/O0</Setter.Value>ITPUB个人空间pH/H&pn"i&i6L
</Setter>
;Z~7P#E&U
qzvh*JS0</Style>

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

<CanvasBackground="#46461F">ITPUB个人空间*?N
t7]9L:t%K
<Buttonx:Name="button1"Style="{StaticResourceRoundButton}"ITPUB个人空间
d7Y5C,uV}#n#A
Canvas.Top="80"Canvas.Left="50"
_:BW(U+f
r0Content="提 交"FontSize="26"ITPUB个人空间lo
?/y[,K
HorizontalContentAlignment="Center"
QFW*F8`7`{xnFmw0VerticalContentAlignment="Center"
8TYv!bC8~q}0Foreground="White"Width="200"Height="60"/>ITPUB个人空间*y{q[Z#T
I

}4?H%_
Xat:l0<Buttonx:Name="button2"Style="{StaticResourceRoundButton}"
lX!x+C$Ki.~0Canvas.Top="80"Canvas.Left="260"
K"eu\!@v%U
o6S"SE0Content="取 消"FontSize="26"
g1D Z4yx7H']
n0HorizontalContentAlignment="Center"ITPUB个人空间	}.@%`&yCI4VKmN
VerticalContentAlignment="Center"
1?i} f_0Foreground="White"Width="100"Height="100"/>
q,TcA!m#}+I0</Canvas>

运行时效果如下：
/D&?:_
^r9}0
\`/r3F9Z$ha0

结束语

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

!P$w^+c6j:~WB&r"Qq2g0