【李会军】一步一步学Silverlight 2系列（8）：使用样式封装控件观感

概述

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

本文为系列文章第八篇，主要介绍在Silverlight中使用Style元素封装控件观感

Silverlight 支持一种 Style. 机制，它允许我们把控件的属性值封装成可重用的资源。我们可以把这些样式声明保存在独立于页面的其他文件中，然后就可以在一个应用程序中跨控件和页面重用 （甚至跨多个应用程序重用）。在做一些基本定制的场景下，概念上类似于在 HTML 中重用 CSS。

内联样式

内联样式这个概念其实跟我们在HTML中指定元素的样式一样，在XAML中通过属性来设置，如下面这段XAML，我们添加了两个按钮，并在其中设置字体的样式：

<CanvasBackground="#46461F">ITPUB个人空间uQ\K2?V
<ButtonWidth="200"Height="60"Background="Red"ITPUB个人空间;sh[;N2[ Y!I#t[
Canvas.Top="90"Canvas.Left="30"Content="提 交"
p	^,HTf:I1r]~RZ0FontFamily="微软雅黑"ITPUB个人空间^!o(l.XT
FontSize="24"ITPUB个人空间u/A&etYTQzM&m
FontWeight="Bold"
Y5Dm]%z
mpu*@0Foreground="Green"/>ITPUB个人空间Gn~"MW/^
]G%|T
Z~
ITPUB个人空间x_&fwBy
<ButtonWidth="200"Height="60"Background="Red"ITPUB个人空间4a)ig1e6sd7l0`
I,V
Canvas.Top="90"Canvas.Left="260"Content="取 消"
u_.]%o)]+`#]0FontFamily="微软雅黑"ITPUB个人空间 MCp,I9TOh
FontSize="24"ITPUB个人空间F*{(eAdD!e.^(?"L
FontWeight="Bold"ITPUB个人空间v/C4\n7d2Db
Foreground="Red"/>
-}$koF)KpKZt)C0</Canvas>

运行后显示效果如下：ITPUB个人空间HOV!Oe#?fff
ITPUB个人空间 x ]%caeF9[:D

使用内联样式不是一种很好的做法，样式不可重用，页面XAML代码混乱等，这些缺点其实类似于在HTML中直接设置元素的样式。一种推荐的方式是应该使用全局的样式。

全局样式

为了更好使样式能够重用，并且减少XAML中的代码，推荐使用全局样式。在App.xaml中定义两个样式

<Application.Resources>ITPUB个人空间 mQ
yhF
<Style.x:Key="button1"TargetType="Button">ITPUB个人空间][:e5qQ9\8q&M
<SetterProperty="FontFamily"Value="微软雅黑"></Setter>ITPUB个人空间F/@E+fc
<SetterProperty="FontSize"Value="24"></Setter>
uU5w{^$ifR0{	d0<SetterProperty="Foreground"Value="Green"></Setter>ITPUB个人空间2L1}
WHX}B9@:A
<SetterProperty="Background"Value="Red"></Setter>
jO*z`gT1pZ0</Style>
+Y:I
Xl~B&O8b0<Style.x:Key="button2"TargetType="Button">
9b9J!OC
UbYA%f;DC0<SetterProperty="FontFamily"Value="微软雅黑"></Setter>ITPUB个人空间8Ix'I3^'cZP9Ic^
<SetterProperty="FontSize"Value="24"></Setter>ITPUB个人空间l)@9v(V&k|4^r
<SetterProperty="Foreground"Value="Red"></Setter>ITPUB个人空间|Pu4s.Z&S?U
<SetterProperty="Background"Value="Red"></Setter>
k'B9^L6S
X#P0</Style>
9s&DL$F(Bc\;`B0</Application.Resources>

通过Style元素指定，需要设置唯一的一个 Key，类似于CSS中的类名或者ASP.NET 2.0中Skin功能，并且通过TargetType指定该样式将使用在哪类控件上，每一个属性都用Setter来指定。在XAML中，通过 StaticResource标记句法来指定具体的样式：

<CanvasBackground="#46461F">ITPUB个人空间eEIF[(a
<ButtonWidth="200"Height="60"
3g-N$bb2Jc[]+N;HGq&x0Canvas.Top="90"Canvas.Left="30"Content="提 交"
1r;N8rj:goTQ0Style="{StaticResourcebutton1}"/>
.js4cA,u0ITPUB个人空间1Ko^0c!x[5k!fZ
<ButtonWidth="200"Height="60"
4HkbPk8g!]0Canvas.Top="90"Canvas.Left="260"Content="取 消"
M7l4P7x	V
AWR7t0Style="{StaticResourcebutton2}"/>ITPUB个人空间UDm.j]2?
</Canvas>

相比较上面的XAML文件，现在代码已经干净多了，这使得我们可以只专注于应用程序的业务，而无需考虑它的外观（在Beta1中似乎有些属性设置后会报错）。运行后效果如下：ITPUB个人空间-wtY eq"B&W
ITPUB个人空间[+|9pM)_0O

样式重写

定义了全局样式之后，样式能够被重写，即内联样式的优先级高于全局样式。如上面的示例中，我们在XAML中通过属性Foreground指定第一个按钮的前景色为蓝色：

<CanvasBackground="#46461F">
*xtr.m:T,K,fBx7|aI0<ButtonWidth="200"Height="60"
.\.i4Y;d^MdX
Y0Canvas.Top="90"Canvas.Left="30"Content="提 交"
 j6}`1S^Z]I$NO/K0Style="{StaticResourcebutton1}"ITPUB个人空间4V1G?1aH;`{"IUa
Foreground="Blue"
p$HZ,Pt+RS)s0/>ITPUB个人空间;J[wr5u?p0v\;h3d

+c}.^u{!]'i0<ButtonWidth="200"Height="60"ITPUB个人空间5Q"F3p]*?`C
Canvas.Top="90"Canvas.Left="260"Content="取 消"
D	u
e6u2Lv0F0Style="{StaticResourcebutton2}"/>ITPUB个人空间7DfK4A+^7}:s&O9o
</Canvas>

尽管我们在全局样式中指定第一个按钮的前景色为绿色，通过内联样式重写后，它显示为蓝色：ITPUB个人空间I(UK5A\c,wq
ITPUB个人空间#J/@1LwL@

结束语

本文简单的介绍了Silverlight 2中使用样式来封装控件观感，对任何控件都可以使用全局样式进行封装。

ITPUB个人空间3e-ieCI g6_6Fsp