溫故

本文是從C#開發(fā)人員到Windows Phone 7高級開發(fā)人員只需3周的第一篇Day 1 : UI Elements (XAML, Controls, Layout, DP/AP, Style, RenderTransform)

目錄

Silverlight歷史    1

Silverlight應(yīng)用程序    2

XAML    2

Dependency Property（DP）/Attached Property（AP）    3

Control繼承樹    4

Resource & Style    5

Layout    6

Transform    7

Shape    8

結(jié)語    8

 

Silverlight歷史

微軟推出Silverlight的初衷是為了提供跨平臺跨瀏覽器的開發(fā)框架，從去年開始基本放棄該計劃，而著重將其打造成Windows Phone 7的開發(fā)平臺，個人覺得這個是正確的，畢竟微軟自己并沒有多大的動力去在其它操作系統(tǒng)上發(fā)展，而且事實證明它還沒有這個能力來一家說了算，畢竟未來還是HTML5的。

 

從2007年推出以來，每年都有一個新的版本，我想應(yīng)該是2010年開始作為WP7開發(fā)平臺后，才慢慢真正被人重視。

Figure 1 Silverlight歷史

 

Silverlight應(yīng)用程序

Silverlight應(yīng)用程序可以以以下三種方式進行運行：

• 瀏覽器插件的方式運行
• 作為獨立應(yīng)用程序運行（一般以ClickOnce的方式進行發(fā)布）
• 作為Windows Phone應(yīng)用程序運行

 

不管應(yīng)用程序以那種方式運行，應(yīng)用程序都已XAP的方式進行打包，XAP的文件格式即Zip文件格式（類似于新的Office內(nèi)容格式，都是以Zip文件格式進行打包），內(nèi)包含了Dll，Content（如jpg, avi）, AppManifest等。Silverlight應(yīng)用程序都是通過相應(yīng)的裝載程序進行加載XAP文件，然后通過AppManifest入口文件說明找到相應(yīng)的啟動類或頁面進行加載，程序加載后運行在Silverlight托管的Runtime之上。

 

XAML

學(xué)好Silverlight，必須要對XAML有深刻理解。對于XAML，個人總結(jié)兩句話：

• 用XML的方式來聲明對象

Figure 2 XML映射到對象

在XAML中，幾乎每個XML節(jié)點（Element）都是聲明一個對象（Object），即上圖的XML Element映射到Object，對于每個XML的屬性（Attribute）都映射到一個對象的屬性（Property）或者事件（Event）。因此XAML只是利用XML的方式來聲明內(nèi)存對象而已，和用C#代碼的作用是一樣的，只是采用XML作為書寫的方式而已。

 

• 用XML的方式來定義對象樹

Figure 3 從Logical Tree到Visual Tree

用XML的方式來聲明對象不僅僅在設(shè)置屬性上比較方便，XML本身的樹形結(jié)構(gòu)就和GUI的Render樹形結(jié)構(gòu)非常一致，因此利用XML天生的嵌套能力可以非常直觀和有效的定義界面層級結(jié)構(gòu)。在Silverlight里面，大家在XAML Designer上定義的為Logical Tree，Runtime在加載XAML后根據(jù)Control Template和控件的Visual的定義轉(zhuǎn)化成Visual Tree而最終Render出來，如果你需要對系統(tǒng)生成的Visual Tree感興趣的話，可以使用我在之前文章中提到的Silverlight Spy這個工具來進行UI Visual Element的探測。

 

Dependency Property（DP）/Attached Property（AP）

對于界面描述語言XAML來說，我想其它開發(fā)平臺也有類似的東西，Android有XML UI，iOS有xib，Qt有QML，有些甚至比XAML靈活。Silverlight Framework之所以強大，應(yīng)該說離不開Dependency Property(DP)的存在，關(guān)于DP有以下兩點事實:

1. DP是建立在C# Property基礎(chǔ)之上的(簡單理解有點類似Javascript等動態(tài)語言,具有一個字典表來存儲屬性的值,把默認值存儲在Class Level/Static的字典表中,見該篇文章詳細分析原理)
2. DP是Silverlight的脊椎骨,幾乎所有的UI Element的屬性都是DP

 

這么玄乎,那DP到底有什么用? 只有屬性是DP,才能實現(xiàn)以下功能

• Resources: 在Resource中設(shè)置屬性值
• Data binding: 支持該屬性成為Binding的Target
• Styles: 支持使用Style來設(shè)置該屬性值
• Animations: 支持利用Animation來Animate該屬性
• Metadata overrides: 支持對屬性元數(shù)據(jù)的重寫
• Property value inheritance: 支持屬性值從邏輯樹基層
• WPF Designer integration: 支持對編輯器設(shè)計時

 

Attached Property(AP)是基于Dependency Property之上更高級的使用方法,即在某一個Dependency Object之上設(shè)置另外一個Dependency Object的Dependency Property屬性的值. 打個比方就是公司的筆記本電腦上面貼了公司Asset的標簽,Asset標簽本身不是筆記本攜帶的屬性,而是公司IT部門強行加上去的,對于筆記本本身沒有意義,但是對于公司有意義,需要通過這個Asset標簽來進行管理.

最常見的Attached Property就是Grid.Column和Grid.Row.

<TextBox Grid.Row="0" …>

 

Control繼承樹

我引用一篇文章中的一張控件繼承圖來闡述Silverlight/WPF核心類的結(jié)構(gòu)。

• Controls為包含了ControlTemplate來設(shè)定其Visual展示，如TextBox
• ContentControl是定義了單一Content屬性的控件，可以通過ContentTemplate來設(shè)置其內(nèi)容值，如Button
• ItemsControl為列表類型，通過ItemTemplate來控制每個Item的Visual，如ListBox

 

如果更加具體分析的話，下圖為從中抽取最為重要的幾個類，并解釋其在整個Silverlight框架中起的作用。

• DependencyObject是所有Silverlight控件的最基礎(chǔ)類，因為在DP必須定義在DependencyObject內(nèi)。
• UIElement提供了關(guān)于Transform的支持，正式RenderTransform是可以在Composite線程上運算和繪畫的
• FrameworkElment定義了三個非常重要的元素：DataContext，Resources，Style。它們構(gòu)建了Silverlight框架的核心

至于Silverlight有那些常用控件，大家可以直接參考MSDN。

 

Resource & Style

Resource即為一個哈希表（Dictionary），可以存放任何類型的對象，通過key來進行索引。

• X:key

<Application.Resources>

<Style x:Key="GreenButtonStyle">

<Setter Property="Control.Background" Value="Green"/>

</Style>

</Application.Resources>

根據(jù)之前的內(nèi)容，我們知道所有的FrameworkElement都定義了Resource屬性。

 

Style有點類似CSS中的Style，但比CSS的Style強大很多，Silverlight中的Style不僅僅為設(shè)置顯示的樣式，可以設(shè)置任何UIElement的屬性的值，通過TargetType來定義在Style中能夠設(shè)置的PropertyName，這在編譯時就會進行檢查。

 

Style產(chǎn)生效果有兩種模式：

• 自動應(yīng)用模式，即在定義樣式時僅指定TargetType而不指定Key，則將自動應(yīng)用該樣式到所有該類型的控件上。
• 手工應(yīng)用模式，即在定義樣式時指定TargetType同時設(shè)定Key，要用該種樣式，必須在控件上手動加上引用Resource

  <Style TargetType="Button" x:Key="buttonStyle">

  <Setter Property="Background" Value="Green" />

  <Setter Property="FontSize" Value="24" />

  </Style>    

  …

  <Button Style="{StaticResource buttonStyle}" Content="B" />

 

Layout

Silverlight中常用的Layout方式主要包括：

• Grid: 表格的方式來進行排版（偏移通過Margin實現(xiàn)）
• StackPanel: 橫向或者豎向?qū)盈B進行排版
• Canvas：通過x,y絕對定位坐標的方式進行控件排版

 

可以看到Grid.Row或者Canvas.Left即為我們之前提到的Attached Property，在兒子控件設(shè)置該屬性，其父親控件對其值感興趣，根據(jù)其值來進行排版。

 

Transform

利用Silverlight的Transform可以非常方便地進行控件變形、位移、二維旋轉(zhuǎn)、三維旋轉(zhuǎn)，Transform經(jīng)常用在Animation當中，利用Expression Blend可以方便地生成變形以及錄制動畫。

 

二維變換

Figure 4 Render Transform

 

三維旋轉(zhuǎn)

 

Shape

XAML也提供了類似于SVG的定義二維矢量圖的方式，包括Rectangle, Line, Polygon, Path等各種簡單或復(fù)雜的圖形，定義方式也非常容易。

 

結(jié)語

XAML是Silverlight乃至WP7開發(fā)的最基本功，因此需要對XAML的各個方面非常熟悉，并且盡可能地對其原理了解，可以大大加快日后的開發(fā)速度。

 

下篇：

Day 2 : Mouse & Keyboard (Routed Event), Animation(Linear Animation, Key Frame, StoryBoard) ?