XAML實例教程系列 - 資源(Resources)

在Windows 8 Metro應用開發中，XAML主要用於應用界面設計，無論是開發人員還是設計人員經常會設計自定義用戶界面或者控件行為，其中會涉及到不同方面的代碼設計，例如控件模板，控件樣式，動畫設計等。為了方便設計，管理和重復利用這些通用代碼，XAML提出了資源(Resources)的概念。本篇將介紹 XAML資源(Resource)。

 

XAML資源(Resources)概念 

 

資源(Resources)，其概念和傳統Web應用中的Cascading Style Sheets（CSS）樣式表類似，其目的為了實現對象的重復調用。在Windows 8 Metro應用開發中，資源的概念不僅僅局限於對控件樣式的定義，而且還包括對控件模板的定義，對字體的控制等。在實際項目中，開發人員可以在資源中設置多種不同控件屬性，在多個頁面調用通用資源代碼， 這樣不僅有助於代碼重利用，同時有助於應用維護的一致性。

 

XAML中定義資源的語法格式如下：

 

 

<根元素對象.Resources>

     <資源定義 />

</根元素對象.Resources>

 

 

 

在Windows 8 Metro應用開發中，每個Framework對象都支持Resources屬性,也就是說，可以在不同控件或者頁面定義特定的Resources, 例如，在Grid, Button定義Resources,

    

 
           < 
           Grid 
           > 
           
         
           < 
           Grid.Resources 
           > 
           
            
           < 
           LinearGradientBrush  
           x:Key 
           ="bgBrush" 
            StartPoint 
           ="0.5,0" 
            EndPoint 
           ="0.5,1" 
           > 
           
                 
           < 
           GradientStop  
           Color 
           ="Yellow" 
            Offset 
           ="0.0" 
             
           /> 
           
                 
           < 
           GradientStop  
           Color 
           ="Blue" 
            Offset 
           ="0.75" 
             
           /> 
           
                 
           < 
           GradientStop  
           Color 
           ="Green" 
            Offset 
           ="1.0" 
             
           /> 
           
            
           </ 
           LinearGradientBrush 
           > 
           
         
           </ 
           Grid.Resources 
           > 
           
  
           
         
           < 
           Button 
           > 
           
             
           < 
           Button.Resources 
           > 
           
                 .... 
           
             
           </ 
           Button.Resources 
           > 
           
         
           </ 
           Button 
           > 
           
 
           
 
           </ 
           Grid 
           > 
          

 

XAML資源字典(ResourceDictionary) 

 

XAML資源的概念在一定程度上簡化了XAML頁面代碼，對於管理批量資源代碼集合，XAML還提供<ResourceDictionary>資源字典標記進行聲明。

在Windows 8 Metro應用開發中，所有能夠被定義在資源字典(ResourceDictionary)的對象必須是可被共享使用的。可以被應用於資源字典的對象如下(來自MSDN)：

1. Style and Template

2. Brushes and Colors

3. Animation types (Storyboard)

4. Transforms

5. Matrix and Maxtrix3D 

6. Point 

7. Thickness and CornerRadius

8. XAML intrinsic data types

 

XAML資源字典(ResourceDictionary)的定義

  

在資源字典(ResourceDictionary)中，每一個資源項必須定義x:Key，也就是所謂的唯一標識的資源名稱，這樣可以方便讀取訪問。例如以下代碼，在Grid.Resources中定義資源x:Key = "bgBrush", 我們可以在Button中調用資源x:Key，應用資源到控件。

 

方法一： 在XAML中定義資源字典(ResourceDictionary),

 
           < 
           Grid  
           x:Name 
           ="LayoutRoot" 
           > 
           
         
           < 
           Grid.Resources 
           > 
           
             
           < 
           ResourceDictionary 
           > 
           
                 
           < 
           LinearGradientBrush  
           x:Key 
           ="bgBrush" 
            StartPoint 
           ="0.5,0" 
            EndPoint 
           ="0.5,1" 
           > 
           
                 
           < 
           GradientStop  
           Color 
           ="Yellow" 
            Offset 
           ="0.0" 
             
           /> 
           
                 
           < 
           GradientStop  
           Color 
           ="Blue" 
            Offset 
           ="0.75" 
             
           /> 
           
                 
           < 
           GradientStop  
           Color 
           ="Green" 
            Offset 
           ="1.0" 
             
           /> 
           
             
           </ 
           LinearGradientBrush 
           > 
           
             
           </ 
           ResourceDictionary 
           >    
           
         
           </ 
           Grid.Resources 
           > 
           
         
           < 
           Button  
           x:Name 
           ="btnSubmit" 
            Background 
           =" 
           {StaticResource bgBrush} 
           " 
           
   Height 
           ="60" 
            Width 
           ="120" 
            Margin 
           ="112,23,168,217" 
           /> 
           
 
           </ 
           Grid 
           >  
          

 

 

方法二： 在后台代碼中定義資源字典(ResourceDictionary),

             ResourceDictionary dict =  
            new ResourceDictionary(); 
            
            LinearGradientBrush bgBrush =  
            new LinearGradientBrush(); 
            
            bgBrush.StartPoint =  
            new Point( 
            0.5,  
            0); 
            
            bgBrush.EndPoint =  
            new Point( 
            0.5,  
            1); 
            
            GradientStopCollection stops =  
            new GradientStopCollection(); 
            
            GradientStop stop1 =  
            new GradientStop(); 
            
            stop1.Color = Colors.Yellow; 
            
            stop1.Offset =  
            0.0; 
            
            stops.Add(stop1); 
            
            GradientStop stop2 =  
            new GradientStop(); 
            
            stop2.Color = Colors.Blue; 
            
            stop2.Offset =  
            0.75; 
            
            stops.Add(stop2); 
            
            GradientStop stop3 =  
            new GradientStop(); 
            
            stop3.Color = Colors.Green; 
            
            stop3.Offset =  
            1.0; 
            
            stops.Add(stop3); 
            
            bgBrush.GradientStops = stops; 
            
            dict.Add( 
            " 
            bgBrush 
            ", bgBrush); 
            
             
            this.LayoutRoot.Resources = dict; 
            
             
            this.btnSubmit.Background = (LinearGradientBrush) 
            this.LayoutRoot.Resources[ 
            " 
            bgBrush 
            "];  
           

 

完成后台代碼定義后，應用運行時，將自動應用資源到對象，

< Grid  x:Name ="LayoutRoot"  Background =" {StaticResource ApplicationPageBackgroundThemeBrush} " >
         < Button  x:Name ="btnSubmit"  Height ="60"  Width ="120"  Margin ="112,23,168,217" /> </ Grid > 

 

XAML資源字典(ResourceDictionary)的分類 

 

在WPF開發中，XAML資源可被分為靜態資源(StaticResource)和動態資源(DynamicResource)兩類，但是在Windows 8 Metro應用開發中，XAML僅支持靜態資源(StaticResource)。

根據資源應用域的不同，XAML資源也可被分為FrameworkElement.Resources和Application.Resources。  

 

FrameworkElement.Resources是將資源對象應用於同一個對象樹的不同對象上，也可被稱為即時資源(Immediate Resources), 或者稱為頁面資源(Page Resources)。通常來說，FrameworkElement.Resources會被定義在XAML頁面根元素上。

 

Application.Resources可以被認為是貫串整個應用級別的資源，資源被定義在Application.Resources中，相比 FrameworkElement.Resources而言，Application.Resources應用范圍較廣，其生命周期也比 FrameworkElement.Resources要長。通常來說，Application.Resources會被定已在App.Xaml頁面。例如，在創建Metro應用時， Visual Studio 2012將自動生成App.Xaml頁面，其代碼如下：

 

    < Application.Resources >
         < ResourceDictionary >
             < ResourceDictionary.MergedDictionaries >
                 <!--  
                    Styles that define common aspects of the platform look and feel
                    Required by Visual Studio project and item templates
                  -->
                 < ResourceDictionary  Source ="Common/StandardStyles.xaml" />
             </ ResourceDictionary.MergedDictionaries >
         </ ResourceDictionary >  </ Application.Resources >

 

XAML資源(Resources)引用方法

在”XAML實例教程系列 - 標記擴展(Markup Extensions) "中，曾經介紹過StaticResource（靜態資源）的引用, 這里不在贅述。

需要留意的是，資源作用域是“就近原則”，如果在對象內部定義相關資源，對象會自動忽略Application.Resource，應用“最近”的資源。 

 

XAML合並資源字典屬性(ResourceDictionary.MergedDictionaries) 

為了方便調用外部資源文件，資源字典(ResourceDictionary)提供了MergedDictionaries屬性。 通常來說，合並資源字典屬性會被定義在Application.Resources, 也就是在App.xaml文件中。

在使用合並資源字典屬性時，需要注意資源的查找順序；

 

在ResourceDictionary.MergedDictionaries中定義多個外部資源文件，其查找資源順序時由下往上逆行查找的。例如：

< Application.Resources >
     < ResourceDictionary >
       < SolidColorBrush  Color ="#d0157820"  x:Key ="muddyBrush" />
       < ResourceDictionary.MergedDictionaries >
         < ResourceDictionary  Source ="rd1.xaml"  />
         < ResourceDictionary  Source ="rd2.xaml"  />
       </ ResourceDictionary.MergedDictionaries >
     </ ResourceDictionary > </ Application.Resources > 

在ResourceDictionary.MergedDictionaries中定義兩個資源字典源，rd1.xaml和rd2.xaml。 如果在兩個資源文件中存在相同x:key的資源，rd2.xaml中的資源將被優先采用。 

 

作為外部資源合並，應用本身定義的資源永遠具有較高的優先級，也就是說，如果在本地資源定義中，出現與rd1.xaml,rd2.xaml同名的資源， 本地資源都被會優先采用。

 

主題資源字典屬性(ResourceDictionary.ThemeDictionaries)

在Windows 8 Metro應用開發中，主題資源字典(ThemeDictionaries)是一個特殊的合並資源字典。其目的是為應用提供多主題支持，提高用戶體驗性。創建默認Windows 8 Metro應用時，Visual Studio 2012將自動生成主題資源代碼，例如：

 <ResourceDictionary.ThemeDictionaries>

         < ResourceDictionary  x:Key ="Default" >
             < x:String  x:Key ="BackButtonGlyph"></ x:String >
            < x:String  x:Key ="BackButtonSnappedGlyph" > </ x:String >
        </ ResourceDictionary >

         < ResourceDictionary  x:Key ="HighContrast" >
             < x:String  x:Key ="BackButtonGlyph"></ x:String >
            < x:String  x:Key ="BackButtonSnappedGlyph"></ x:String >
        </ ResourceDictionary > 

        <ResourceDictionary x:Key="GreenTheme">
            <SolidColorBrush x:Key="MyBackgroundBrush" Color="Green"></SolidColorBrush>
        </ResourceDictionary>

        <ResourceDictionary x:Key="BlackTheme">
             <SolidColorBrush x:Key="MyBackgroundBrush" Color="Black"></SolidColorBrush>
        </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

 

與MergedDictionaries屬性相比較，在使用ThemeDictionaries時，需要為每個資源定義一個x:Key.例如上面的代碼中的Default, HighContrast.

 

Windows 8 Metro應用提供默認主題資源，該文件保存在 \(Program Files)\windows kits\8.0\Include\winrt\xaml\design 目錄，

 

 

 
 

對於主題資源字典(ThemeDictionaries)的應用，將在隨后的Windows 8 Metro應用開發實例中詳細介紹。
 

 

 

XAML實例教程系列到這里已經全部結束，這個系列主要是為正在或者將要學習Windows 8 Metro應用開發的新手提供XAML學習幫助，如果你在閱讀中遇到問題，歡迎留言或者郵件討論。
 

 

本篇源代碼下載

(Windows 8  RP & VS2012 RC)

 

XAML實例教程系列：

XAML實例教程系列 - 開篇

XAML實例教程系列 - 對象和屬性

XAML實例教程系列 - 命名空間(NameSpace)

XAML實例教程系列 - 依賴屬性和附加屬性

XAML實例教程系列 - 事件(Event) 

XAML實例教程系列 - 標記擴展(Markup Extensions)
XAML實例教程系列 - 類型轉換器(Type Converter)

XAML實例教程系列 - XAML傳遞參數到值轉換類實例

 

 

 

歡迎大家留言交流，或者加入QQ群交流學習：

22308706(一群) 超級群500人 
37891947(二群) 超級群500人 
100844510(三群) 高級群200人 
32679922(四群) 超級群500人 
23413513(五群) 高級群200人 
32679955(六群) 超級群500人 
88585140(八群) 超級群500人 
128043302(九群 企業應用開發推薦群) 高級群200人 
101364438(十群) 超級群500人 

68435160(十一群 企業應用開發推薦群)超級群500人