使用Sketch Flow專案設計WPF應用程式雛型(二)

by Vivid 19. 十月 2011 01:00

.NET Magazine國際中文電子雜誌
作 者:許薰尹
審 稿:張智凱
文章編號:N111011702
出刊日期:2011/10/19

本文延續《使用Sketch Flow專案設計WPF應用程式雛型(一)》一文的範例情境,介紹如何在Sketch Flow專案提供使用者回饋、資料繫結,以及動畫處理。

提供回饋

Sketch Flow 播放程式的左下角有一個「My FEEDBACK」面版,可以讓使用者加上註解,寫一些建議或修改意見,你可以將這些客戶的回饋記錄成檔案,後續將這些檔案再匯入到開發者的Expression Blend 4工具中檢視。

回到Expression Blend 4工具Sketch Flow專案,按F5執行,你可以選取「Sketch Flow Player」->「MY FEEDBACK」面版上的畫筆 (Enable ink feedback) 項目,點選喜好的顏色,直接在畫面上畫圖,或直接在「My FEEDBACK」面版上輸入註解。例如本文的範例加上註解,移動選單的座標位置。另外,在畫面上想要多增加一個Exit按鈕,參考圖1所示。

clip_image002

圖 1:使用者可以在Sketch Flow Player工具中提供回饋。

接著便會出現一個「Feedback Author Information」對話盒,你可以在其中輸入作者資訊,如本文範例將Author Name設定為「User」,參考圖2所示。

clip_image004

圖 2:輸入作者資訊。

當你按下「OK」按鈕時,便可以選擇將回饋資訊儲存成附檔名為feekback的檔案。回到Expression Blend 4開發工具,你可以選取「Window」->「Sketch Flow Feedback」項目,開啟Sketch Flow Feedback面版,參考圖3所示。

clip_image006

圖 3:開啟Sketch Flow Feedback面版。

點選Sketch Flow Feedback面版上的+號後選「Add」選項,就可以選取使用者匯出的feedback檔案,將使用者回饋資訊匯入,參考圖4所示。

clip_image008

圖 4:匯入使用者回饋資訊。

匯入完成的畫面請參考圖5。

clip_image010

圖 5:匯入使用者回饋資訊。

資料繫結

在設計應用程式雛型時,有時可能想要顯示資料,讓使用者能夠對未來應用程式的操作介面有更大的想像空間。和在Expression Blend 4工具設計一般的Windows Presentation Foundation或Silverlight專案一樣,你可以設計資料繫結,並在設計階段中加入範例資料來做顯示。

回到Expression Blend 4開發工具,在「Data」頁,選取「New Sample Data」項目,新增範例資料,參考圖6所示。

clip_image012

圖 6:新增範例資料。

接下來會出現一個「New Sample Data」對話盒,我們將Data Source Name設定為「BookLists」,選取Define in「Project」,並且勾選「Enable sample data when application is running」核取方塊,然後按下「OK」按鈕,參考圖7所示。

clip_image014

圖 7:設定範例資料。

在「Data」頁中會自動出現一個Collection項目,包含兩個屬性。你可以雙擊屬性,進入到編輯模式後,修改屬性的名稱。例如本範例將第一個屬性名稱設定為「Author」;將第二個屬性名稱設定為「Price」。然後點選「Add simple property」項目,新增第三個屬性,並將屬性名稱設定為「Title」,參考圖8所示。

clip_image016

圖 8:新增與設定屬性名稱。

接下來修改Price屬性,點選Price屬性旁邊的「Change Property Type」按鈕,將Type設定為「Number」;將Length設定為「5」,參考圖9所示。

clip_image018

圖 9:設定Price資料型別。

下一步是從「Data」頁,直接將Collection拖曳到Programming設計畫面,Expression Blend 4會自動產生一個ListBox控制項,然後設定ItemsSource屬性完成資料繫結的動作,參考圖10所示。

clip_image020

圖 10:使用拖曳設定資料繫結。

在Progarmming畫面,我們需要三個TextBlock控制項來個別顯示Author、Title與Price資訊。未來當使用者點選到Progarmming畫面中ListBox控制項的任一筆資料時,便自動將此筆圖書資料的明細繫結到三個TextBlock控制項。

回到Expression Blend 4開發工具,從「Tools」->「BasicTextBlock - Sketch」拖曳三個TextBlock到Progarmming畫面。接著點選第一個TextBlock,從屬性視窗->「Text」屬性->「Advanced Options」->「Data Binding」,參考圖11所示。

clip_image022

圖 11:設定TextBlock資料繫結。

在「Create Data Binding」對話盒中,選取「Element Property」頁,左方的Scene elements選取「listBox」;然後勾選「Use a custom path expression」核取方塊,在後方的文字方塊中輸入「SelectedItem.Author」以完成繫結,參考圖12所示。

clip_image024

圖 12:繫結到Author。

重複上面的步驟,將第二個TextBlock的Text屬性繫結到Price;將第三個TextBlock的Text屬性繫結到Title。

現在可以按F5執行,在Sketch Flow撥放程式中進行測試,當你點選Programming畫面中ListBox控制項的任一項目時,右方就會呈現詳細資料,參考圖13所示。

clip_image026

圖 13:在Sketch Flow撥放程式中進行測試。

設計動畫效果

Sketch Flow類型的專案也可以加入動畫效果,不過它的動畫系統和Windows Presentation Foundation或Silverlight的動畫不一樣,它是針對Sketch Flow類型的專案特別設計的,因此在Expression Blend 4中設計時,有一個新的「Sketch Flow Animation」面版可以使用。

本範例程式設計的情境是,當使用者使用Sketch Flow播放程式,點選Programming畫面中ListBox控制項的任一項目時,右方的詳細資料要縮小後,慢慢放大呈現。為了達到這樣的目地,首先,回到Expression Blend 4工具,選取Programming畫面中的三個TextBlock控制項,按滑鼠右鍵,點選「Group Into」->「Grid」,將它們分組到一個Grid控制項中,參考圖14所示。

clip_image028

圖 14:分組。

接著利用屬性視窗,將Grid的Visibility屬性設定為「Collapsed」,先隱藏起來,參考圖15所示。

clip_image030

圖 15:將Grid的Visibility屬性設定為「Collapsed」。

在「Sketch Flow Animation」面版中設計動畫時是採用影格 (Frame) 的方式來建立。動畫中的第一個影格名稱叫作Base,你可以選取「New Sketch Flow animation」選項來新增影格,參考圖16所示:

clip_image032

圖 16: 新增影格。

影格產生後,設計畫面就進入動畫錄製狀態,例如你可以移動設計畫面中的控制項位置時,這些坐標都會被自動記錄起來。請在動畫錄製模式下,利用屬性視窗將Grid的Background屬性設定為粉紅色;將Grid的Visibility屬性設定為「Visible」;然後將顯示明細資料的Grid縮小在左上角,參考圖17所示。

clip_image034

圖 17:錄製動話。

接著點選在動畫中第一個影格右上角的「Add Frame」選項 (+號) 來新增一個影格,在第二個影格設定顯示明細資料的Grid要放大,參考圖18所示。

clip_image036

圖 18:錄製動畫。

動畫設計完成之後,你可以利用「Sketch Flow Animation」面版上的「Play Sketch Flow Animation」播放測試動畫的運行,參考圖19所示。

clip_image038

圖 19:測試動畫撥放。

在Sketch Flow Player撥放動畫

若要讓使用者在「Sketch Flow Player」撥放動畫,可以利用「Navigate」面版,只要瀏覽到具有動畫效果的畫面,「Navigate」面版便會自動顯示可以使用的動畫,參考圖20所示。

clip_image040

圖 20:利用「Navigate」面版撥放動畫。

若需要和使用者互動後,再撥放動畫,這時你需要做一點點額外的設定,利用PlaySketchFlowAnimationAction才能讓用戶端在Sketch Flow Player中撥放動畫。回到Expression Blend 4設計工具,從「Assets」選單->「Sketch Flow」->「Behaviors」,將PlaySketchFlowAnimationAction項目拖曳到Programming畫面中的ListBox控制項上方放開,以便在ListBox控制項套用PlaySketchFlowAnimationAction,參考圖21所示。

clip_image042

圖 21:在ListBox控制項套用PlaySketchFlowAnimationAction。

接著從屬性視窗中設定PlaySketchFlowAnimationAction相關的屬性。將SourceObect屬性設定為「ListBox」;將EventName屬性設定為「SelectionChanged」;將SketchFlowAnimation屬性設定為「SketchFlowAnimation1」,並將TargetScreen設定為「Programming」,參考圖22所示。

clip_image044

圖 22:設定PlaySketchFlowAnimationAction相關的屬性。

現在大功告成啦,按F5撥放動畫,當你在Sketch Flow Player點選到Programming頁的ListBox項目時,Sketch Flow Player的Navigate面版中,便會顯示動畫撥放中,Programming頁ListBox項目的右方便開始執行動畫,參考圖23所示。

clip_image046

圖 23:撥放動畫。

播放完的成果,參考圖24所示。

clip_image048

圖 24:播放動畫。

加入開發階段的註解

若開發者想要提供使用者關於介面上設計的其它資訓,可以利用Annotation功能。例如想要提醒使用者Programming頁面上的ListBox控制項未來資料會從資料庫讀取,回到Expression Blend 4設計工具,先選取Programming頁面上的ListBox控制項,然後選取「Tools」->「Create Annotations」,輸入註解「未來資料將會從SQL Server資料庫中取得」,參考圖25所示。

clip_image050

圖 25:輸入註解。

而在Sketch Flow 播放程式中,便可以透過MY FEEDBACK面版中的「Show or hide annotations」項目來決定是否顯示註解,參考圖26所示。

clip_image052

圖 26:設定是否顯示開發階段的註解。

與封裝發行Sketch Flow專案

當你封裝 Sketch Flow專案時,Sketch Flow撥放程式也會被自動加入封裝檔,以便將Sketch Flow撥放程式部署到用戶端的電腦中使用。若封裝的是Silverlight類型的Sketch Flow專案,未來用戶端的電腦需要有瀏覽器,並安裝Silverlight才能夠使用Sketch Flow撥放程式。若是Windows Presentation Foundation類型的專案,在封裝的過程中會自動將所有相依檔案打包在封裝檔。

封裝的動作很簡單,在Expression Blend 4工具中,選取「File」->「Package Sketch Flow Project」,就會出現一個對話盒,以設定輸出目錄,參考圖27所示。

clip_image054

圖 27:設定輸出目錄。

完成後只要把此目錄中所有檔案,複製到使用者電腦上即可。

總結

Sketch Flow 播放程式可以提供使用者回饋機制,讓使用者填寫建議以及修改事項。你可以在Sketch Flow專案中加入動畫效果,讓使用者能更深入瞭解未來應用程式呈現的效果。

 

Code_N111011702.rar (2.40 mb)

Tags:

.NET Magazine國際中文電子雜誌 | Expression Blend | WPF | 許薰尹Vivid Hsu

評論 (53) -

cours de theatre
cours de theatre United States
2017/10/1 上午 12:50:30 #

wow, awesome post. Really Cool.

回覆

can ho osimi
can ho osimi United States
2017/10/6 下午 11:49:10 #

Very good blog.Really looking forward to read more. Fantastic.

回覆

buy hacklinks
buy hacklinks United States
2017/10/9 下午 01:43:54 #

Appreciate you sharing, great article post.Much thanks again. Cool.

回覆

tania kamagra
tania kamagra United States
2017/10/9 下午 03:21:12 #

Wow, great post.Much thanks again. Much obliged.

回覆

Osimi sea view
Osimi sea view United States
2017/10/9 下午 05:38:00 #

Thanks for the blog article.Really thank you! Cool.

回覆

solarmovie
solarmovie United States
2017/10/10 下午 07:26:16 #

I loved your blog.Thanks Again. Really Great.

回覆

Nathan Coombe
Nathan Coombe United States
2017/10/10 下午 09:32:45 #

Say, you got a nice blog.Really thank you! Really Cool.

回覆

pirater un compte facebook
pirater un compte facebook United States
2017/10/10 下午 11:51:31 #

Great blog article. Will read on...

回覆

Google new cheat hacklinks
Google new cheat hacklinks United States
2017/10/12 下午 08:16:24 #

Im thankful for the blog.Really thank you! Much obliged.

回覆

visit the site
visit the site United States
2017/10/14 下午 03:31:52 #

Im obliged for the article post.

回覆

dragon city hack pc
dragon city hack pc United States
2017/10/15 下午 02:59:51 #

Looking forward to reading more. Great post.Really thank you! Will read on...

回覆

omega xl
omega xl United States
2017/10/15 下午 07:41:40 #

Very good post.Really thank you! Cool.

回覆

click over here
click over here United States
2017/10/17 下午 02:17:58 #

I am so grateful for your blog article.Really looking forward to read more. Great.

回覆

sletrokor review
sletrokor review United States
2017/10/17 下午 07:50:11 #

Thanks again for the article post.Really looking forward to read more. Great.

回覆

Opal Skyview
Opal Skyview United States
2017/10/19 上午 05:12:41 #

wow, awesome article.Thanks Again. Want more.

回覆

VigRx Plus
VigRx Plus United States
2017/10/19 上午 06:54:24 #

Very informative article post.Really looking forward to read more. Fantastic.

回覆

Get More Info
Get More Info United States
2017/10/19 下午 05:44:48 #

Thanks-a-mundo for the blog.Really thank you! Keep writing.

回覆

pure slim 1000 review
pure slim 1000 review United States
2017/10/20 上午 03:15:35 #

I value the blog post. Awesome.

回覆

vung tau melody
vung tau melody United States
2017/10/21 上午 02:58:51 #

Thank you for your article.Really looking forward to read more. Fantastic.

回覆

carte grise en ligne
carte grise en ligne United States
2017/10/21 上午 06:36:47 #

Thanks for sharing, this is a fantastic article.Really thank you! Cool.

回覆

elakekassa suomi
elakekassa suomi United States
2017/10/21 下午 05:01:00 #

Hey, thanks for the post.Thanks Again. Awesome.

回覆

website designing company in Delhi India
website designing company in Delhi India United States
2017/10/24 上午 10:56:32 #

I really enjoy the blog article.Much thanks again. Cool.

回覆

son thinh
son thinh United States
2017/10/28 上午 10:06:33 #

Hey, thanks for the article. Much obliged.

回覆

EZ Battery Reconditioning Review
EZ Battery Reconditioning Review United States
2017/10/30 上午 08:58:56 #

Very neat post.Much thanks again. Will read on...

回覆

lepszy plock
lepszy plock United States
2017/10/30 下午 04:44:50 #

Say, you got a nice article.Really looking forward to read more. Really Cool.

回覆

phenocal review
phenocal review United States
2017/11/1 下午 04:40:29 #

I really like and appreciate your article post. Really Great.

回覆

phentaslim review
phentaslim review United States
2017/11/3 下午 01:16:31 #

I value the article. Really Cool.

回覆

sciatica treatment for elderly
sciatica treatment for elderly United States
2017/11/15 上午 10:37:43 #

Muchos Gracias for your article post.Much thanks again. Want more.

回覆

https://notehub.org/elzrs
https://notehub.org/elzrs United States
2017/11/17 下午 07:46:02 #

I cannot thank you enough for the article post.Much thanks again. Really Cool.

回覆

swimwear
swimwear United States
2017/11/24 上午 12:45:53 #

Appreciate you sharing, great article. Fantastic.

回覆

Chad Boonswang SEO
Chad Boonswang SEO United States
2017/11/27 上午 03:01:18 #

Looking forward to reading more. Great blog article.Really looking forward to read more. Will read on...

回覆

truck wreckers scammer
truck wreckers scammer United States
2017/11/29 下午 07:25:08 #

I appreciate you sharing this blog.Really looking forward to read more. Fantastic.

回覆

porno
porno United States
2017/12/1 下午 07:30:53 #

Major thankies for the article.Much thanks again. Keep writing.

回覆

Business Credit For Small Business Loan
Business Credit For Small Business Loan United States
2017/12/3 上午 07:41:01 #

Really enjoyed this article post.Much thanks again. Awesome.

回覆

moble porn
moble porn United States
2017/12/5 下午 12:32:28 #

A big thank you for your blog article.Thanks Again. Will read on...

回覆

Awesome blog article. Great.

回覆

Thank you ever so for you post.Really thank you!

回覆

Santiago Vigliotti
Santiago Vigliotti United States
2017/12/14 下午 12:11:18 #

Thank you for your blog post.Much thanks again. Awesome.

回覆

have a peek at this website
have a peek at this website United States
2017/12/14 下午 07:07:38 #

I am so grateful for your blog post.Much thanks again.

回覆

Christmas Songs
Christmas Songs United States
2017/12/15 上午 01:43:01 #

Im thankful for the blog article.Really thank you! Really Great.

回覆

canon driver software
canon driver software United States
2017/12/16 下午 08:45:49 #

wow, awesome article post.Much thanks again. Keep writing.

回覆

Major thankies for the article post.Thanks Again.

回覆

Im obliged for the blog. Really Great.

回覆

Consulting
Consulting United States
2017/12/17 下午 08:20:07 #

Great, thanks for sharing this article post. Really Cool.

回覆

canon drivers
canon drivers United States
2017/12/23 下午 12:18:17 #

Great, thanks for sharing this post. Keep writing.

回覆

آینه
آینه United States
2017/12/26 下午 12:02:26 #

Im thankful for the article.Really thank you! Want more.

回覆

SOCCER HIGHLIGHTS
SOCCER HIGHLIGHTS United States
2017/12/26 下午 02:14:25 #

Hey, thanks for the blog article.Really thank you! Cool.

回覆

hp drivers
hp drivers United States
2018/1/2 上午 07:28:10 #

Awesome blog post.Much thanks again. Keep writing.

回覆

Continue
Continue United States
2018/1/2 下午 03:27:10 #

Thanks so much for the post. Much obliged.

回覆

Thanks so much for the blog post.Really thank you! Much obliged.

回覆

printer driver
printer driver United States
2018/1/3 上午 06:47:21 #

Enjoyed every bit of your blog.Much thanks again. Will read on...

回覆

EsXVVjI
EsXVVjI United States
2020/9/17 上午 08:22:29 #

734515 395896Great information, better still to find out your blog that has a great layout. Nicely done 351837

回覆

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List