Q:
曾經看過MSDN上基建於Avalon的軟件
3D介面實在太震撼.但好像雖然一種叫XAML的語言實現.
XAML, 我只看過Adobe 的Flex使用過.
想問問XAML其實是什麼東東?
A:
XAML 是一種用 XML 宣告的方式來撰寫 Windows 應用程式的方法 .
原名好像叫 Extensible Application Markup Language (X 的用字不確定是不是這個,要查一下)
它可以讓你用簡單的標記方法,就如同用 HTML 寫網頁一樣的開發自己的 Windows Application.
這也就是說,設計 Windows 應用程式介面的工作可以轉給美工來做了 XD
未來會有個 Microsoft Expression Interactive Designer 工具來做這件事 .
ps: Avalon 現在已正名為 Windows Presentation Foundation
Q:
但XAML結構雖然類似XML,但是我看過WPF的sample,好像會有些語法存在.
若照大大所說,介面上是用XAML控制的話,那微軟VS2005怎樣配合.NET 3.0?
一直以來介面上設計,都是可視性的.
因為聽說Win Vista已內建.NET 3.0,故我想現有.NET程式員有一種突如奇來的學習.NET 3.0迫切性
有點擔心,新手至中手程度的,是不是真的能Handle .NET 3.0.....
太快了, 2.0才推出沒到1年,Atlas還在學習,又要學XAML,真的太苦@@
A:介面確實是可視化的,到處可支持的vIsta程式的AP 可可使用,就簡化不必特意去學它,除非你要開發Avalon的軟件
程式設計人員:工具依然是VS2005,下載相關的功能後就能夠直接在VS2005裡面編輯
美術設計人員:會有另外的工具名為【Expression】讓美術設計人員編輯
而且重點是:
無論使用VS2005或者Expression編輯的XAML是互通的,這可以讓美術設計人員在開發階段過程中可以直接參與,避免程式設計人員與美術編輯所無法搭配造成來來回回的修正
^_^
大多用Avalon建立未來的Windows用戶界面數開發人員對於即將到來的Windows Vista[/b](以前稱為
Longhorn)中的兩個特性很感興趣,其中一個就是Avalon[/b]。Avalon[/b]是WinFX中顯示子系統類庫的代號,它是Vista[/b]/Longhorn中新的應用程式編程接頭(API)。Avalon[/b]由一個顯示引擎和一個受控代碼框架元件組成。你可以使用Avalon[/b]建立逼真的Longhorn應用程式,把應用程式
UI、文檔和媒體內容混合在一起。
儘管Vista[/b]大約還需要過一年時間才會發佈(預計發佈時間是2006年末),但是微軟最近還是在Beta1 RC中為公眾提供了Avalon[/b]和Indigo(開發者感興趣的另一個特性)的一個版本。任何希望在Windows XP上測試Avalon[/b]和Indigo特性的人員都可以下載這個RC beta版,並學習Avalon[/b]和Indigo提供的重大特性。
起步
如果你希望在Windows XP上試驗Avalon[/b],需要安裝下面一些內容:
·微軟預發佈的軟件「Avalon[/b]」和「Indigo」Beta1 RC:
http://www.microsoft.com/downloads/d...displaylang=en
·WinFX SDK(軟件開發工具包):
http://download.microsoft.com/downlo...k_beta1_RC.iso
·微軟Visual Studio 2005
編譯和執行Avalon[/b]應用程式的最簡單的途徑是使用Visual Studio 2005,它現在處於Beta 2測試中(你可以使用WinFX SDK中包含的MSBuild工具來手動編譯Avalon[/b]應用程式,但是這個過程非常乏味,我們並不推薦)。
XAML——Vista標記語言[/b]
在Avalon[/b]中,你使用XAML標記語言來建立應用程式的UI。使用XAML建立UI的過程與建立HTML網頁面的過程相似。你使用標記來呈現(render)那些希望顯示在網頁面上的控件。XAML與HTML不同,它是基於XML的,因此你必須確保XAML網頁面嚴格地遵循XML的規則,例如元素(element)和內容(attribute)的名稱是大小寫敏感的,必須恰當地為內容提供值,等等。
XAML中的每個元素都被映射為一個類,內容(attribute)則被映射為內容(property)。編譯XAML應用程式的時候,UI被轉換為對像模型(
object-model)代碼並使用局部(partial)類與後台代碼組合在一起。因此,除了使用XAML產生UI之外,你還可以使用代碼編程來建立UI。在本文後面我將為你解釋後台代碼的使用方法。
目前的WinFX SDK不支持任何用於建立XAML UI的可視化編輯器,但是毫無疑問,微軟不久就會發佈一個。到時候你就可以手動編寫XAML網頁面了。與WinFX SDK一起提供的XAMLPad編輯器允許你快速地建立和測試那些用XAML建立的用戶界面。
載入XAMLPad的步驟是「開始->程式->微軟WinFX SDK ->工具-> XAMLPad」。
XAMLPad編輯器視窗被分成兩個面板:你在下面的面板中輸入XAML代碼,上面的面板將根據你輸入的XAML代碼既時地顯示UI。XAMLPad易於使用,不需要你編譯。現在我將介紹少量的簡單練習內容,用於演示Avalon[/b]可以建立的不同類型的應用程式。
我們開始建立示例應用程式,在XAMLPad中輸入下面的代碼:
<StackPanel Background="LightBlue" xmlns="http://schemas.microsoft.com/winfx/avalon[/b]/2005">
<Button Name="Button1" Width="100" HorizontalAlignment="Left" Margin="10,10,10,5">
This is a button
</Button>
<TextBlock HorizontalAlignment="Left" Margin="10,5,10,5">
This is a
text block
</TextBlock>
<TextBox Name="Button1" Width="200" HorizontalAlignment="Left" Margin="10,5,10,5">
This is a textbox
</TextBox>
</StackPanel>
輸入完成以後,你將看到XAMLPad呈現的UI(圖1所示)。
圖1:呈現UI的 XAMLPad。XAMLPad上面的面板既時地呈現下面的面板中輸入的代碼。
如果XAML代碼中有錯誤,代碼將會顯示為紅色,錯誤訊息會出現在螢幕底部。
現在仔細檢視一下你剛剛輸入的代碼。首先,StackPanel元素處理網頁面的佈局,同時作為其它控件(例如按鍵和文本框)的容器。StackPanel控件把自己所包含的控件排列成一條線,要麼水平排列,要麼垂直排列。在預定情況下,對齊方式是垂直的,也就是一個控件在另外一個控件的上面(圖1所示)。如果要水平地排列控件,只需要簡單地把StackPanel元素的Orientation內容設置為「Horizontal」(圖2所示)。
圖2:水平排列控件。
通過把StackPanel 元素的Orientation內容設置為Horizontal,還可以改變控件預定的垂直排列方式。
Button元素在網頁面上顯示一個按鍵。在預定情況下,按鍵的寬度剛剛能夠容納你所設置的文本(使用該元素的文本內容設置)。但是,你可以通過設置Width內容手動地調整按鍵控件的寬度。你可以使用HorizontalAlignment內容來調整的按鍵元素的位置。Margin(頁邊空白)內容在控件上設置了一個不可見的包裝,這樣就保證了控件之間有最小的距離,因此避免了控件偶然的「重疊」(圖3所示)。Margin內容的值按次序設置——分別是「左、上、右、下」。
圖3:使用Margin內容。
按鍵控件被「空白」包圍著,可以防止其它控件被放置得過於靠近。
TextBlock元素在網頁面上顯示標籤(平面文本內容不能被選中或改變),TextBox控件在網頁面上顯示文本框(用戶可修改的文本)。
更複雜的UI
現在我考慮使用XAML建立一個相對複雜的UI。把列表1中的代碼複製到XAMLPad中。圖4是XAMLPad所顯示的UI。
列表1:
<DockPanel Background="LightGreen" xmlns="http://schemas.microsoft.com/winfx/avalon/2005">
<TextBlock DockPanel.Dock="Bottom" HorizontalAlignment="Center">StatusBar</TextBlock>
<StackPanel Name="StackPanel1" DockPanel.Dock="Left" Background="LightYellow">
<TextBlock Margin="10,10,10,0">Select country</TextBlock>
<ComboBox Name="cbCountries" Margin="10,5,10,5">
<ComboBoxItem>Singapore</ComboBoxItem>
<ComboBoxItem>United States of America</ComboBoxItem>
<ComboBoxItem>United Kingdom</ComboBoxItem>
</ComboBox>
<ListBox Name="lstCountries" Margin="10,5,10,5">
<ListBoxItem>Singapore</ListBoxItem>
<ListBoxItem>United States of America</ListBoxItem>
<ListBoxItem>United Kingdom</ListBoxItem>
</ListBox>
<CheckBox Name="checkbox1" Margin="10,5,10,5">Checkbox</CheckBox>
<RadioButtonList Name="RadioButtonList1" Margin="10,5,10,5">
<RadioButton>Radio Button 1</RadioButton>
<RadioButton>Radio Button 2</RadioButton>
<RadioButton>Radio Button 3</RadioButton>
</RadioButtonList>
<TextBlock Margin="10,5,10,5">
<Hyperlink NavigateUri="page2.xaml">Page 2</Hyperlink>
</TextBlock>
</StackPanel>
<DockPanel DockPanel.Dock="Right">
<TextBlock DockPanel.Dock="Top" HorizontalAlignment="Center">Title Bar</TextBlock>
<DockPanel DockPanel.Dock="Bottom" Background="Red">
<TextBlock Margin="10,10,10,10" HorizontalAlignment="Left">Enter your name</TextBlock>
<TextBox Name="txtName" Margin="10,5,10,5" HorizontalAlignment="Left" Width="200"></TextBox>
<Button Name="btnOK" Margin="5,5,10,5" Width="50" HorizontalAlignment="Left" >OK</Button>
</DockPanel>
<StackPanel Name="StackPanel2" Background="VerticalGradient Lavender Yellow">
<TextBlock Margin="10,10,10,10">Hello Avalon!</TextBlock>
<Button Margin="10,5,10,5" HorizontalAlignment="Left" Width="100">Left Button</Button>
<Button Margin="10,5,10,5" HorizontalAlignment="Center" Width="100">Center Button</Button>
<Button Margin="10,5,10,5" HorizontalAlignment="Right" Width="100">Right Button</Button>
</StackPanel>
</DockPanel>
</DockPanel>
圖4:XAMLPad中更高階的UI。這次我讓XAMLPad顯示了更多複雜的控件。
請注意這段代碼的下述特性:
·除了使用StackPanel元素之外,你還可以使用DockPanel元素對元素和其它的面板(例如StackPanel和DockPanel元素)進行分組。你可以使用DockPanel.Dock內容把 「鎖定」在DockPanel元素內特定的位置(例如「」上、「左」、「右」或「下」)。
·你可以使用ComboBox、ListBox、Checkbox和RadioButtonList元素來建立習慣使用的控件(例如組合框、列表框、檢查框和單選框)。
·除了設置元素的背景色之外,你還可以用值(例如VerticalGradient Lavender Yellow)把它設置為傾斜填充。
·你可以使用HyperLink元素響導到另一個網頁面。但是這個元素只能在某些特定類型的Avalon應用程式中起作用。你在下一部分可以看到這方面更多的內容。
Avalon應用程式的類型
到目前為止我一直使用XAMLPad來建立UI。但是,真實的應用程式需要實現業務邏輯。因此接下來我將使用Visual Studio 2005(現在處於Beta2測試中)來建立Avalon應用程式。
使用Visual Studio 2005 Beta 2建立新專案的過程是選擇文件->新增專案…。新增專案視窗就會出現(圖5所示)。
圖5:新增專案模板。Visual Studio為Avalon提供了四種不同的模板類型。
在本文中我將把Visual Basic作為編程語言,因此在Visual Basic項下面,選擇Avalon,你將看到四種主要的Avalon專案模板類型:
·Avalon應用程式——與傳統的Windows應用程式類似;
·Avalon Express應用程式——寄宿在Internet瀏覽器中的應用程式;
·Avalon控件類庫——寄宿在其它的Avalon應用程式中的Avalon控件;
·Avalon響導應用程式——類似於Windows應用程式,只是它在「網頁面」之間響導,而不是打開新視窗。
我將為你演示這四種類型中的三種。在本文中沒有演示Avalon控件類型。