這個檔案由遵循“可擴充應用程式標記語言”(XAML)標準的標記語言群組成,正如名字一樣XAML就是基於“可延伸標記語言 (XML)”(XML)的。
大體上說,你用XAML檔案定義頁面所有可視化元素,然後在C#檔案中解決那些用標記語言不能解決的問題,例如計算或是響應使用者輸入。C#檔案總是作為對應的XAML檔案的後台代碼檔案。
這個XAML檔案的根項目是Page,你應該知道它是Windows運行時的一個類。但是注意x:Class屬性:
<Page
x:Class="Hello.MainPage"
這個x:Class屬性只能出現在XAML檔案的根項目上面。這個屬性的意思是:在Hello命名空間定義了一個MainPage類,MainPage類繼承了Page類。它與在C#檔案中定義類是一樣的。
緊接著這個屬性之後跟著的是一個Page類的IsTabStop屬性,這個是用來定製當使用者通過使用鍵盤上的Tab鍵在控制項中導航時的行為的。這個設定不是必要的,因為它在Page類的預設值是false。
接下來是一串XAML命名空間的定義,這些URI並不是指向某個有趣的網頁,而是充當一個由公司或是組織製作的獨一無二的標識。前兩個是最重要的:
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
看到2006這個日期,回憶微軟的WPF簡介,正好是XAML登場的日子。WPF是.NET架構3.0的一部分。在它發行之前,它一直被叫做WinFX,所以winfx會在URI中。在一定程度上說,如果WPF,Silverlight,Windows Phone和Windows運行時都使用所有環境共有的類,屬性,組件,XAML檔案在它們之間是完全相容的。
第一個不帶首碼的命名空間的聲明引用了在Windows運行時中定義的類,結構,枚舉類型,它包含了所有的空間和在XAML檔案中每一個能出現的東西,包括在一些特殊檔案的Page和Grid類。在這個URI中presentation與一個可視的使用者介面有關,它將可以使用XMAL的其它應用區分開來。例如,如果你使用XAML來編寫Windows Workflow Foundation(WF)程式,你應該使用一個以workflow結尾的預設命名空間URI。
第二個命名空間的聲明多了一個x首碼。這裡麵包含XAML自己固有的元素和屬性,在Windows運行時應用中只有九個可用,很顯然,最重要的就是x:Class屬性。
第三個聲明非常有趣:
xmlns:local="using:Hello"
有一個帶有Hello命名空間local首碼。你可以在你的應用建立一些自訂的類,然後用local首碼在XAML中引入它們。如果你需要引用後台程式碼程式庫中的類,你將需要定義另外的XML命名空間聲明,它將自動將這些庫的命名空間的名字和類的名字組合起來。你將在後續的章節中看到究竟是怎麼做的。
剩下的命名空間聲明是為Microsoft Expression Blend準備的。Expression Blend可能會插入它自己的需要其他命名空間聲明的特殊標記,這些應該被Visual Studio編譯器忽略,所以才會有那個Ignorable屬性。對於本書的程式,Page根項目的這三行是可以刪除的。
Page元素有一個子項目叫Grid。這是定義在Windows.UI.Xaml.Controls命名空間的另一個類。Grid在以後會非常的熟悉。因為它可以包含其他的可視對象,所以把它叫做容器。但是因為它繼承了Panel類,更多的時候把它叫做布局。在Windows8應用中關於布局的那些繼承了Panel類的類有著很重要的地位。在MainPage.xaml檔案中,Visual Studio通過XMAL文法已經為你建立好了Grid,還帶有一個背景顏色(事實上是一個畫刷對象)。這些文法我將在第二章“XAML文法”中講解。
一般來說,你可以把一個表格布局(Grid)分成若干行和列來定義一些單元格(這個我將在第五章“控制項互動”中示範它)它更像是HTML表格的改良版本。一個沒有行和列的表格布局叫做“獨立單元格布局”,那也是非常有用的。
為了在Windows運行時中顯示一段話,你得用一個TextBlock(這是在Windows.UI.Xaml.Controls被定義的另一個類)這樣讓我們在獨立單元格布局上放一個TextBlock控制項,然後再設定一些屬性。事實上這些屬性都是TextBlock類中的屬性。
Project: Hello | File: MainPage.xaml(excerpt)
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <TextBlock Text="Hello, Windows 8!" FontFamily="Times New Roman" FontSize="96" FontStyle="Italic" Foreground="Yellow" HorizontalAlignment="Center" VerticalAlignment="Center" /></Grid>
注意 在這本書中,代碼上面有一列名,你可以根據這個標題在下載的本書附件裡面找到代碼。這樣我就可以只引用全部檔案的一部分,但是全部的內容你也可以知道在什麼地方。
這些屬性的順序是無關緊要的,當然縮排也是無關緊要的,如果你比較著急的話,除了Text屬性其他屬性都可以跳過不設定。當你在打代碼的時候,你可以注意到Visual Studio的智能感知功能會補全屬性名稱和可能的值。你可以去選擇你想要的。當你完成了TextBlock,Visual Studio的設計預覽介面會給你一個頁面的預覽圖。
你也可以不打這些代碼,簡單的從Visual Studio的工具箱裡面拖拽一個TextBlock空間,然後在屬性列表裡面設定它的屬性。但是在這本書中我不會這麼做,而是像一個真正的程式員一樣通過代碼來描述程式建立的過程。
按下F5鍵,編譯並運行程式,或是在Debug菜單中選擇開始調試。這種簡單的程式,最好在Visual Studio調試器下運行。如果一切都搞定了,你將看到這個畫面:
TextBlock的HorizontalAlignment(水平對齊)和VerticalAlignment(垂直對齊)屬性被設定為Center。顯然對於程式員來說是沒有必要確定螢幕的尺寸和文本的大小的,你可以將水平對齊設定為靠左對齊,靠右對齊,置中,也可以將垂直對齊設定為靠近頂部,靠近底部來定位TextBlock在Grid中的位置。在第四章“用面板(Panel)呈現”你會看到,Windows運行時支援可視對象精確到像素來定位,但是通常情況下你還是依賴內建的布局功能。
TextBlock控制項是有寬Width和高Height屬性的,但是你不需要非常麻煩的設定兩個屬性。事實上,如果你在這個TextBlock設定寬和高屬性,你可能會發現文本會被剪下一部分或者是幹擾文本在頁面上置中。TextBlock是比你更加知道自己應該有多大。
你可能會在類似平板電腦這種可以支援方向改變的裝置上運行這個程式。如果你這樣做,你會注意到這個頁面的內容會自動根據裝置改變方向和長寬比。Grid,TextBlock和Windows8布局系統會自動來解決這個事情。
停止Hello程式,在Visual Studio中按下Shift+F5,或是在Debug菜單選擇停止調試。你會注意到程式不僅僅是被執行,而且還部署在Windows8中。現在它是可以從開始畫面啟動的。如果你自己建立的程式,它的磁貼可能並不是很好看。但是程式的磁貼都在項目的資來源目錄,你可以自行更改(在下載的檔案裡面的項目都有自己的磁貼)。現在你可以從Windows8開始畫面再一次運行程式。
另一個選擇是你可以在模擬器中運行程式,這樣你可以控制解析度,方向,和一些其他的東西。在Visual Studio工具列,你會看到有一個顯示原生下拉框,把它改成模擬器就OK了。