【李会军】一步一步学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控件可以为用户的输入提供一段提示信息，如果只是简单的一点文字信息，有时候未免显得单调，如果加上相应的图片说明效果会更好，如下图所示的一个简单的用户登录界面：
!g;rY2~o3y;c:M)_/r0
I bq)s/v8n+b)L0

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

<CanvasBackground="#46461F">ITPUB个人空间&@AO%l	ail
<WatermarkedTextBoxx:Name="UserName"Canvas.Top="30"Canvas.Left="50"
4b;w&o,?v[0Width="320"Height="48">ITPUB个人空间Q9v&I%~WM
<WatermarkedTextBox.Watermark>
z"q$Lx"_\0<StackPanelWidth="320"Height="48"Orientation="Horizontal">ITPUB个人空间y_I6Bv-z
<ImageSource="admin.png"HorizontalAlignment="Left"></Image>ITPUB个人空间#@
YuB
w%^2GMC
<TextBlockText="请输入用户名"VerticalAlignment="Center"Foreground="#999999"/>
7x#c8|3l?e
x:j(o0</StackPanel>ITPUB个人空间5I$]O"zfs(Q'WqY){
</WatermarkedTextBox.Watermark>ITPUB个人空间W[eH+@_F)n
</WatermarkedTextBox>
xF"C+r
a Fr'];Br0ITPUB个人空间~!Ea
c.ZZ
<WatermarkedTextBoxx:Name="Password"Canvas.Top="110"Canvas.Left="50"
9gvly,xU&u
{0Width="320"Height="48"HorizontalAlignment="Left">
4].M[)aF3zi
P0<WatermarkedTextBox.Watermark>
*Hfx7i$[:y _0<StackPanelWidth="320"Height="48"Orientation="Horizontal">ITPUB个人空间-@/h&T8pZ%U!|ng
<ImageSource="lock.png"HorizontalAlignment="Left"></Image>
%_3guJ6vW)V0<TextBlockText="请输入密码"VerticalAlignment="Center"Foreground="#999999"/>ITPUB个人空间h#XY8abuS.{"Y
</StackPanel>ITPUB个人空间[7\6w+Fo
l
</WatermarkedTextBox.Watermark>ITPUB个人空间-W7P~0y"di
</WatermarkedTextBox>ITPUB个人空间.FEx+s/]+_$a

?s*xn`	jvtL:hp
H1a0<ButtonCanvas.Top="180"Canvas.Left="100"
)d!s;f,L1[;C*PHy~0Width="120"Height="48">ITPUB个人空间+[!D,w!jUV)u
<Button.Content>
X0VTpN0<StackPanelOrientation="Horizontal">

D,r-}vE:qX^#o/E0<ImageSource="apply.png"HorizontalAlignment="Left"></Image>ITPUB个人空间)].~ptA.D:l2sq
<TextBlockText="登 录"VerticalAlignment="Center"Margin="10 0 0 0"></TextBlock>ITPUB个人空间'I!Ae0k5V2^w`
</StackPanel>
K#Kp{5l;cE/z9De0</Button.Content>ITPUB个人空间U$TQC-`,L0a`D
</Button>ITPUB个人空间 ]:}zL D_-g;@
</Canvas>

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

w+Gd"d&G#}0

使用控件模板定制控件

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

<Style.x:Key="RoundButton"TargetType="Button">
z+M0[:a
Aj8Rf
~/O0<SetterProperty="Template">ITPUB个人空间LQ-ZY
o7p;F
<Setter.Value>ITPUB个人空间.vD$]| t~!g
<ControlTemplateTargetType="Button">ITPUB个人空间2~3J8~&P	R	g.d
<Gridx:Name="RootElement">ITPUB个人空间L2b^`QJ4f
Sx|
<RectangleWidth="200"Height="80"RadiusX="15"RadiusY="15">ITPUB个人空间Vx:QsDC
<Rectangle.Fill>ITPUB个人空间[KwRvt
F2CI:[0|5X
<LinearGradientBrushStartPoint="0,0">ITPUB个人空间7q/cN^%zhbm	T
<GradientStopColor="#FFFFFF"Offset="0.0" />ITPUB个人空间sozF-LLE
<GradientStopColor="#EC04FA"Offset="1.0" />ITPUB个人空间V	O
ar~B7P"K4dL'se
</LinearGradientBrush>
$i"C!Qk#n:_,E@)rw6Z0</Rectangle.Fill>
6A8uX"V	P0<Rectangle.Stroke>
 [)k(Qc0ib`-W0<LinearGradientBrushEndPoint="0.5,1"StartPoint="0.5,0">
;K3S3}'y3Q0<GradientStopColor="#FCB2FD"Offset="0" />ITPUB个人空间Lc-OW3Nxr1J
<GradientStopColor="#FFFFFF"Offset="1" />
!f#`*Q5McEE0</LinearGradientBrush>
y*tQ@,p/S&\YT0</Rectangle.Stroke>ITPUB个人空间3rAV{P
</Rectangle>
#@M9G;l0F8g0<TextBlockText="提 交"FontSize="26"Foreground="White"ITPUB个人空间lq,X[!jC
HorizontalAlignment="Center"VerticalAlignment="Center"/>

A(DpK9T.` WR&bBI0</Grid>
F"ix	x [.P4vK:H0</ControlTemplate>
6}a4jxq0</Setter.Value>ITPUB个人空间)GXz&`/s}st,Q
</Setter>ITPUB个人空间,r(xbyrQ
</Style>

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

<CanvasBackground="#46461F">
.h:@y f&O.pY'M0<Buttonx:Name="button1"Style="{StaticResourceRoundButton}"
l"Kr,o5V3}	Z0Canvas.Top="80"Canvas.Left="150"/>ITPUB个人空间h(W!fU0G+}KF
</Canvas>

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

创建模板

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

<Style.x:Key="RoundButton"TargetType="Button">ITPUB个人空间kYEA"D%C2t,DF
<SetterProperty="Template">
+X.~
XF'p0]?g0<Setter.Value>
-]-y'F*N+cp1@9U3K_j0<ControlTemplateTargetType="Button">ITPUB个人空间8Z%^a{J%\Sa.w
<Gridx:Name="RootElement">
bl`8L	e3luY,R0<RectangleWidth="{TemplateBindingWidth}"Height="{TemplateBindingHeight}"ITPUB个人空间%D1X,w1{^6z
B.f
RadiusX="15"RadiusY="15">ITPUB个人空间~P?:_hu^0z}
<Rectangle.Fill>
_"Aagdj4w0<LinearGradientBrushStartPoint="0,0">ITPUB个人空间,T$q0uZ2]
<GradientStopColor="#FFFFFF"Offset="0.0" />
n`4J\:I~^0<GradientStopColor="#EC04FA"Offset="1.0" />ITPUB个人空间&d"Ps
QgK]9M
</LinearGradientBrush>
2^z$or#s/OT
J$W0</Rectangle.Fill>ITPUB个人空间4m];cA9i:nM
<Rectangle.Stroke>ITPUB个人空间.J1["l+{lS5V
<LinearGradientBrushEndPoint="0.5,1"StartPoint="0.5,0">ITPUB个人空间1G6z'h{:k
_p:TG!{}
<GradientStopColor="#EC04FA"Offset="0" />
/nE|])M4t0<GradientStopColor="#FFFFFF"Offset="1" />
-ac'gkk0R0</LinearGradientBrush>ITPUB个人空间;W-y&w4Zs-Y;A
</Rectangle.Stroke>ITPUB个人空间G3\
v1cfvc_T
</Rectangle>ITPUB个人空间g2wILsF
<ContentPresenter
3R
VrJg}h
x0Content="{TemplateBindingContent}"ITPUB个人空间5QA](Xc
FontSize="{TemplateBindingFontSize}"
(~\$FR$O7bD$g5S0HorizontalContentAlignment="{TemplateBindingHorizontalContentAlignment}"ITPUB个人空间 }A*dV?6\
VJ0}
VerticalContentAlignment="{TemplateBindingVerticalContentAlignment}"ITPUB个人空间BR+wLNmY
Foreground="{TemplateBindingForeground}">
3F)H9d	K6Oo/y&^)c0</ContentPresenter>
F'J%Z:Z;t	]~,c0</Grid>
Q,z+v]!`#eFu0</ControlTemplate>
5u;Ysz"}0</Setter.Value>ITPUB个人空间	i'j+]:A#cj+e-k#j3q!D
</Setter>
Ty
Z2kxp;yEw0</Style>

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

<CanvasBackground="#46461F">
"@"o4[s'n(F/G,l0<Buttonx:Name="button1"Style="{StaticResourceRoundButton}"ITPUB个人空间Si ?MR%E
Canvas.Top="80"Canvas.Left="50"ITPUB个人空间
q^3f*]Az gp
Content="提 交"FontSize="26"
Y{z7^4]/I0HorizontalContentAlignment="Center"
NS+]8n
b1tB+Kt0VerticalContentAlignment="Center"ITPUB个人空间!F	f
v/?
\KJ
Foreground="White"Width="200"Height="60"/>
-s{6o,u([[-h0
1TQ+q"\Oo)lFU"z0<Buttonx:Name="button2"Style="{StaticResourceRoundButton}"ITPUB个人空间}ft8~(]A[4D
Canvas.Top="80"Canvas.Left="260"
8?}Z_GL&C%L
y0Content="取 消"FontSize="26"
|ca0Im&O0HorizontalContentAlignment="Center"ITPUB个人空间.K|[Z/[NQ%E\
VerticalContentAlignment="Center"
)Uj[L}N7UU0Foreground="White"Width="100"Height="100"/>
d3rfQlr
}0</Canvas>

运行时效果如下：
H1w*~od0ITPUB个人空间
?MwRKZ/e|

结束语

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

$|.O]zzNO4[7z0