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

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文件以下：

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

    一般咱們把與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文件的結構：

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"); 
           ……
        }
    }
}

    從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代碼咱們同樣能夠動態加載，如：

        // 一個透明度變化動畫的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;

使用 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）

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>

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>

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);
        }

本文來源於《深刻理解Windows Phone 8.1 UI控件編程》

源代碼下載：http://vdisk.weibo.com/s/zt_pyrfNHoezI

歡迎關注個人微博@WP林政

WP8.1技術交流羣：372552293