.NEt专家博客！

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

上一篇 / 下一篇 2008-04-11 19:30:19

概述

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

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

定制控件内容

在Silverlight中，WatermarkedTextBox控件可以为用户的输入提供一段提示信息，如果只是简单的一点文字信息，有时候未免显得单调，如果加上相应的图片说明效果会更好，如下图所示的一个简单的用户登录界面：ITPUB个人空间4e-k1x#J ]4c}/|

F$s!sa6OX4J0

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

<CanvasBackground="#46461F">ITPUB个人空间@MNu:{-\7K
<WatermarkedTextBoxx:Name="UserName"Canvas.Top="30"Canvas.Left="50"
a.UgP
WA0Width="320"Height="48">
5IM3os#^$bzG"h0<WatermarkedTextBox.Watermark>ITPUB个人空间KS.D)S8@AwZ
<StackPanelWidth="320"Height="48"Orientation="Horizontal">

V*y)J"~};k&u6|0<ImageSource="admin.png"HorizontalAlignment="Left"></Image>

Gz`Nb)eF!rD |3x0<TextBlockText="请输入用户名"VerticalAlignment="Center"Foreground="#999999"/>
%S3aa+\-KWP%}0</StackPanel>
:@	M V)x
rY J?0</WatermarkedTextBox.Watermark>
*v7O+A9SSez
Z0</WatermarkedTextBox>
W)fzQ8_u}_z2D0
	P3g,wi^mT|0<WatermarkedTextBoxx:Name="Password"Canvas.Top="110"Canvas.Left="50"ITPUB个人空间|^;cX#KOE
Width="320"Height="48"HorizontalAlignment="Left">ITPUB个人空间;i&^\FTH*v
<WatermarkedTextBox.Watermark>
E%HnP Y7^+ECp.U{+y0<StackPanelWidth="320"Height="48"Orientation="Horizontal">
z@
~1`B/[\x0<ImageSource="lock.png"HorizontalAlignment="Left"></Image>ITPUB个人空间M/P:t"d%Q'b
<TextBlockText="请输入密码"VerticalAlignment="Center"Foreground="#999999"/>
j&G^+|c!k_0</StackPanel>
8X)VkHDw5^3|0</WatermarkedTextBox.Watermark>ITPUB个人空间WM(Dz/C*],O\Fau
</WatermarkedTextBox>ITPUB个人空间(y
u4W(n`c5wj

F?0}'p P0<ButtonCanvas.Top="180"Canvas.Left="100"
 ~H*CB]#LL0Width="120"Height="48">ITPUB个人空间NRbH!Z#X
<Button.Content>
nw:G#Hlp8l0<StackPanelOrientation="Horizontal">ITPUB个人空间6sk)j|4k7f1L%~-}!d9I
<ImageSource="apply.png"HorizontalAlignment="Left"></Image>
-x)vR%e4\zsi+ij0<TextBlockText="登 录"VerticalAlignment="Center"Margin="10 0 0 0"></TextBlock>ITPUB个人空间$HS4hu!wIY.f+ZI+@y
</StackPanel>
5om6eM|)l0</Button.Content>
`+MA5v6u&qk0</Button>ITPUB个人空间;m"Se/S4aA#\r6?
</Canvas>

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

} VJ"{8[(|0

使用控件模板定制控件

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

<Style.x:Key="RoundButton"TargetType="Button">ITPUB个人空间X4D*n.q3_)O+S
O8l8F
<SetterProperty="Template">ITPUB个人空间X2W;iNC0^r
<Setter.Value>ITPUB个人空间{N&f{,Pm
<ControlTemplateTargetType="Button">
5pQ;l7]
N2Am0<Gridx:Name="RootElement">ITPUB个人空间W~(}EZ
<RectangleWidth="200"Height="80"RadiusX="15"RadiusY="15">ITPUB个人空间
W[w*@v!K6\
<Rectangle.Fill>
2V}9F&q?0<LinearGradientBrushStartPoint="0,0">ITPUB个人空间1q4h/v@e/rJ
<GradientStopColor="#FFFFFF"Offset="0.0" />
T:y)a-k1UD4V\6D0<GradientStopColor="#EC04FA"Offset="1.0" />
I0}4Te
PM~L0</LinearGradientBrush>
%V;f(n;pP9vV0</Rectangle.Fill>ITPUB个人空间:@3N
v5yx2ynf"N
<Rectangle.Stroke>ITPUB个人空间/Df~)X/P4p
<LinearGradientBrushEndPoint="0.5,1"StartPoint="0.5,0">
k+R?)vd5BS0<GradientStopColor="#FCB2FD"Offset="0" />
r%si
`aw0<GradientStopColor="#FFFFFF"Offset="1" />ITPUB个人空间R
v`u|l/Y!W
</LinearGradientBrush>
~/w)Z}#ML0</Rectangle.Stroke>ITPUB个人空间:u
koE,Y!_3X/uS
P
</Rectangle>ITPUB个人空间Uq4|;Cm	g#D4w
<TextBlockText="提 交"FontSize="26"Foreground="White"ITPUB个人空间uQ/v(f	M
HorizontalAlignment="Center"VerticalAlignment="Center"/>
 R[] wN4D0</Grid>ITPUB个人空间C!F\H-H(j_+?
</ControlTemplate>ITPUB个人空间L:Gk6dt [!m7U
</Setter.Value>
t%LQ$OP8~H*S.~L0</Setter>ITPUB个人空间7v3R{F7\I;tCx
</Style>

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

<CanvasBackground="#46461F">ITPUB个人空间T\"Z2k:~+k
<Buttonx:Name="button1"Style="{StaticResourceRoundButton}"
)H,Cv;f$B%M
P0Canvas.Top="80"Canvas.Left="150"/>ITPUB个人空间I&Li;E?,_
</Canvas>

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

创建模板

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

<Style.x:Key="RoundButton"TargetType="Button">ITPUB个人空间@{EUU+c
Y
<SetterProperty="Template">
;d\T9v*BFw5My3`0<Setter.Value>
ktx,LEo0<ControlTemplateTargetType="Button">ITPUB个人空间\5b0Kn.|TPH'{d
<Gridx:Name="RootElement">ITPUB个人空间,|'aR9s,@-l]\m
<RectangleWidth="{TemplateBindingWidth}"Height="{TemplateBindingHeight}"
0j
V_U.m5U^0RadiusX="15"RadiusY="15">ITPUB个人空间~/cPXR9[
<Rectangle.Fill>
$_#OaO:z+I(u_0<LinearGradientBrushStartPoint="0,0">
nf~4lv'pLn$ms*|0<GradientStopColor="#FFFFFF"Offset="0.0" />
}Y7@Xp8i6]MX7@(P0<GradientStopColor="#EC04FA"Offset="1.0" />
E(s
q.N3_Ag9d*F0</LinearGradientBrush>
't(bYnl?vCQ0</Rectangle.Fill>
)A,AD7tyM#R!k0<Rectangle.Stroke>
WTv,ss0<LinearGradientBrushEndPoint="0.5,1"StartPoint="0.5,0">
x~
a4NZ1FS0<GradientStopColor="#EC04FA"Offset="0" />
Y}-S&|Ml+J{ zX.q&X0<GradientStopColor="#FFFFFF"Offset="1" />ITPUB个人空间 Fby8o%wM
</LinearGradientBrush>ITPUB个人空间]X	s3~ b#c
</Rectangle.Stroke>ITPUB个人空间\7?;a+N3I8NS
</Rectangle>ITPUB个人空间GV?r [f%^Qa
<ContentPresenter
J+g#|9}K/LW
sH4v0Content="{TemplateBindingContent}"ITPUB个人空间~]8B[6kc
FontSize="{TemplateBindingFontSize}"ITPUB个人空间 C)}wyiy
HorizontalContentAlignment="{TemplateBindingHorizontalContentAlignment}"
f
Lu)?&R-a(H+|0VerticalContentAlignment="{TemplateBindingVerticalContentAlignment}"
#Dum!W\	De	~7g+E0Foreground="{TemplateBindingForeground}">ITPUB个人空间3HHo9jC`rJ/p+q
</ContentPresenter>
J}j~'EJh1r0</Grid>ITPUB个人空间%Sc&k,apW7K
</ControlTemplate>ITPUB个人空间,_wPIVbB6fM
</Setter.Value>
Kgw5S%JY0</Setter>ITPUB个人空间7s;RQ8l'P0R.lW:IS
</Style>

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

<CanvasBackground="#46461F">
k2|'_x3v,B+nT0<Buttonx:Name="button1"Style="{StaticResourceRoundButton}"
hT5{Y_5lUbW0Canvas.Top="80"Canvas.Left="50"ITPUB个人空间4AR8RG-YJ6Ww%nm
Content="提 交"FontSize="26"
#]"agFo0HorizontalContentAlignment="Center"
8p_@f	Lz-FT1q(t0VerticalContentAlignment="Center"
,jB({ E%R	u#U7\0Foreground="White"Width="200"Height="60"/>
f^C6y7E$U0ITPUB个人空间 ]TY0`C'}V3N
<Buttonx:Name="button2"Style="{StaticResourceRoundButton}"
np9],t
?PMyf0Canvas.Top="80"Canvas.Left="260"
/^#`RIu|x.|0Content="取 消"FontSize="26"ITPUB个人空间!t L)ttj$~x5P
HorizontalContentAlignment="Center"ITPUB个人空间^;Rr0T3M
VerticalContentAlignment="Center"
'lA"clHmC0Foreground="White"Width="100"Height="100"/>
F+r.H)u`vu:S0</Canvas>