[WP8.1UI控制項編程]Windows Phone XAML頁面的編譯

標籤：windows phone 8.1

1.1.2 XAML頁面的編譯

    Windows Phone的應用程式項目會通過Visual Studio完成XAML頁面的編譯，在程式運行時會通過直接連結操作載入和解析XAML，將XAML和過程式代碼自動連接起來。如果你不在乎將XAML檔案和過程式代碼融合，那麼只需要把它添加到Visual Studio的Windows Phone項目中來，並用介面中的Build動作來完成編譯即可，一般公用的樣式資源的XAML檔案都是採用這種方式。但是如果要編譯一個XAML檔案並將它與過程式代碼混合，第一步要做的就是為XAML檔案的根項目指定一個子類，可以用XAML語言命名空間中的Class關鍵字來完成，一般Windows Phone的程式頁面是採用這種方式，通常在Windows Phone項目新增的XAML檔案都會自動地產生一個對應的XAML.CS檔案，並且預設地將兩個檔案關聯起來，例如，添加的XAML檔案如下：

    < Page        x:Class="PhoneApp1.MainPage"        ……>        ……省略若干代碼    </ Page>

與XAML檔案關聯起來的XAML.CS檔案如下：

650) this.width=650;" alt="複製代碼" src="http://common.cnblogs.com/images/copycode.gif" />

namespace PhoneApp1{    public sealed partial class MainPage : Page    {    ……省略若干代碼    }}

650) this.width=650;" alt="複製代碼" src="http://common.cnblogs.com/images/copycode.gif" />

    通常我們把與XAML檔案關聯的XAML.CS檔案叫作程式碼後置檔案。如果你引用XAML中的任何一個事件處理常式（通過事件特性，如Button的Click特性），這裡就是我們定義這些事件處理常式的地方。類定義中的partial關鍵字很重要，因為類的實現是分布在多個檔案中的。可能你會覺得奇怪，因為在項目裡面只看到了MainPage.xaml.cs檔案定義了MainPage類，其實MainPage類還在另外一個地方定義了，只是在項目工程裡面隱藏了而已。當我們編譯完Windows Phone的項目時，你會在項目的obj\Debug檔案夾下看到Visual Studio建立的以g.cs為副檔名的檔案，對於每一個XAML檔案，你會找到對應有一個g.cs檔案。例如，如果我們項目中有一個MainPage.xaml檔案，你就會在obj\Debug檔案夾下找到MainPage.g.cs檔案。下面來看一下MainPage.g.cs檔案的結構：

650) this.width=650;" alt="複製代碼" src="http://common.cnblogs.com/images/copycode.gif" />

using System;……namespace PhoneApp1 {    public partial class MainPage : global::Windows.UI.Xaml.Controls.Page {        [global::System.CodeDom.Compiler.GeneratedCodeAttribute("Microsoft.Windows.UI.Xaml.Build.Tasks"," 4.0.0.0")]        (global::Windows.UI.Xaml.Controls.Grid LayoutRoot;        ……        private bool _contentLoaded;        [System.Diagnostics.DebuggerNonUserCodeAttribute()]        public void InitializeComponent() {            if (_contentLoaded) {                return;            }            _contentLoaded = true;            global::Windows.UI.Xaml.Application.LoadComponent(this, new global::System.Uri("ms-appx:///MainPage.xaml"), global::Windows.UI.Xaml.Controls.Primitives.ComponentResourceLocation.Application);            LayoutRoot = (global::Windows.UI.Xaml.Controls. Grid)this.FindName("LayoutRoot");            ……        }    }}

650) this.width=650;" alt="複製代碼" src="http://common.cnblogs.com/images/copycode.gif" />

    從MainPage.g.cs檔案中我們可以看到，MainPage類在這裡還定義了一些控制項和相關的方法，並且InitializeComponent()方法裡面載入和解析了MainPage.xaml檔案MainPage.cs檔案裡面的MainPage()方面裡面調用的InitializeComponent()方法就是在MainPage.g.cs檔案裡面定義的。在xaml頁面中聲明的控制項，通常會在.g.cs中產生對應控制項的內部欄位。實際上這取決於控制項是否有x:Name屬性，只要有這個屬性，都會自動調用FindName方法，用於把欄位和頁面控制項關聯。沒有x:Name屬性，則沒有欄位，這種關聯會有一定的效能浪費，因為是在應用載入控制項的時候，通過LoadComponents方法關聯的，而xaml也是在這個時候動態解析的。

    在項目的obj\Debug檔案夾下，我們還找到了g.i.cs為副檔名的檔案，對於每一個XAML檔案，你也會找到對應有一個g.i.cs檔案，並且這些g.i.cs檔案與對應的g.cs檔案是基本一樣的。那麼這些g.i.cs檔案又有怎樣的含義呢？其實這些g.i.cs檔案並不是在編譯的時候產生的，而是當你建立了XAML檔案的時候就馬上產生，或者你修改了XAML檔案g.i.cs檔案也會跟著改變，而g.cs檔案則是必須要成功編譯了項目之後才會產生的。檔案尾碼中的g表示generated產生的意思，i表示intellisense智能感知的意思，g.i.cs檔案是XAML檔案對應的智能感知檔案，在vs中利用go to definition功能找InitializeComponent方法的實現的時候，進入的就是g.i.cs檔案的InitializeComponent方法裡面。

1.1.3 動態載入XAML

    動態載入XAML是指在程式運行時通過解析XAML格式的字串或者檔案來動態產生UI的效果。通常情況下，Windows Phone的介面元素都是通過直接讀取XAML檔案的內容來呈現的，如上一小節講解的那樣通過XAML檔案和XAML.CS檔案關聯起來編譯，這也是預設的UI實現的方式，但是在某些時候你並不能預先設計好所有的XAML元素，而是需要在程式啟動並執行過程中動態地載入XAML對象，那麼這時候就需要使用到動態載入XAML來實現了。

    在應用程式裡面動態載入XAML需要使用到XamlReader.Load方法來實現，XamlReader 類是為分析 XAML 和建立相應的 Windows Phone 對象樹提供 XAML 處理器引擎，XamlReader.Load 方法可以分析格式良好的 XAML 片段並建立相應的 Windows Phone對象樹，然後返回該對象樹的根。大部分可以再XAML頁面上編寫的代碼，我們都可以通過動態載入XAML的形式來實現，不僅僅是普通的UI控制項，動畫等其他的XAML代碼我們一樣可以動態載入，如：

650) this.width=650;" alt="複製代碼" src="http://common.cnblogs.com/images/copycode.gif" />

        // 一個透明度變化動畫的XAML代碼的字串        private const string FadeInStoryboard =        @"<Storyboard xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"">            <DoubleAnimation                 Duration=""0:0:0.2""                 Storyboard.TargetProperty=""(UIElement.Opacity)""                 To=""1""/>        </Storyboard>";    //使用XamlReader.Load方法載入XAML字串並且解析成動畫對象    Storyboard storyboard = XamlReader.Load(FadeInStoryboard) as Storyboard;

650) this.width=650;" alt="複製代碼" src="http://common.cnblogs.com/images/copycode.gif" />

使用 XamlReader.Load方法動態載入XAML對XAML的字串是有一定的要求的，那麼這些“格式良好的 XAML 片段”必須要符合以下要求：

    （1）XAML 內容字串必須定義單個根項目，使用XamlReader.Load建立的內容只能賦予一個Windows Phone對象，它們是一對一的關係。

    （2）內容字串 XAML 必須是格式良好的 XML，並且必須是可分析 XAML。

    （3）所需的根項目還必須指定某一預設的 XML 命名空間值。這通常是命名空間 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"。

下面給出動態載入XAML的樣本： 示範了使用XamlReader.Load方法載入XAML字串產生一個按鈕和載入XAML檔案產生一個矩形。
    代碼清單1-1：動態載入XAML（原始碼：第1章\Examples_1_1）

650) this.width=650;" alt="複製代碼" src="http://common.cnblogs.com/images/copycode.gif" />

MainPage.xaml檔案主要代碼------------------------------------------------------------------------------------------------------------------        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <StackPanel x:Name="sp_show">                <Button x:Name="bt_addXAML" Content="載入XAML按鈕" Click="bt_addXAML_Click"></Button>            </StackPanel>        </Grid>

650) this.width=650;" alt="複製代碼" src="http://common.cnblogs.com/images/copycode.gif" />

650) this.width=650;" alt="複製代碼" src="http://common.cnblogs.com/images/copycode.gif" />

Rectangle.xaml檔案代碼：被動態載入到程式裡面去的XAML檔案------------------------------------------------------------------------------------------------------------------<Rectangle xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         Height="200" Width="480">    <Rectangle.Fill>        <LinearGradientBrush>            <GradientStop Color="Black" Offset="0"/>            <GradientStop Color="Red" Offset="0.5"/>            <GradientStop Color="Black" Offset="1"/>        </LinearGradientBrush  >    </Rectangle.Fill></Rectangle>

650) this.width=650;" alt="複製代碼" src="http://common.cnblogs.com/images/copycode.gif" />

650) this.width=650;" alt="複製代碼" src="http://common.cnblogs.com/images/copycode.gif" />

MainPage.xaml.cs檔案主要代碼------------------------------------------------------------------------------------------------------------------        // 載入XAML按鈕        private void bt_addXAML_Click(object sender, RoutedEventArgs e)        {            //注意XAML字串裡面的命名空間"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 不能少。            string buttonXAML = "<Button xmlns=‘http://schemas.microsoft.com/winfx/2006/xaml/presentation‘  " +                 " Content=\"載入XAML檔案\"  Foreground=\"Red\"></Button>";            Button btnRed = (Button)XamlReader.Load(buttonXAML);            btnRed.Click += btnRed_Click;            sp_show.Children.Add(btnRed);        }        // 已載入的XAML按鈕關聯的事件        async void btnRed_Click(object sender, RoutedEventArgs e)        {            string xaml = string.Empty;            //載入程式的Rectangle.xaml檔案            StorageFile fileRead = await Windows.ApplicationModel.Package.Current.InstalledLocation.GetFileAsync("Rectangle.xaml");            // 讀取檔案的內容    xaml = await FileIO.ReadTextAsync(fileRead);            // 載入Rectangle            Rectangle rectangle = (Rectangle)XamlReader.Load(xaml);            sp_show.Children.Add(rectangle);        }

650) this.width=650;" alt="複製代碼" src="http://common.cnblogs.com/images/copycode.gif" />

650) this.width=650;" src="http://images.cnitblog.com/i/152755/201406/031803562701975.png" />

本文來源於《深入理解Windows Phone 8.1 UI控制項編程》

原始碼下載：http://vdisk.weibo.com/s/zt_pyrfNHoezI

歡迎關注我的微博@WP林政

WP8.1技術交流群：372552293

[WP8.1UI控制項編程]Windows Phone XAML頁面的編譯