1. 程式人生 > >Expression Blend實例中文教程(2) - 界面快速入門

Expression Blend實例中文教程(2) - 界面快速入門

調試 界面 express 自動創建 light .com 動畫設計 demo 新項目

上一篇主要介紹Expression系列產品,另外概述了Blend的強大功能,本篇將用Blend 3創建一個新Silverlight項目,通過創建的過程,對Blend進行快速入門學習。

在開始使用Blend前,首先需要進行Silverlight的開發環境搭建,在銀光中國網(SilverlightChina.Net)有篇“輕松建立Silverlight開發環境”,其中列出了建立Silverlight開發環境的幾個步驟,另外,我在過去發布過一篇“Silverlight開發工具集合”文章,也列出了Silverlight項目開發必裝工具軟件,這裏對於開發環境的搭建,我就不再贅述。

Silverlight開發環境搭建成功後,我們將通過實例介紹Blend入門操作,我使用的Blend是英文版本,我將對照翻譯成中文。

首先使用Blend按照以下步驟創建一個新的Silverlight項目,

1. 點擊左上角的“File - New Project”,這時會彈出一個新建項目窗口,如下圖

技術分享圖片

在上圖可以看到Blend支持創建兩個類型的項目,一個是Silverlight,另一個是WPF,本系列主要討論Silverlight,所以,我們選擇“Project Type -Silverlight”,在選中Silverlight類型後,在彈出窗口右邊會出現四個項目模板,

(1) Silverlight 3 Application + Website

該選項是“創建Silverlight 3客戶端應用其中包含Website項目”,選擇該選項後,Blend會自動創建Web項目在同一個解決方案下,編譯後運行,會在Web項目中產生測試頁面,在客戶端顯示Silverlight客戶端。

(2) Silverlight 3 Application

該選項是“創建Silverlight 3客戶端應用”,選擇該選項後,Blend僅創建Silverlight客戶端,編譯後,自動生成一個測試頁面。

(3) Silverlight 3 Control Library

該選項是“創建Silverlight控件類庫”,選擇該選項後,Blend會創建Silverlight空白類庫,主要用於創建Silverlight自定義控件。

(4) Silverlight 3 SketchFlow Application

該選項是“創建Silverlight 3 SketchFlow應用”,選擇該選項後,Blend會創建Silverlight 3 SketchFlow應用。

在項目模板窗口下,是創建項目的名稱,項目路徑和項目後臺語言支持。

本文將創建一個Silverlight 3 Application + Website + C# 完整項目,方便以後解釋項目細節。

技術分享圖片

創建新項目後,可以在Blend看到當前工作去,我將重要的幾個部分添加了標識,下面詳細描述各個部分的作用:

A部分: 是菜單選項;

B部分:是DockPanel菜單,鼠標點擊後,會彈出對應的窗口,例如“對象和時間線”或者“項目管理”等;

C部分:是工具面板菜單

技術分享圖片

D部分:項目面板

技術分享圖片

上圖可以看出在SilverlightBlendDemo解決方案下,有兩個項目:

1. SilverlightBlendDemo: 該項目是Silverlight客戶端項目,主要承載Silverlight客戶端頁面和控件;

2. SilverlightBlendDemoSite: 該項目是Silverlight服務器端項目,主要承載服務器端代碼,例如WCF Service或者DAL數據層代碼;

E部分:文檔切換欄, 該欄目顯示所有打開的項目文件,可以自由切換;

F部分:主要工作區,叫做美工板,所有頁面和控件設計都在該區域;

G部分:視圖和代碼切換欄,該欄目提供三個選項,第一個是視圖選項,第二個是代碼選項,第三個是視圖和代碼同時顯示選項;

技術分享圖片

H部分:屬性和資源選項欄,從這裏可以設置控件屬性和對應項目資源;

I部分:使用該部分縮放F部分美工板,啟動動畫效果,設置控件對齊選項以及查看文件註釋內容;

以上窗口部件是創建項目後,默認顯示的幾個窗口,另外還有幾個常見的窗口部件,也介紹一下:

1. 首先介紹一下菜單擴展部分,當你把鼠標選中C部分菜單按鈕,會彈出擴展菜單按鈕,功能如下:

技術分享圖片

2. 在擴展菜單中,最後一項是Silverlight資源工具按鈕 技術分享圖片,點擊選中後,會彈出以下窗口,其中包含所有控件,樣式集合,行為代碼集合以及動畫效果和媒體文件集合。在設計的時候,如果添加新控件,可以從這個選項進行選擇。

技術分享圖片

3. Object and Timeline - 對象和時間線面板,可以使用該面板對頁面控件對象進行分層管理,另外也可以對當前對象進行動畫設計,詳細動畫設計,將在下文描述。

技術分享圖片

4. 屬性設置面板,在上文H部分,我們介紹了屬性和資源選項框,這裏我把屬性框單獨列出來,在美工面板創建一個按鈕控件後,選中該按鈕,在屬性面板中顯示各種屬性,例如背景,筆刷等等,從這個面板可以不用輸入代碼,直接設計控件屬性。

技術分享圖片

5. 控件模板樣式資源面板。從該面板,選擇設計控件樣式。

技術分享圖片

6. 調試結果面板,在該面板顯示調試錯誤信息和輸出信息;

技術分享圖片

今天寫到這裏了,下次繼續寫,下面是網友經常問的幾個Blend問題,我做了統一回答,希望能幫到更多朋友。

如果您在學習中遇到問題,請留言或者加入QQ群討論。超級群 22308706, 100844510 (200人滿)

常見的幾個問題:

為什麽Blend中沒有相對應的Silverlight控件?

答:在Blend中沒有Silverlight控件,需要確認是否安裝Silverlight Tools for Visual Studio 2008 Sp1 和 Silverlight Toolkit控件擴展包,在Silverlight Tools中包含了基礎控件包,而Silverlight Toolkit是擴展控件。

為什麽Blend中沒有智能提示功能?

答:確認Blend的版本,在Blend2.5之前的版本,Blend不支持IntelliSense。

為什麽Visual Studio 2008 Sp1沒有Silverlight項目視圖設計界面?

答:從Silverlight 3開始,微軟屏蔽了Visual Studio 2008 Sp1的Silverlight項目視圖設計功能,推薦使用Blend 3進行Silverlight項目視圖設計。 在Visual Studio 2010中,重新恢復了Silverlight項目視圖設計功能。

Expression Blend實例中文教程(2) - 界面快速入門