Silverlight 2 Beta 1版本發(fā)布了，無(wú)論從Runtime還是Tools都給我們帶來(lái)了很多的驚喜，如支持框架語(yǔ)言Visual Basic, Visual C#, IronRuby, Ironpython，對(duì)JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步學(xué)Silverlight 2系列》文章帶您快速進(jìn)入Silverlight 2開發(fā)。 本文為系列文章第八篇，主要介紹在Silverlight中使用Style元素封裝控件觀感。 1.內(nèi)聯(lián)樣式 2.全局樣式 3.樣式重寫

概述

Silverlight 2 Beta 1版本發(fā)布了，無(wú)論從Runtime還是Tools都給我們帶來(lái)了很多的驚喜，如支持框架語(yǔ)言Visual Basic, Visual C#, IronRuby, Ironpython，對(duì)JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步學(xué)Silverlight 2系列》文章帶您快速進(jìn)入Silverlight 2開發(fā)。

本文為系列文章第八篇，主要介紹在Silverlight中使用Style元素封裝控件觀感

Silverlight 支持一種 Style 機(jī)制，它允許我們把控件的屬性值封裝成可重用的資源。我們可以把這些樣式聲明保存在獨(dú)立于頁(yè)面的其他文件中，然后就可以在一個(gè)應(yīng)用程序中跨控件和頁(yè)面重用（甚至跨多個(gè)應(yīng)用程序重用）。在做一些基本定制的場(chǎng)景下，概念上類似于在 HTML 中重用 CSS。

內(nèi)聯(lián)樣式

內(nèi)聯(lián)樣式這個(gè)概念其實(shí)跟我們?cè)贖TML中指定元素的樣式一樣，在XAML中通過(guò)屬性來(lái)設(shè)置，如下面這段XAML，我們添加了兩個(gè)按鈕，并在其中設(shè)置字體的樣式：

<Canvas Background="#46461F">
    <Button Width="200" Height="60" Background="Red"
            Canvas.Top="90" Canvas.Left="30" Content="提 交"
            FontFamily="微軟雅黑"
            FontSize="24"
            FontWeight="Bold"
            Foreground="Green"/>
    
    <Button Width="200" Height="60" Background="Red"
            Canvas.Top="90" Canvas.Left="260" Content="取 消"
            FontFamily="微軟雅黑"
            FontSize="24"
            FontWeight="Bold"
            Foreground="Red"/>
</Canvas>

運(yùn)行后顯示效果如下：

使用內(nèi)聯(lián)樣式不是一種很好的做法，樣式不可重用，頁(yè)面XAML代碼混亂等，這些缺點(diǎn)其實(shí)類似于在HTML中直接設(shè)置元素的樣式。一種推薦的方式是應(yīng)該使用全局的樣式。

全局樣式

為了更好使樣式能夠重用，并且減少XAML中的代碼，推薦使用全局樣式。在App.xaml中定義兩個(gè)樣式

<Application.Resources>
    <Style x:Key="button1" TargetType="Button">
        <Setter Property="FontFamily" Value="微軟雅黑"></Setter>
        <Setter Property="FontSize" Value="24"></Setter>
        <Setter Property="Foreground" Value="Green"></Setter>
        <Setter Property="Background" Value="Red"></Setter>
    </Style>
    <Style x:Key="button2" TargetType="Button">
        <Setter Property="FontFamily" Value="微軟雅黑"></Setter>
        <Setter Property="FontSize" Value="24"></Setter>
        <Setter Property="Foreground" Value="Red"></Setter>
        <Setter Property="Background" Value="Red"></Setter>
    </Style>
</Application.Resources>

通過(guò)Style元素指定，需要設(shè)置唯一的一個(gè)Key，類似于CSS中的類名或者ASP.NET 2.0中Skin功能，并且通過(guò)TargetType指定該樣式將使用在哪類控件上，每一個(gè)屬性都用Setter來(lái)指定。在XAML中，通過(guò)StaticResource標(biāo)記句法來(lái)指定具體的樣式：

<Canvas Background="#46461F">
    <Button Width="200" Height="60"
            Canvas.Top="90" Canvas.Left="30" Content="提 交"
            Style="{StaticResource button1}"/>
    
    <Button Width="200" Height="60"
            Canvas.Top="90" Canvas.Left="260" Content="取 消"
            Style="{StaticResource button2}"/>
</Canvas>

相比較上面的XAML文件，現(xiàn)在代碼已經(jīng)干凈多了，這使得我們可以只專注于應(yīng)用程序的業(yè)務(wù)，而無(wú)需考慮它的外觀（在Beta1中似乎有些屬性設(shè)置后會(huì)報(bào)錯(cuò)）。運(yùn)行后效果如下：

樣式重寫

定義了全局樣式之后，樣式能夠被重寫，即內(nèi)聯(lián)樣式的優(yōu)先級(jí)高于全局樣式。如上面的示例中，我們?cè)赬AML中通過(guò)屬性Foreground指定第一個(gè)按鈕的前景色為藍(lán)色：

<Canvas Background="#46461F">
    <Button Width="200" Height="60"
            Canvas.Top="90" Canvas.Left="30" Content="提 交"
            Style="{StaticResource button1}"
            Foreground="Blue"
            />
    
    <Button Width="200" Height="60"
            Canvas.Top="90" Canvas.Left="260" Content="取 消"
            Style="{StaticResource button2}"/>
</Canvas>

盡管我們?cè)谌謽邮街兄付ǖ谝粋€(gè)按鈕的前景色為綠色，通過(guò)內(nèi)聯(lián)樣式重寫后，它顯示為藍(lán)色：

結(jié)束語(yǔ)

本文簡(jiǎn)單的介紹了Silverlight 2中使用樣式來(lái)封裝控件觀感，對(duì)任何控件都可以使用全局樣式進(jìn)行封裝。

下一篇：一步一步學(xué)Silverlight 2系列（9）：使用控件模板