WP8開發學習（4）：Style樣式的四種使用

在Web開發中，我們通過CSS來控制頁面元素的樣式，一般常用三種方式：

1. 內聯樣式表：即直接設置元素的style屬性

2. 嵌入樣式表：即在html頁面上寫一個<style>……..</style> 代碼段，然後設置元素的class 屬性

3. 外部樣式表：即寫一個獨立的.css 文件，然後再html頁面上引入該文件，然後設置元素的class屬性

具體如何操作，這裏就不說了。不懂的去百度一把，絕對會出現一大坨。

同樣的，在WP7開發中，也有類似以上幾種方式設置控件的樣式——開發平臺可以千差萬別，編程思想都是大同小異的。

一，內聯樣式：

直接設置控件的 Height 、Width、Foreground、HorizontalAlignment、VerticalAlignment 等屬性。以設置一個Botton控件的樣式爲例，如：

<Grid x:Name="ContentPanel" >
<Button Content="Button" Name="btnDemo" 

                    Height="72" 

                    Width="150" 

                    Foreground="White" 

                    Background="Blue" 

                    HorizontalAlignment="Left" 

                    VerticalAlignment="Top" 

                    Margin="170,132,0,0" 

                    Grid.Row="1" />
        </Grid>

這種方式比較簡單，但是代碼不能複用。

二，嵌入樣式：

在頁面<phone:PhoneApplicationPage.Resources> 節點下添加樣式，然後在需要的控件上設置Style 屬性。還是以上面那個Botton控件爲例。

1，在頁面<phone:PhoneApplicationPage.Resources>節點下添加一個Key值叫“BtnStyle”的樣式

  <phone:PhoneApplicationPage.Resources>

        <Style x:Key="BtnStyle"  TargetType="Button">

            <Setter Property="Height" Value="72" />

            <Setter Property="Width" Value="150" />

            <Setter Property="Foreground" Value="White" />

            <Setter Property="Background" Value="Blue" />

            <Setter Property="HorizontalAlignment" Value="Left" />

            <Setter Property="VerticalAlignment" Value="Top" />

        </Style>

    </phone:PhoneApplicationPage.Resources>

2，設置Botton 控件的Style 屬性爲 "{StaticResource BtnStyle}"

   <Grid x:Name="ContentPanel" >

            <Button Content="Button" Name="btnDemo" 

                   Style="{StaticResource BtnStyle}"

                    Margin="170,132,0,0"  />

   </Grid>

解釋一下，TargetType="Button" 指定了該樣式適用於Botton類型的控件，Key="BtnStyle" 如果不設置該值，則該樣式將適用於所有的Botton 控件，而設置了其值爲“BtnStyle”，則只用於設置了 Style="{StaticResource BtnStyle}" 的Botton控件。這就好比CSS中的元素選擇器和類選擇器。

這種方式可以使得單個頁面上的控件能夠複用一個樣式，比第一種方式面向對象了一步。

三，外聯樣式：

1,新建一個.xaml資源文件,如/Resources/BtnStyle.xaml

2, 在BtnStyle.xaml文件裏編寫樣式代碼

BtnStyle.xaml: 
<ResourceDictionary

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  xmlns:System="clr-namespace:System;assembly=mscorlib">

    <Style x:Key="BtnStyle" TargetType="Button">

        <Setter Property="Height" Value="72" />

        <Setter Property="Width" Value="150" />

        <Setter Property="Foreground" Value="White" />

        <Setter Property="Background" Value="Blue" />

        <Setter Property="HorizontalAlignment" Value="Left" />

        <Setter Property="VerticalAlignment" Value="Top" />

    </Style>
</ResourceDictionary>

3，在App.xaml文件的<Application.Resources>

或者普通頁面的<phone:PhoneApplicationPage.Resources>

或者用戶控件的 <UserControl.Resources> 節點下

添加相應的ResourceDictionary，配置引用BtnStyle.xaml：

app.xaml:
    <Application.Resources> 

         <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>

                <ResourceDictionary Source="Resources/BtnStyle.xaml"/>

            <!--<ResourceDictionary Source="Resources/BtnStyle2.xaml"/>

                <ResourceDictionary Source="Resources/BtnStyle3.xaml"/>-->

            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>

    </Application.Resources>

或者MainPage.xaml：
<phone:PhoneApplicationPage.Resources>

        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>

                <ResourceDictionary Source="Resources/BtnStyle.xaml"/>

            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>

</phone:PhoneApplicationPage.Resources>

<ResourceDictionary.MergedDictionaries>節點下可以添加多個資源文件

這種方式相比前面兩種使得樣式和結構又更進一步分離了。

在App.xam引用，是全局的，可以使得一個樣式可以在整個應用程序中能夠複用。在普通頁面中引用只能在當前頁面上得到複用。

4，設置Botton 控件的Style 屬性爲"{StaticResource BtnStyle}" 和上面的一樣。

四，用C#代碼動態加載資源文件並設置樣式

1，新建資源文件：同上面的1，2兩步。

2，在後臺編寫代碼

     ResourceDictionary resourceDictionary = new ResourceDictionary();
     Application.LoadComponent(resourceDictionary, new Uri("/PhoneApp1;component/Resources/BtnStyle.xaml", UriKind.Relative));

     Application.Current.Resources.MergedDictionaries.Add(resourceDictionary);

     //以上幾行代碼表示將我們自定義的樣式加載到應用程序的資源字典中。
     this.btnDemo.SetValue(Button.StyleProperty, Application.Current.Resources["BtnStyle"]);