windows phone (12) 小試自定義樣式

樣式在BS開發中經常用到，在wp中系統也提供了解決辦法，就是對設置的樣式的一種資源共享，首先是共享資源的位置，它是在App類中，之前我們已經有介紹到設置公共屬性存放臨時數據，可參考windows phone 三種數據共享的方式(8)，同樣共享的樣式我們也在app類中實現，系統在App.xaml文件中已經給我們提供了Resources集合：

             <!--應用程序資源--> 
          
    <Application.Resources> 
          
         
          
    </Application.Resources> 
         

 我們只需要在上面標簽中加入我們自定義的樣式即可，適用於此資源的對象是有FrameworkElement派生的類，此類派生類的列表如下：

 

  Microsoft.Internal.Pivot.Controls.VisualTreeGraft
         System.Windows.Controls.Border
         System.Windows.Controls.ContentPresenter
         System.Windows.Controls.Control
         System.Windows.Controls.DrawingSurface
         System.Windows.Controls.Image
         System.Windows.Controls.ItemsPresenter
         System.Windows.Controls.MediaElement
         System.Windows.Controls.MultiScaleImage
         System.Windows.Controls.Panel
         System.Windows.Controls.Primitives.Popup
         System.Windows.Controls.RichTextBlock
         System.Windows.Controls.RichTextBlockOverflow
         System.Windows.Controls.TextBlock
         System.Windows.Controls.Viewbox
         System.Windows.Controls.WebBrowser
         System.Windows.Documents.Glyphs
         System.Windows.Shapes.Shape

 

 以上類或者以上類中派生的類都可以使用此共享資源，這里是指自定義樣式，接下來按照上一篇內容的做法，我們給內容區域的Textblock設置前景色，所以在App.xaml 自定義樣式可以這樣：

            <!--應用程序資源--> 
          
    <Application.Resources> 
          
        <LinearGradientBrush x:Key= 
          " 
          lgBrush 
          "> 
          
            <GradientStop Offset= 
          " 
          0 
          " Color= 
          " 
          AliceBlue 
          "></GradientStop> 
          
            <GradientStop Offset= 
          " 
          1 
          " Color= 
          " 
          BurlyWood 
          "></GradientStop> 
          
        </LinearGradientBrush> 
          
    </Application.Resources> 
         

 x:Key特性是唯一標示該資源的一個鍵名，在共享資源中必須唯一；自定義樣式定義好了，怎么使用那，比較繁瑣的做法是這樣，不提倡：

           <TextBlock x:Name= 
          " 
          tbContent 
          " Text= 
          " 
          顯示樣式 
          " HorizontalAlignment= 
          " 
          Center 
          " VerticalAlignment= 
          " 
          Center 
          "> 
          
            <TextBlock.Foreground> 
          
                <StaticResource ResourceKey= 
          " 
          lgBrush 
          "></StaticResource> 
          
            </TextBlock.Foreground> 
          
        </TextBlock> 
         

 比較常用的書寫是這樣：

             <TextBlock x:Name= 
          " 
          tbContent 
          " Text= 
          " 
          顯示樣式 
          " HorizontalAlignment= 
          " 
          Center 
          " VerticalAlignment= 
          " 
          Center 
          " Foreground= 
          " 
          {StaticResource lgBrush} 
          "> 
          
            </TextBlock> 
         

 可以看到這里有個大括號，它就是xaml標記擴展，在xaml標記擴展中是不能使用引號的，比如這里的lgBrush不能使用引號；上面兩種方法實現的效果一樣：即

此外我們還可以看到MainPage類在xaml文件中已經定義了Foreground,但是在tbContent中我們依然看到了我們自定義的顏色，這說明樣式設置的優先級高於繼承來的樣式的優先級；以上兩種方法是實現在xaml文件中對樣式的使用，我們也可以在隱藏文件（.cs）進行訪問，但是必須是在構造函數完成之后，例如我們可以這樣訪問剛剛定義的樣式：

 

 
           
           using System; 
           
 
           using System.Collections.Generic; 
           
 
           using System.Linq; 
           
 
           using System.Net; 
           
 
           using System.Windows; 
           
 
           using System.Windows.Controls; 
           
 
           using System.Windows.Documents; 
           
 
           using System.Windows.Input; 
           
 
           using System.Windows.Media; 
           
 
           using System.Windows.Media.Animation; 
           
 
           using System.Windows.Shapes; 
           
 
           using Microsoft.Phone.Controls; 
           
 
           
 
           namespace ShareStyle 
           
{ 
           
     
           public  
           partial  
           class MainPage : PhoneApplicationPage 
           
    { 
           
         
           // 
            構造函數 
           
         
           public MainPage() 
           
        { 
           
            InitializeComponent(); 
           
            LinearGradientBrush lgBrush = (LinearGradientBrush) 
           this.Resources[ 
           " 
           lgBrush 
           "]; 
           
            TextBlock tb =  
           new TextBlock(); 
           
            tb.Name =  
           " 
           tbName 
           "; 
           
            tb.VerticalAlignment = VerticalAlignment.Center; 
           
            tb.HorizontalAlignment = HorizontalAlignment.Center; 
           
            tb.Text =  
           " 
           隱藏代碼實例化的 
           "; 
           
            tb.Foreground = lgBrush; 
           
             
           this.ContentPanel.Children.Add(tb); 
           
            
           
        } 
           
    } 
           
} 
           
         

如果想使用該樣式的話，就像上面的代碼實例化樣式，並設置Textblock的前景色為lgBrush，還有另一種寫法是將自定義樣式中的x:Key改為x:Name，隱藏文件中設置前景色就可以是這樣：（此處有疑問：根據教材中的說法，我怎么也獲取不到設置的顏色）

 tb.Foreground = lgBrush;

 不需要實例化該自定義顏色，需要注意的是如果使用x:Name資源，該名稱必須是在xaml文件中保持唯一性；

---

 上面的案例是說明怎么自定義某個屬性（Foreground ）的樣式，下面是為特定的元素定義樣式集合

           <phone:PhoneApplicationPage> 
          
<phone:PhoneApplicationPage.Resources> 
          
        <Style x:Key= 
          " 
          tbStyle 
          " TargetType= 
          " 
          TextBlock 
          "> 
          
 
          
                     <Setter Property="HorizontalAlignment" Value="Center"></Setter> 
                  </Style> 
          
    </phone:PhoneApplicationPage.Resources> 
          
</phone:PhoneApplicationPage> 
         

 上面實例代碼中x:Key表示鍵名，在使用該樣式的時候會用到，TargetType是指此樣式的使用對象元素，Style標簽中Setter標簽是設置適用此樣式的元素屬性；

實例代碼：

           <phone:PhoneApplicationPage> 
          
    <phone:PhoneApplicationPage.Resources> 
          
        <Style x:Key= 
          " 
          tbStyle 
          " TargetType= 
          " 
          TextBlock 
          "> 
          
            <Setter Property= 
          " 
          HorizontalAlignment 
          " Value= 
          " 
          Center 
          "></Setter> 
          
            <Setter Property= 
          " 
          HorizontalAlignment 
          " Value= 
          " 
          Center 
          "></Setter> 
          
            <Setter Property= 
          " 
          Foreground 
          "> 
          
                <Setter.Value> 
          
                    <LinearGradientBrush> 
          
                        <GradientStop Offset= 
          " 
          0.2 
          " Color= 
          " 
          Brown 
          "></GradientStop> 
          
                        <GradientStop Offset= 
          " 
          0.7 
          " Color= 
          " 
          DarkBlue 
          "></GradientStop> 
          
                    </LinearGradientBrush> 
          
                </Setter.Value> 
          
            </Setter> 
          
        </Style> 
          
    </phone:PhoneApplicationPage.Resources> 
          
</phone:PhoneApplicationPage> 
         

 在TextBlock元素中的使用xaml標記擴展得到該樣式：

<TextBlock x:Name= " tbContent " Text= " 顯示樣式 " HorizontalAlignment= " Center " VerticalAlignment= " Center " Style= " {StaticResource tbStyle} "  />

 得到的效果是這樣子的：