Windows Phone筆記(12)XAML基礎知識

文章目錄

• 1.XAML概述
• 2.使用代碼建立UI元素
• 3.XAML中的屬性繼承
• 4.屬性元素(property-element)文法
• 5.資源集合
• 6.在代碼中引用資源
• 7.使用XAML樣式

1.XAML概述

　　在前面的筆記中我們都是使用Silverlight for Windows Phone架構來開發Windows Phone應用程式，其中我們使用XMAL(可擴充應用程式標記語言 )來描述應用程式的UI，通過在第一篇筆記中我們對XAML進行了簡單的介紹，我們知道：XAML是微軟為構建應用程式使用者介面而建立的一種新的聲明性語言(關於聲明性具體來說就是:XAML 可以通過使用一種語言結構來顯示多個對象之間的分層關係，並使用一種支援型別約定來支援類型擴充，以初始化對象並設定對象的屬性.)，基於並完全相容XML。我們在常規的基於Silverlight的Windows Phone應用開發過程中：

使用聲明性 XAML 標記構建可見使用者介面 (UI) 元素，使用後台代碼用來響應和處理所有使用者輸入及所有由控制項產生的事件。

這和我們在.NET開發中常見的開發模型類似，很好的將程式的後台邏輯和使用者介面的代碼分離，方便了開發過程中UI設計人員的開發人員的相互協作。XAML的文法基於XML，所有只要開發人員具有相應的編程基礎就可以很快的掌握這門語言，但是XAML既然是在XML的基礎上拓展的一門新的聲明性語言，肯定也有它的不同的地方，這也是我們在學習過程中特別需要注意。

 

2.使用代碼建立UI元素

　　使用XMAL標記構建可見的介面(UI)元素並不是我們唯一的選擇，我們也可以通過使用後台代碼來實現，雖然這不是我們常用的方式，但這可以使我們更好的理解XMAL。在.NET中XMAL中的絕大部分的元素都有其相對應的類，這些元素的特徵對應類中的屬性。下面我們通過一個簡單的執行個體來示範如何使用後台代碼構建UI元素。

MainPage.xaml UI的主要部分:

1         <!--ContentPanel - 在此處放置其他內容-->2         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">3             <StackPanel x:Name="TextBlockList">4                 <Button Content="Create BlockText" Height="72" HorizontalAlignment="Center" 5                  Name="btn_CreateBlk"  Click="btn_CreateBlk_Click">6                 </Button>7             </StackPanel>8         </Grid>

 

MainPage.xmal.cs幕後處理部分:

 1         /// <summary> 2         /// 點擊建立TextBlock元素 3         /// </summary> 4         /// <param name="sender"></param> 5         /// <param name="e"></param> 6         private void btn_CreateBlk_Click(object sender, RoutedEventArgs e) 7         { 8             TextBlock newTextBlock = new TextBlock(); 9             newTextBlock.Text = "Hello World";10             newTextBlock.FontSize = 28;11             newTextBlock.HorizontalAlignment = HorizontalAlignment.Center;12             newTextBlock.Margin = new Thickness(0,10,0,0);13 14             this.TextBlockList.Children.Add(newTextBlock);15         }

在上面的樣本程式中我們只要點擊Button按鈕，就可以通過調用其點擊事件在頁面中名為:TextBlockList的容器元素中添加一個TextBlock元素。

 

3.XAML中的屬性繼承

　　我們知道Windows Phone應用程式的架構和頁面階層一般是這樣的:

 如果我們在MainPage.xaml的PhoneApplicationPage標籤中定義這個屬性:  FontStyle="Italic"，我們可以看到在這個標籤中設定的屬性會作用於整個頁面中所有的Textblock元素。這就是被稱為：屬性繼承(Property Inheritance)的特徵(作為silverlight的一個特徵)。

我們也可以通過直接在Textblock中設定文本樣式: <TextBlock FontStyle="Normal" Text="Hello"/>我們可以看到字型又會恢複的預設狀態，這是由於Textblock的本地設定優先權高於屬性繼承，通過這些我們可以明白屬性作用於元素的優先順序是這樣的：

• 本地設定優先權最高
• 樣式的優先順序低於本地設定
• 屬性繼承優先順序置中
• 預設值的優先順序最低

 

4.屬性元素(property-element)文法

通常我們的XAML代碼中通常是這樣設定一個元素的屬性，例如:

1    <TextBlock FontStyle="Normal" Text="Hello" FontSize="36" Foreground="Red"/>

 

 但是我們知道XAML是基於XML的所以我們完全可以根據XML文法將前面的代碼繼續拆分成:

1       <TextBlock Text="Hello" Foreground="Red">2             <TextBlock.FontStyle>Normal</TextBlock.FontStyle>3             <TextBlock.FontSize>36</TextBlock.FontSize>4       </TextBlock>

 和前面達到的效果完全一樣。現在的TextBlock包含了一個名為：TextBlock.FontSize的子項目，在它的起始標籤中間的是它的值，這就是屬性元素(Property-element)文法，這是XAML中非常重要的組成部分，通過引入屬性元素文法可以進一步明確與.NET和XML相關的一些術語:

• 元素對象(object element)——基於XML的.NET對象
• 屬性特徵(property attribute)——通過XML特徵設定的.NET屬性
• 屬性元素(property element)——用XML元素表示的一個.NET屬性

我們需要注意的是:在屬性元素標籤中出現任何其他東西都是非法的,並且不能夠為同一個屬性設定屬性特徵和屬性元素。             

 

5.資源集合

　　在之前我們編寫的Windows Phone程式時的XMAL檔案有很多重複的標記，例如:Margin,HorizontalAlignment,VerticalAlignment等設定，其實我們可以通過類似於HTML中使用CSS的方式，在XAML中使用Silverlight樣式(style)。但是實現Silverlight樣式有一個先決條件:一種更普遍的共用機制:資源(Resrouce)(PS:前面的筆記的資源是指嵌入到應用中的圖片資源)。

　　XMAL資源通常作為一個特殊的.NET類或結構體的執行個體，要麼是一個現有類或者結構體，要麼是自訂類。當一個特定類被定義為XMAL的資源時，系統只會建立一個該類的執行個體，該執行個體將引用在該資源的各個對象之間共用。

　   UIElement派生的任何元素的單個執行個體都不允許被多次使用，所有也就不能夠以資源的形式出現。

為了支援資源的儲存，FrameworkElement定義了一個ResourceDictionary類型的Resources屬性。在我們的APP.xaml檔案中定義了一個為空白的資源片段(Resource範圍內的資源集合可被稱為一個資源片段resource section):

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

在APP.xaml檔案中定義的資源可以在整個應用程式中使用，而在FrameworkElement的Resource集合中定義的資源只能夠在FrameworkElement元素及其子項目中使用。

下面我們來觀察一個具體的樣本——讓所有擁有FontSize屬性的的元素共用同一個資源。首先我們要瞭解該屬性需要知道它是屬於什麼類型的，FontSize屬性屬於Double類型，Double結構體基於C#的double資料類型，定義在System命名空間中，但是在產生的XAML檔案中並沒有這個命名空間，所有我們需要做一下額外的工作：為System命名空間聲明一個XMAL命名空間:

    xmlns:system="clr-namespace:System;assembly=mscorlib"

 

然後，我們就可以聲明添加一個double類型的資源了：

1         <system:Double x:Key="fontsize">2             683         </system:Double>

 

 最後，當然是使用這個定義的資源了，例如為一個TextBlock元素引用這個資源:

   <TextBlock Text="Hello" Foreground="Red"  FontSize="{StaticResource fontsize}"/>

 這裡我們需要注意的是x:Key特徵，每個資源的Key都是唯一的(不同的資源集合可以重用,同時優先順序高的會覆蓋優先順序低的資源)，我們也是通過這個鍵來引用對應的資源。

 

6.在代碼中引用資源

　　通過資源名稱簡單的索引Resourc屬性，我們就可以在代碼中使用XAML資源，但是這必須在InitializeComponent方法調用程式碼後置檔案的建構函式之後，才能夠訪問資源。例如我們在代碼中使用前面小節直接定義在<phone:PhoneApplicationPage.Resources>標籤內定義的資源:

  this.btn.Margin =(Thickness)this.Resources["margin"];

 

 假如在前面元素的Resource集合中找不到具有該名稱的資源，程式將會繼續檢索App類的Resource集合，如何依舊找不到，索引器將返回Null。我們也可以通過使用x:Name的方式來引用資源，這樣做的好處是:名稱將作為一個欄位儲存在自動產生的程式碼中，因此可以像其他欄位一樣引用它,比如我們使用一個共用的畫刷資源:

   this.txtblk.Foreground = brush;

但是注意這有兩個限制條件:

•  1.通過TryConverter建立的(資源)對象不允許使用該(x:Name)元素特徵
•  2.使用x:Name資源，該名稱在XMAL檔案中必須是唯一的。

 

7.使用XAML樣式7.1 瞭解樣式

　　在前面的XAML資源的基礎之上我們可以通過使用XAML樣式進一步重用元素的樣式代碼。XAML樣式基本上是為特定的元素類型分配的屬性集合。XAML樣式有兩個重要的屬性：x:Key(引用的鍵)和TargetType(作用的元素類型)。下面我們來看一段執行個體代碼:

1         <Style x:Key="btnStyle" TargetType="Button">2             <Setter Property="HorizontalAlignment" Value="Center"></Setter>3             <Setter Property="VerticalAlignment" Value="Center"></Setter>4             <Setter Property="Margin" Value="12 96"></Setter>5             <Setter Property="FontSize" Value="30"></Setter>6         </Style>

 

這樣使用定義好的XAML樣式:

1   <Button Content="Create BlockText" Name="button1"   Style="{StaticResource btnStyle}" />

 

在樣式中我們也可以使用其他已經定義好了的資源檔,例如我們已經定義了一個資源:

1         <system:Double x:Key="fontsize">2             683         </system:Double>

 

在樣式中我們可以這樣使用定義好的資源:

1         <Style x:Key="txtblkStyle" TargetType="TextBlock">2             <Setter Property="HorizontalAlignment" Value="Center"></Setter>3             <Setter Property="VerticalAlignment" Value="Center"></Setter>4             <Setter Property="Margin" Value="12 96"></Setter>5             <Setter Property="FontSize" Value="{StaticResource fontsize}"></Setter>6         </Style>

 

7.2 樣式繼承

　　樣式可以通過繼承過程來將強或更改其他樣式，我們可以通過使用Style標籤的BasedOn屬性來繼承已經定義好的Style。例如我們繼承之前定義的x:Key為btnSytle的樣式，並且重新定義兩個屬性，具體的使用方式為:

1         <Style x:Key="btnStyle2" TargetType="Button" BasedOn="{StaticResource btnStyle}">2             <Setter Property="HorizontalAlignment" Value="Left"></Setter>3             <Setter Property="VerticalAlignment" Value="Bottom"></Setter>4         </Style>

這樣除了重新定義的兩個屬性，其他的屬性都被x:Key為btnStyle2的樣式繼承了下來。

 

參考資料:《Programming Windows Phone 7 Microsoft Silverlight Edition》

作者:晴天豬

出處:http://www.cnblogs.com/IPrograming 

本文著作權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文串連，否則保留追究法律責任的權利。

 　　Windows Phone開發人員交流群：79339880，歡迎大家來一起討論交流，共同學習進步。