天天看點

一步一步學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,我們添加了兩個按鈕,并在其中設定字型的樣式:

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

運作後顯示效果如下:

一步一步學Silverlight 2系列(8):使用樣式封裝控件觀感

​​

使用内聯樣式不是一種很好的做法,樣式不可重用,頁面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中似乎有些屬性設定後會報錯)。運作後效果如下:

一步一步學Silverlight 2系列(8):使用樣式封裝控件觀感

​​

樣式重寫

定義了全局樣式之後,樣式能夠被重寫,即内聯樣式的優先級高于全局樣式。如上面的示例中,我們在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系列(8):使用樣式封裝控件觀感

​​

結束語

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

繼續閱讀