小試Sketchflow for Windows Phone 7

關於下載和安裝Expression Blend中的SketchFlow模板可以參考我的上篇部落格《Expression Blend 中的Sketchflow for Windows Phone 7》

本文假設你已經安裝好了該模板，建立WP7的原型設計項目，即可發現如下的介面，其中就包含了

 

先按F5運行下，會發現原型體會在瀏覽器中顯示，而不是你可能會認為的Windows Phone 7 Emulator，其實它就是一個加了WP7主題（圖片）的silverlight sketchflow，如為初始運行結果

其中只有跳動的Start Application和下方的三個按鈕有用，其他都是靜態圖片，為了使你感覺到你在使用Windows Phone 7.點擊表徵圖後會看到在設計介面中的文本，如：

 

我們來看下預設產生的SketchFlow Map，其中綠色背景的代表是組件（Component ），藍色背景的代表是XAML頁面，我們看到在各個方塊之間有很多連線，那是各個頁面之間的導航。

 

我們來自己添加一個頁面，並實現一些動畫。將滑鼠移至App Info Screen上，我們會發現出現幾個小按鈕，選擇“Create a Connected Screen”，即建立一個跟當前螢幕連結的新螢幕

 

 注意到我們新添加的頁面是一個標準的頁面，它的大小都是Auto的，也即預設的640*480的，我們知道在Windows Phone 7中支援兩種螢幕解析度，即480*800和320*400的，顯然，我們需要重新設定其大小，參考其他頁面的大小即可

 

我們往新添加的頁面中添加PhoneUI，即應用程式外層的皮膚，在Asset裡面可以找到

 

我們如何導向到我們新添加的頁面呢，我們在App Info Screen中添加一個按鈕，然後右擊，選擇NavigateTo，選擇建立的頁面，如：

 

 注意如果此時你運行程式的話，下面的按鈕是不起作用的，因為該組件還沒有添加到建立的頁面中，將滑鼠移到Screen1中，此時我們選擇“Connect an Existing Screen”

 

大家可以小試一下哈，發揮你的創作力吧！