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

本文轉載自查看原文 2012-03-23 11:21 4132 樣式/ Win Phone/ ResourceDictionary/ Style/ 資源/ Win Phone 7/ 分離

在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.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"]);

原文地址： http://www.cnblogs.com/xumingxiang/archive/2012/03/23/2413342.html

作者 : 徐明祥
出處： http://www.cnblogs.com/xumingxiang
版權：本文版權歸作者和博客園共有
轉載：歡迎轉載，為了保存作者的創作熱情，請按要求【轉載】，謝謝
要求：未經作者同意，必須保留此段聲明；必須在文章中給出原文連接；否則必究法律責任

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 WP7應用開發筆記-插曲小心使用MessageBox Windows Phone 7(WP7)開發在ViewModel中使用NavigationService WP7應用開發筆記繼承BitmapSource並使用獨立存儲來緩存遠程的圖片 wp7資源調用 WP7 條碼識別 ArcGIS中的style樣式的使用 Windows Phone 7(WP7)開發 “后退按鍵” 與 “在OnNavigationTo中處理QueryString” OpenLayer學習之style樣式的學習筆記 WP7 電話轉發應用 MessageTel WP7:模擬開始屏幕Tile漂動效果