概述

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，我們添加了兩個按鈕，并在其中設置字體的樣式：

<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>

運行后顯示效果如下：

使用內聯樣式不是一種很好的做法，樣式不可重用，頁面XAML代碼混亂等，這些缺點其實類似于在HTML中直接設置元素的樣式。一種推薦的方式是應該使用全局的樣式。

全局樣式

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

<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>

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

<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文件，現在代碼已經干凈多了，這使得我們可以只專注于應用程序的業務，而無需考慮它的外觀（在Beta1中似乎有些屬性設置后會報錯）。運行后效果如下：

樣式重寫

定義了全局樣式之后，樣式能夠被重寫，即內聯樣式的優先級高于全局樣式。如上面的示例中，我們在XAML中通過屬性Foreground指定第一個按鈕的前景色為藍色：

<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>

盡管我們在全局樣式中指定第一個按鈕的前景色為綠色，通過內聯樣式重寫后，它顯示為藍色：

結束語

本文簡單的介紹了Silverlight 2中使用樣式來封裝控件觀感，對任何控件都可以使用全局樣式進行封裝。

NET技術：一步一步學Silverlight ：使用樣式封裝控件觀感，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。