.NEt专家博客!

【李会军】一步一步学Silverlight 2系列(8):使用样式封装控件观感

上一篇 / 下一篇  2008-04-11 19:27:49

概述

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个人空间nu/BW7GT
<
ButtonWidth="200"Height="60"Background="Red"
d'OD}9V lb{7B0
Canvas.Top="90"Canvas.Left="30"Content="提 交"ITPUB个人空间K-s Q5Y4mj
FontFamily="微软雅黑"
uWS'?eY%F6w?vq0
FontSize="24"ITPUB个人空间g6?i2h4KfC'Q/\ m%Tx
FontWeight="Bold"ITPUB个人空间/EJ,p;O!RlEK[
Foreground="Green"/>
#?QC7|UB+uU3dnI0
H2SKC p}0<
ButtonWidth="200"Height="60"Background="Red"ITPUB个人空间0L1B)W4r3o Q}1C
Canvas.Top="90"Canvas.Left="260"Content="取 消"ITPUB个人空间1l3F L ZoE
FontFamily="微软雅黑"ITPUB个人空间G\`!k/Mn,nS0Ei"e
FontSize="24"
%s~ ]3y(y0
FontWeight="Bold"ITPUB个人空间4A%^wYS@8u6u4a
Foreground="Red"/>ITPUB个人空间.K Nv8`9VG]p
</
Canvas>

运行后显示效果如下:
l3m5PD])?9M0
[$zxV(M0

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

全局样式

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

<Application.Resources>ITPUB个人空间/UTdh1m.F|r+?/w
<
Style.x:Key="button1"TargetType="Button">ITPUB个人空间],]+BFpf:bw@
<
SetterProperty="FontFamily"Value="微软雅黑"></Setter>ITPUB个人空间 qj N$M g\0rV(i
<
SetterProperty="FontSize"Value="24"></Setter>ITPUB个人空间Qt"dsO;B
<
SetterProperty="Foreground"Value="Green"></Setter>ITPUB个人空间%jSJ ?:\&u|G
<
SetterProperty="Background"Value="Red"></Setter>
gI o)s\A%e0O3B0</
Style>ITPUB个人空间;cus e%LP H,v ?
<
Style.x:Key="button2"TargetType="Button">ITPUB个人空间2biB^ nzS6Y1X-b!}
<
SetterProperty="FontFamily"Value="微软雅黑"></Setter>
&E(|$v['oZF0<
SetterProperty="FontSize"Value="24"></Setter>ITPUB个人空间i'p7Y@,Y
<
SetterProperty="Foreground"Value="Red"></Setter>
%P?Za q$Zv$bw0<
SetterProperty="Background"Value="Red"></Setter>ITPUB个人空间-uh4O6A9]s@T6g
</
Style>ITPUB个人空间hX$H8O'i
</
Application.Resources>

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

<CanvasBackground="#46461F">ITPUB个人空间mJqL
L/R2s^
<
ButtonWidth="200"Height="60"
.m [ P Z XdO"C/Y/@~0
Canvas.Top="90"Canvas.Left="30"Content="提 交"
7J)m(J0[*y)V0
Style="{StaticResourcebutton1}"/>
N/QW7J9k0ITPUB个人空间SO`O-eh
<
ButtonWidth="200"Height="60"
f p@)A1A2W+r ZD0
Canvas.Top="90"Canvas.Left="260"Content="取 消"ITPUB个人空间R-H,T1a9O
Style="{StaticResourcebutton2}"/>ITPUB个人空间|&t0{!x]
</
Canvas>

相比较上面的XAML文件,现在代码已经干净多了,这使得我们可以只专注于应用程序的业务,而无需考虑它的外观(在Beta1中似乎有些属性设置后会报错)。运行后效果如下:ITPUB个人空间dIBi#x {#va

7OH/d T{xK0

样式重写

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

<CanvasBackground="#46461F">
2I,Wx l[$l,_0<
ButtonWidth="200"Height="60"
2y\;r'KFT0
Canvas.Top="90"Canvas.Left="30"Content="提 交"ITPUB个人空间"||\S`R7Ro)~
Style="{StaticResourcebutton1}"
o+Z0O!F0\stEv@$iz0
Foreground="Blue"
T.i ryD1Q@o0/>ITPUB个人空间:d"^/fNr
ITPUB个人空间a'` ny:`4cZ @
<
ButtonWidth="200"Height="60"
3ETVC.x/yRdN.|0
Canvas.Top="90"Canvas.Left="260"Content="取 消"
2oCk:\3T,~0
Style="{StaticResourcebutton2}"/>ITPUB个人空间M%u*Rn3[MP*R"Vha
</
Canvas>

尽管我们在全局样式中指定第一个按钮的前景色为绿色,通过内联样式重写后,它显示为蓝色:
`v l{})oL%{9` ~0
~:| W;_rk(TV7MzF^0

结束语

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

作者:TerryLee
m?7`Jd"b7X v)G0出处:http://terrylee.cnblogs.com

ITPUB个人空间)^(U4q CWN,N:d


TAG:

引用 删除 Guest   /   2009-04-26 01:20:23
3
 

评分:0

我来说两句

显示全部

:loveliness: :handshake :victory: :funk: :time: :kiss: :call: :hug: :lol :'( :Q :L ;P :$ :P :o :@ :D :( :)

Open Toolbar