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}"  />

得到的效果是這樣子的：