零基礎學通Silverlight4（2）：Expression Blend入門

2.1 概述

Expression Blend是一款功能齊全的專業設計工具，可用來針對基於Silverlight構建的Web應用程序製做精美複雜的用戶界面。這樣可以讓設計人員集中精力從事創做，開發人員集中精力從事編程，開發與設計人員能夠高效地合做。Expression Blend和Visual Studio共享同一種項目格式，這二種工具分別針對開發和設計人員。

 

2.2 視圖

Expression Blend提供了兩個應用程序視圖來製做場景，第一個是設計視圖，在該視圖中，可使用各類工具及各種控件，以可視化的方式建立和操做元素。第二個視圖是XAML代碼視圖，在該視圖中，可直接編輯XAML以建立可視化元素。

2.3 工做區

Blend 中的工做區包含全部可視界面元素。這些元素包括美工板、面板、"工具"面板、工做區配置、創做視圖和菜單。Expression Blend 具備兩個工做區：「設計」工做區和「動畫」工做區。您能夠經過按 F6 在兩者之間進行切換。「設計」工做區主要用於常規創做。「動畫」工做區將「時間」面板移動到美工板下，以便有更多的空間來顯示時間線。下面以「設計」工做區來講明，見圖2.3-1。

 

                                圖2.3-1

 

（1）文檔窗口   此區域顯示當前打開的全部 XAML 文檔。

（2）"項目"面板、「資產」面板、「狀態」面板、「對象和時間線"面板

（3）"工具"面板

（4）美工板

（5）"屬性"面板和"資源"面板

（6）"設計"視圖、"XAML"視圖和"拆分"視圖。您可使用"設計"視圖來創做文檔，以便在美工板上呈現直觀的畫面；也可使用標記視圖經過可擴展應用程序標記語言 (XAML) 自己創做文檔。"拆分"視圖將顯示"設計"視圖和"XAML"兩個視圖，而且您可使用"視圖"菜單上的"拆分視圖方向"項來更改窗口的方向。

2.4 主要面板

2.4.1 工具條

在應用程序中建立和修改對象。能夠經過使用鼠標選擇工具並在美工板上進行繪製來建立對象。也可使用圖柄在美工板上更改對象，或者能夠在"屬性"面板中修改對象的屬性，見圖2.4-1。

                      圖2.4-1

 

（1）選擇工具   用於選擇和路徑選擇（嵌套對象和路徑段）對象和路徑。

（2）視圖工具   用於調整美工板的視圖，例如平移、縮放以及調整三維內容的攝影軌跡。

（3）畫筆工具    用於處理對象的可視屬性，例如轉換畫筆、繪製對象，或者選擇某個對象的屬性以應用於另外一個對象。

（4）對象工具   用於在美工板上繪製最經常使用的對象，例如路徑、形狀、版式面板、文本和控件。

（5）資產工具   用於訪問"資產"面板並顯示庫中最近用過的資產。

"資產"面板列出了您能夠在美工板上繪製的全部控件、樣式、媒體、行爲和效果。雖然最經常使用的控件會顯示在"工具"面板中，但"資產"面板列出了可用於 Microsoft Expression Blend 項目的全部控件。 經過單擊"工具"面板底部的"資產 " ，或單擊"窗口"菜單上的"資產"，您能夠打開"資產"面板。若要向美工板添加控件、樣式或媒體對象，請執行下列操做之一：

選擇了類別或子類別後，單擊列表中的某個項，而後使用指針在美工板上繪製對象。

選擇了類別或子類別後，雙擊列表中的某個項，將新對象插入到活動版式面板中。

選擇了類別或子類別後，將列表中的某個項拖到美工板上。

若要在美工板上向對象添加行爲或效果，能夠在美工板上或在"對象和時間線"面板中將行爲或效果拖到對象上。

2.4.2 對象和時間線面板

查看美工板上全部對象的層次結構，選擇對象以便您能夠對其進行修改，建立和修改動畫時間線，見圖2.4-2。

 

                    圖2.4-2

（1）對象視圖 顯示文檔的可視化樹。 您可使用對象視圖的層次結構特色深刻到不一樣的詳細信息級別。能夠在對象視圖中添加層，以在美工板上更好地組織對象，使它們可以做爲組進行鎖定和隱藏。能夠經過將拆分欄向鎖定列的左邊拖動到所需寬度，來調整對象視圖的寬度。

（2）情節提要選取器和情節提要選項，顯示已建立的情節提要的列表。情節提要選項 在彈出菜單中提供選項，您可使用這些選項來複制、反轉、刪除、重命名或關閉情節提要。也能夠建立新的情節提要。

（3）播放控件 提供可用於在時間線中導航的情節提要控件。也能夠拖動播放指針來定位（或推移）時間線。

（4）播放指針在時間線上的位置   按毫秒 (HH:mm:xxx) 顯示當前時間。也能夠直接在此字段中輸入時間值以跳到特定的時間點。精度取決於"對齊選項"中設置的對齊分辨率。

（5）播放指針   指示動畫所在的時間點。能夠在時間線中拖動播放指針，以便預覽動畫。這種技術稱爲"推移"。

（6）時間線縮放 設置時間線的縮放分辨率。經過放大，能夠編輯動畫的更多細節；而經過縮小，可更全面地顯示在更長時間段內發生的狀況。若是在放大以後沒法在所需的時間位置設置關鍵幀，請驗證設置的對齊分辨率是否足夠高。

（7）時間線上設置的關鍵幀 指定特定時間點上屬性值的變化。關鍵幀具備不一樣的級別。爲"Angle"元素設置的關鍵幀爲簡單關鍵幀；爲"RenderTransform"元素設置的關鍵幀爲複合關鍵幀；爲"DetailsPane"對象設置的關鍵幀爲對象級關鍵幀。

 

2.4.3項目面板

查看與當前打開項目相關聯的全部文件，打開項目文件以供編輯，管理項目文件，見圖2.4-3。

①用於篩選項目文件列表的"搜索"框

②包含 Silverlight 應用程序項目和相應網站項目的解決方案。

③項目引用，如 DLL 文件。

④主文檔的代碼隱藏文件。

⑤ Silverlight 應用程序的網站項目

 

                            圖2.4-3

2.4.4屬性面板

經過使用 Microsoft Expression Blend 中的"屬性"面板，能夠查看和修改在美工板上或在"對象和時間線"下選定的對象的屬性。若是經過操做鼠標使用對象圖柄直接在美工板上修改對象，則"屬性"面板中將反映屬性的更改。反之亦然，即：若是經過使用"屬性"面板中"轉換"下的值編輯器來縮放對象，則會在美工板上縮放對象，見圖2.4-4。

                             

圖2.4-4

①選定對象的名稱和類型。

②切換按鈕，用於顯示"屬性"或"事件"視圖。

③搜索框，用於篩選依據輸入的文本顯示的屬性。

④用於選擇畫筆編輯器的選項卡。能夠將"畫筆"下的選定屬性設置爲"無畫筆"、"純色畫筆"、"漸變畫筆"、"平鋪畫筆"或"畫筆資源"。

⑤帶顏色滑塊的顏色選取器。

⑥可展開和摺疊的外觀、佈局、公共屬性等類別。

  

2.4.5調整佈局

（1）向工做區中添加面板,在"窗口"菜單上，單擊要添加到工做區中的面板的名稱。已顯示在工做區中的面板將出如今"窗口"菜單上，旁邊有複選標記。

（2）工做刪除面板,在面板的右上角處，單擊"關閉"。

（3）調整面板大小,將指針移到但願調整大小的面板的邊框上。當出現水平光標或垂直光標  時，您能夠拖動邊框來調整面板的大小。

(4) 重置爲默認視圖,在修改工做區（如縮放工做區或調整面板大小）以後，能夠輕鬆地返回到工做區的默認視圖。默認視圖取決於用戶所要配置的工做區是設計工做區仍是動畫工做區。例如，在動畫工做區中，「交互」面板將移動美工板的下面，這樣可提供更多的空間來查看時間線。

在「窗口」菜單上，單擊「重置工做區佈局」。

(5) 對齊和對齊網格,對齊網格在美工板上提供了一組水平網格線和垂直網格線。若是已啓用「網格線對齊」，則當您在美工板上拖動對象時，該對象將與最近的水平和垂直網格線對齊或靠齊。

 顯示對齊網格，執行下列操做之一：

（1）在美工板的左下角，單擊「顯示對齊網格」 。若要隱藏對齊網格，請再次單擊該按鈕以顯示禁用圖標  。

（2）在「工具」菜單上，單擊「選項」。在「選項」對話框中，確保在左側選擇了「美工板」，而後選中「顯示對齊網格」複選框。單擊「肯定」。

 啓用網格線對齊，執行下列操做之一：

（1）在美工板的左下角，單擊「啓用網格線對齊」 。若要禁用網格線對齊，請再次單擊該按鈕以顯示禁用圖標  。

（2）在「工具」菜單上，單擊「選項」。在「選項」對話框中，確保在左側選擇了「美工板」，而後選中「網格線對齊」複選框。單擊「肯定」。

範例 示範使用Expression Blend設計時鐘

項目Ch4_Exam4_1設計一個時鐘外觀，如圖2.4-10。

               圖2.4-10

1）啓動Microsoft Expression Blend。

2）在「新建項目」對話框中，單擊「項目類型」下的「Silverlight Application」

3）在"名稱"旁邊，鍵入項目的名稱。該名稱將成爲項目文件夾的名稱和應用程序命名空間的名稱。

4）在"位置"旁邊，驗證要在其中保存項目的文件夾的路徑。若要選擇其餘文件夾，請單擊"瀏覽"。

5）在"語言"下拉列表中，選擇編程語言Visual C#。

6）單擊"肯定"。此時，將建立 Silverlight 項目，並將其打開以供編輯。您如今便可在項目的主頁 (MainPage.xaml) 中建立內容。

7）在"工具"面板中，選擇其中矩形工具

8）將矩形拖放至畫布上，以創建大約寬220像素，高240 像素寬高的長方形。

9）變動圖形屬性。 按一下 屬性，而後指定圓形的填色爲黑色，再設定不透明度爲30%，以提供陰影效果。

        

圖2.4-11

10) 將矩形的名稱變更爲Rect1

11）請選取陰影圖形，而後按 CTRL+C 時行復制，再按 CTRL+V 貼上。並命名爲Rect2。

12）將新圖層移到老圖層的左上角，設置純色畫筆，顏色爲#FFE4E 5F 4，不透明度爲100％，並命名爲Rect2。

       

  圖2.4-12

13) 將矩形拖放至畫布上，以創建大約寬180像素，高210 像素寬高的長方形，命名爲Rect3。

 

                 圖2.4-13

14）採用線性漸變，選取漸變工具，變更漸變的方向，讓它由左上方漸變至右下方，顏色從#FF 34353F 到#FFE9E 9F 7。

                    圖2.4-14

15）將矩形拖放至畫布上，以創建大約寬140像素，高180 像素寬高的長方形，命名爲Rect4，填充顏色爲#FFEBE5E5

16）選取 [橢圓形] 工具，而後將新橢圓形拖曳至時鐘正面上方的中心點，並命名爲Ellipse1，高度和寬度都設爲 13像素，將筆刷粗細設爲 3像素，並將筆刷設爲黑色。

                  圖2.4-15

17）選取 [線] 工具畫秒針，寬度爲5像素，選純色畫筆，顏色爲紅，調整至合適大小，，顏色重設爲黑，畫時針，分針。分別命名爲Line1\Line2\Line3

18）F5運行，可呈現效果。

 

更詳細內容及源代碼下載：

http://www.amazon.cn/mn/detailApp/ref=sr_1_1?_encoding=UTF8&s=books&qid=1287058088&asin=B0043RT7I2&sr=8-1