概述
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个人空间,\T zI4[,^
<ButtonWidth="200"Height="60"Background="Red"
e^-a6M*nrA0D[0Canvas.Top="90"Canvas.Left="30"Content="提 交"
9bP|hB1__$k0FontFamily="微软雅黑"
`,n-R&ZW#W1@fk!{G0FontSize="24"
i%c:Xe}p0FontWeight="Bold"ITPUB个人空间.g-jzcI%l?1y [
Foreground="Green"/>
@&Qb!^vX3oM1aJ0ITPUB个人空间h/Ot0hb:k5~
<ButtonWidth="200"Height="60"Background="Red"ITPUB个人空间 cmoD{
Canvas.Top="90"Canvas.Left="260"Content="取 消"
`a1|tqu+j0FontFamily="微软雅黑"
M j6^9a)v!c?-O0FontSize="24"ITPUB个人空间 b;I!wSD{Yjv!w
FontWeight="Bold"ITPUB个人空间W)B)r @3b$J7U_%uN
Foreground="Red"/>ITPUB个人空间Z2m3Wj/R.c4B(q
</Canvas>
运行后显示效果如下:
,iwlt.v^0
ITPUB个人空间x3m ^&sNw$u~,T
使用内联样式不是一种很好的做法,样式不可重用,页面XAML代码混乱等,这些缺点其实类似于在HTML中直接设置元素的样式。一种推荐的方式是应该使用全局的样式。
全局样式
为了更好使样式能够重用,并且减少XAML中的代码,推荐使用全局样式。在App.xaml中定义两个样式
<Application.Resources>ITPUB个人空间l(l(UkT#zC
<Style.x:Key="button1"TargetType="Button">ITPUB个人空间v:BXL |8K%s8Fg0gR
<SetterProperty="FontFamily"Value="微软雅黑"></Setter>ITPUB个人空间
E-F8W3hS1C0Y.[_.u
<SetterProperty="FontSize"Value="24"></Setter>
te%Q.^.{T&f O*K
it0<SetterProperty="Foreground"Value="Green"></Setter>
%x1g1n ?S3da0<SetterProperty="Background"Value="Red"></Setter>
.UAf;x!v0T+`0</Style>ITPUB个人空间&k;J-QR,J-l
_6z3b
<Style.x:Key="button2"TargetType="Button">
}5V;`
DE0<SetterProperty="FontFamily"Value="微软雅黑"></Setter>
D2Po.D^ad'J;R0<SetterProperty="FontSize"Value="24"></Setter>
3W(^lB~f z
sx0`:K0<SetterProperty="Foreground"Value="Red"></Setter>ITPUB个人空间W R.F/`PT%[z
<SetterProperty="Background"Value="Red"></Setter>ITPUB个人空间*s'dZ"T]&iN
</Style>ITPUB个人空间)`,uDRe*O
</Application.Resources>
通过Style元素指定,需要设置唯一的一个
Key,类似于CSS中的类名或者ASP.NET
2.0中Skin功能,并且通过TargetType指定该样式将使用在哪类控件上,每一个属性都用Setter来指定。在XAML中,通过
StaticResource标记句法来指定具体的样式:
<CanvasBackground="#46461F">ITPUB个人空间LainU
<ButtonWidth="200"Height="60"
-m6{ go!C;B0Canvas.Top="90"Canvas.Left="30"Content="提 交"ITPUB个人空间;x&aef4H
Style="{StaticResourcebutton1}"/>
9z@%tv4h1z0
EC!]
c}0<ButtonWidth="200"Height="60"
,CBh'j/SI0Canvas.Top="90"Canvas.Left="260"Content="取 消"ITPUB个人空间D#Q:?8]/^{
Style="{StaticResourcebutton2}"/>
,[ko`t2M*^p0</Canvas>
相比较上面的XAML文件,现在代码已经干净多了,这使得我们可以只专注于应用程序的业务,而无需考虑它的外观(在Beta1中似乎有些属性设置后会报错)。运行后效果如下:ITPUB个人空间M-cB)@0`(c#`_B
ITPUB个人空间 ?GlB |2o KV
样式重写
定义了全局样式之后,样式能够被重写,即内联样式的优先级高于全局样式。如上面的示例中,我们在XAML中通过属性Foreground指定第一个按钮的前景色为蓝色:
<CanvasBackground="#46461F">
Q3c{~6t!S+PE0<ButtonWidth="200"Height="60"
%~F@d V+ANfxm1h0Canvas.Top="90"Canvas.Left="30"Content="提 交"
:T8yU-Y!PC%x0Style="{StaticResourcebutton1}"
1@qX3j.} j3U0Foreground="Blue"
[mJ,}l;T}0/>
a4_.|wU;[)D(y"?0
kiqjL0<ButtonWidth="200"Height="60"
|q%I"P8Ohux0Canvas.Top="90"Canvas.Left="260"Content="取 消"
t Z[+o JQ9C0Style="{StaticResourcebutton2}"/>
s t_uwP%s5vl0</Canvas>
尽管我们在全局样式中指定第一个按钮的前景色为绿色,通过内联样式重写后,它显示为蓝色:
O%[
cPOr#Zlb0
M1z#h7ia%`0
结束语
本文简单的介绍了Silverlight 2中使用样式来封装控件观感,对任何控件都可以使用全局样式进行封装。
ITPUB个人空间SmC{Arr)^