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)進行訪問,但是必須是在 構造函數完成之後,例如我們可以這樣訪問剛剛定義的樣式:

 

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

 得到的效果是這樣子的:

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章