Blend 3.0入門之SketchFlow詳解(上)

SketchFlow是新加入Expression Blend的一個插件，主要用于程式的原型設計。在此以前，我們設計程式的原型時有兩個主要問題讓人頭痛：一是建立能引起人們興趣的原型非常耗時，二是不能準确地溝通設計思想，讓人信服很難。由于在原型設計的初期，很多僅僅是一個初步的想法，具有不确定性，就不能向正式設計軟體那樣弄得有模有樣，隻需要準确地将設計人員所想表達出來即可。SketchFlow是第一款真正意義上的原型設計工具。總結起來就兩點：

• 草圖風格的控件，讓人不專注于細節設計，重在整體模型的概貌及項目的邏輯結構。
• 實用的FeedBack功能，讓客戶與開發人員的溝通更清晰，了解更為統一。
• ScreenMap 為項目的邏輯架構提供了更加友善的圖形化操作接口。
• Make into Control /Make into Component Screen封裝功能使控件具有高度可重用性
• 可完全實作的資料綁定功能使整個項目的原型展現更為直覺。
• 控件樣式可以替換，即原型到最終成品的開發成本更小

下面我們就一個簡單項目做入門示例，将以盡量少的文字，更多的圖示過程。

1. 在稿紙上畫出草圖。
2. 建立項目。

   

3. 按最左邊加号拖出一個Screen.

   

4. 輕按兩下Screeen1改名

   最右邊的是Screen顔色，用來區分不同層次或功能的頁面。我們建立如下的Screens

   

   注意單獨連接配接兩個Screen的按鈕是上圖左邊第二個。從一個Screen拖動指向另一個。
5. 現在輕按兩下Home。編輯頁面，從左邊的Assets面闆Styles中拖控件到白闆,

   

   如果找不到請到Windows頁籤勾選

   

   我們在白闆上添加這樣一些簡單的控件

   

6. Make Into Component Screen （封裝控件，就像asp.net 中把aspx中的部分控件封裝成ascx使用者控件）

   

   取名為Head

   

   可以看到虛線部分就是一個對Head的引用

   

   為每個要用到頭的Screen添加引用

   

   如圖拖動head下方左起第三個按鈕到多要連結的頁面，得到上圖。現在打開每個Screen都會有這個Head的引用啦

7. 下面我們為Products頁面添加資料顯示控件。

   首先我們利用SimpleData建構一個資料源

   

   現在拖動一個ListBox ,當然，是SketchFlow風格的。

   然後将集合綁定到ListBox,編輯一下資料模闆，使顯示的屬性和大小位置合适就好。

   

   Ok,是不是很簡單呢，Blend 3 的資料綁定确實很強大。具體見上一篇Blend 3入門之資料綁定

   注意的地方是要在ItemTemplate中将資料項外層的StackPanel改為Grid比較好布局，并且在Grid上右擊添加NavigateTo DetailProducts.（單擊跳轉）

8. 現在我們編輯同理編輯下DetailProduct 頁面，這次是詳細資訊顯示，當然，在原型開發中重在結構和邏輯，

   不是資料傳遞，理想狀态下，應該是我們在Products頁面選擇的産品後，跳轉到Detail頁面的應該是該産品，顯然，Blend不想把事情搞複雜。

   我們在輕按兩下DetailProduct頁面，選中Data面闆中的相關屬性，拖入白闆。

   

   拖入後不要做任何點選，按Ctrl+G快速将所有選中控件包裹在Grid中。

   

   我們調整綁定的控件位置，并簡單調整各個資料顯示的樣式，得到如下的界面

   

   效果差不多就可以了，OK。還有其他的一些頁面就簡略畫一下，不細說了。

9. 下面我們說一下導航功能。我們想讓Head上的按鈕都能單擊後指向邏輯頁面，如何做呢？

   要知道，Map中的線條可不是隻為了用來看的。我們進入封裝的Head頁面，在Products按鈕上右擊

   Navigator To 看是不是有Products頁面的連結？ Ok,照着把所有按鈕都做一遍.(注意隻有在Map中設定了連結指向才能在Navigator To清單中列出)

10. 首頁一般還要再加個Login,這樣才像一個完整的商業應用,Let’s Do it.

    

    為Login 按鈕添加導航Navigate To Products ，當然，在現實中我們會用重定向，而在這之前也會加入各種Validate Logic（驗證邏輯） 
11. OK，現在運作我們的程式。點選各個導航按鈕試試。

    

下一篇在寫，若有遺漏或者疏忽，請多多交流。

作者 ：雙宇

本文系原創文章，轉載請注明出處，謝謝！