|
上一篇主要介紹Expression系列產(chǎn)品,另外概述了Blend的強(qiáng)大功能,本篇將用Blend 3創(chuàng)建一個(gè)新Silverlight項(xiàng)目,通過創(chuàng)建的過程,對Blend進(jìn)行快速入門學(xué)習(xí)。
在開始使用Blend前,首先需要進(jìn)行Silverlight的開發(fā)環(huán)境搭建,在銀光中國網(wǎng)(SilverlightChina.NET)有篇“輕松建立Silverlight開發(fā)環(huán)境”,其中列出了建立Silverlight開發(fā)環(huán)境的幾個(gè)步驟,另外,我在過去發(fā)布過一篇“Silverlight開發(fā)工具集合”文章,也列出了Silverlight項(xiàng)目開發(fā)必裝工具軟件,這里對于開發(fā)環(huán)境的搭建,我就不再贅述。
Silverlight開發(fā)環(huán)境搭建成功后,我們將通過實(shí)例介紹Blend入門操作,我使用的Blend是英文版本,我將對照翻譯成中文。
首先使用Blend按照以下步驟創(chuàng)建一個(gè)新的Silverlight項(xiàng)目,
1. 點(diǎn)擊左上角的“File - New Project”,這時(shí)會(huì)彈出一個(gè)新建項(xiàng)目窗口,如下圖
在上圖可以看到Blend支持創(chuàng)建兩個(gè)類型的項(xiàng)目,一個(gè)是Silverlight,另一個(gè)是WPF,本系列主要討論Silverlight,所以,我們選擇“Project Type -Silverlight”,在選中Silverlight類型后,在彈出窗口右邊會(huì)出現(xiàn)四個(gè)項(xiàng)目模板,
(1) Silverlight 3 Application + Website
該選項(xiàng)是“創(chuàng)建Silverlight 3客戶端應(yīng)用其中包含Website項(xiàng)目”,選擇該選項(xiàng)后,Blend會(huì)自動(dòng)創(chuàng)建Web項(xiàng)目在同一個(gè)解決方案下,編譯后運(yùn)行,會(huì)在Web項(xiàng)目中產(chǎn)生測試頁面,在客戶端顯示Silverlight客戶端。
(2) Silverlight 3 Application
該選項(xiàng)是“創(chuàng)建Silverlight 3客戶端應(yīng)用”,選擇該選項(xiàng)后,Blend僅創(chuàng)建Silverlight客戶端,編譯后,自動(dòng)生成一個(gè)測試頁面。
(3) Silverlight 3 Control Library
該選項(xiàng)是“創(chuàng)建Silverlight控件類庫”,選擇該選項(xiàng)后,Blend會(huì)創(chuàng)建Silverlight空白類庫,主要用于創(chuàng)建Silverlight自定義控件。
(4) Silverlight 3 SketchFlow Application
該選項(xiàng)是“創(chuàng)建Silverlight 3 SketchFlow應(yīng)用”,選擇該選項(xiàng)后,Blend會(huì)創(chuàng)建Silverlight 3 SketchFlow應(yīng)用。
在項(xiàng)目模板窗口下,是創(chuàng)建項(xiàng)目的名稱,項(xiàng)目路徑和項(xiàng)目后臺語言支持。
本文將創(chuàng)建一個(gè)Silverlight 3 Application + Website + C# 完整項(xiàng)目,方便以后解釋項(xiàng)目細(xì)節(jié)。
創(chuàng)建新項(xiàng)目后,可以在Blend看到當(dāng)前工作去,我將重要的幾個(gè)部分添加了標(biāo)識,下面詳細(xì)描述各個(gè)部分的作用:
A部分: 是菜單選項(xiàng);
B部分:是DockPanel菜單,鼠標(biāo)點(diǎn)擊后,會(huì)彈出對應(yīng)的窗口,例如“對象和時(shí)間線”或者“項(xiàng)目管理”等;
C部分:是工具面板菜單
D部分:項(xiàng)目面板
上圖可以看出在SilverlightBlendDemo解決方案下,有兩個(gè)項(xiàng)目:
1. SilverlightBlendDemo: 該項(xiàng)目是Silverlight客戶端項(xiàng)目,主要承載Silverlight客戶端頁面和控件;
2. SilverlightBlendDemoSite: 該項(xiàng)目是Silverlight服務(wù)器端項(xiàng)目,主要承載服務(wù)器端代碼,例如WCF Service或者DAL數(shù)據(jù)層代碼;
E部分:文檔切換欄, 該欄目顯示所有打開的項(xiàng)目文件,可以自由切換;
F部分:主要工作區(qū),叫做美工板,所有頁面和控件設(shè)計(jì)都在該區(qū)域;
G部分:視圖和代碼切換欄,該欄目提供三個(gè)選項(xiàng),第一個(gè)是視圖選項(xiàng),第二個(gè)是代碼選項(xiàng),第三個(gè)是視圖和代碼同時(shí)顯示選項(xiàng);
H部分:屬性和資源選項(xiàng)欄,從這里可以設(shè)置控件屬性和對應(yīng)項(xiàng)目資源;
I部分:使用該部分縮放F部分美工板,啟動(dòng)動(dòng)畫效果,設(shè)置控件對齊選項(xiàng)以及查看文件注釋內(nèi)容;
以上窗口部件是創(chuàng)建項(xiàng)目后,默認(rèn)顯示的幾個(gè)窗口,另外還有幾個(gè)常見的窗口部件,也介紹一下:
1. 首先介紹一下菜單擴(kuò)展部分,當(dāng)你把鼠標(biāo)選中C部分菜單按鈕,會(huì)彈出擴(kuò)展菜單按鈕,功能如下:
2. 在擴(kuò)展菜單中,最后一項(xiàng)是Silverlight資源工具按鈕 ,點(diǎn)擊選中后,會(huì)彈出以下窗口,其中包含所有控件,樣式集合,行為代碼集合以及動(dòng)畫效果和媒體文件集合。在設(shè)計(jì)的時(shí)候,如果添加新控件,可以從這個(gè)選項(xiàng)進(jìn)行選擇。
3. Object and Timeline - 對象和時(shí)間線面板,可以使用該面板對頁面控件對象進(jìn)行分層管理,另外也可以對當(dāng)前對象進(jìn)行動(dòng)畫設(shè)計(jì),詳細(xì)動(dòng)畫設(shè)計(jì),將在下文描述。
4. 屬性設(shè)置面板,在上文H部分,我們介紹了屬性和資源選項(xiàng)框,這里我把屬性框單獨(dú)列出來,在美工面板創(chuàng)建一個(gè)按鈕控件后,選中該按鈕,在屬性面板中顯示各種屬性,例如背景,筆刷等等,從這個(gè)面板可以不用輸入代碼,直接設(shè)計(jì)控件屬性。
5. 控件模板樣式資源面板。從該面板,選擇設(shè)計(jì)控件樣式。
6. 調(diào)試結(jié)果面板,在該面板顯示調(diào)試錯(cuò)誤信息和輸出信息;
今天寫到這里了,下次繼續(xù)寫,下面是網(wǎng)友經(jīng)常問的幾個(gè)Blend問題,我做了統(tǒng)一回答,希望能幫到更多朋友。
如果您在學(xué)習(xí)中遇到問題,請留言或者加入QQ群討論。超級群 22308706, 100844510 (200人滿)
常見的幾個(gè)問題:
為什么Blend中沒有相對應(yīng)的Silverlight控件?
答:在Blend中沒有Silverlight控件,需要確認(rèn)是否安裝Silverlight Tools for Visual Studio 2008 Sp1 和 Silverlight Toolkit控件擴(kuò)展包,在Silverlight Tools中包含了基礎(chǔ)控件包,而Silverlight Toolkit是擴(kuò)展控件。
為什么Blend中沒有智能提示功能?
答:確認(rèn)Blend的版本,在Blend2.5之前的版本,Blend不支持IntelliSense。
為什么Visual Studio 2008 Sp1沒有Silverlight項(xiàng)目視圖設(shè)計(jì)界面?
答:從Silverlight 3開始,微軟屏蔽了Visual Studio 2008 Sp1的Silverlight項(xiàng)目視圖設(shè)計(jì)功能,推薦使用Blend 3進(jìn)行Silverlight項(xiàng)目視圖設(shè)計(jì)。 在Visual Studio 2010中,重新恢復(fù)了Silverlight項(xiàng)目視圖設(shè)計(jì)功能。
NET技術(shù):Expression Blend實(shí)例中文教程(2) - 界面快速入門,轉(zhuǎn)載需保留來源!
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請第一時(shí)間聯(lián)系我們修改或刪除,多謝。