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

by vivid 5. 十月 2011 01:00

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

Sketch Flow內建於Expression 4設計工具中,提供一些指導原則,以便快速地建立Windows Presentation Foundation或 Silverlight類型的應用程式之雛型,並提供一些互動的機制,讓使用者藉以了解未來開發出的真正應用程式之長像。

Sketch Flow製作出的圖型,外觀看起來像是手繪的,客戶可以就應用程式的功能提供開發上的建議。本篇文章將介紹適用於Windows Presentation Foundation的Sketch Flow專案,讓讀者了解它的用途和基本功能。

設計Sketch Flow專案

Sketch Flow主要目地是提供使用者能夠對未來開發的應用程式介面,在操作方面的體驗,通常在開發應用程式的前期,可以先利用Sketch Flow描繪未來程式畫面,便於和客戶或使用者討論應用程式的細節,而不需寫程式來開發一個真正應用程式的雛型。

你可以在Expression Blend 4工具中設計Sketch Flow專案,當你建立此類型專案時,在Expression Blend 4工具會多出「Sketch Flow Feedback」、「Sketch Flow Animation」與「Sketch Flow Map」面版,便於設計應用程式的雛型。

目前在Expression Blend 4工具中,可以建立適用於Silverlight或Windows Presentation Foundation類型的Sketch Flow專案,為了展示,請參考圖1所示,在Expression Blend 4「New Project」視窗中,選取「WPF」->「WPF Sketch Flow Application」項目,來建立一個Windows Presentation Foundation類型的專案,並將名稱命名為「MyPrototype」。

image

圖 1:建立一個Windows Presentation Foundation類型的MyPrototype專案

當你按下「OK」按扭之後,Expression Blend 4便會自動建立兩個專案 :一個是Windows Presentation Foundation類型的應用程式 (名稱為MyPrototype);另一個是Sketch Flow專案 (名稱為MyPrototypeScreens)。

使用SketchFlow Map面版

Expression Blend 4設計工具底下有一個「SketchFlow Map」面版,「SketchFlow Map」面版用來定義應用程式未來將會有的畫面,並讓你定義畫面與畫面之間的操作流程。應用程式中的每一個畫面,在「Sketch Flow Map」面版中會以一個藍色底的矩型來表示,例如圖2顯示預設的Screen1節點。

image圖 2 :使用「SketchFlow Map」面版。

在「Sketch Flow Map」面版中要加入一個新畫面的步驟很簡單,你可以在「Sketch Flow Map」面版中空白地方按滑鼠右鍵,然後選取突顯式選單中的「Create a Screen」選項來建立畫面,參考圖3所示。

image圖 3:「Create a Screen」選項。

畫面建立之後,只要雙擊代表畫面的藍色矩型方塊,就可以重新命名,或點選藍色矩型方塊按滑鼠右鍵,然後選取突顯式選單中的「Rename」選項來重新命名。

不過,本文範例要使用另一種變更名稱的作法。請參考以下步驟,將Screen1重新命名,先選取「Sketch Flow Map」面版中的Screen1節點,參考圖4所示:

image圖 4:重新命名。

將游標停在Screen1節點上方,雙擊Screen1矩型方塊,就會進入編輯畫面,您就可以將其重新命名,本範例將名稱變更為「Main Window」,參考圖5所示。

image圖 5:將名稱變更為「Main Window」。

新增畫面與設定畫面瀏覽

在「Sketch Flow Map」面版中,可以新增連結的畫面,並設定畫面與畫面之間的瀏覽順序。回到本文的範例專案,我們要建立一個新畫面(名稱為BookShelf),並和Main Window畫面建立連結。請點選「Sketch Flow Map」面版中要連結的Main Window節點圖示 (有一個+號),參考圖6所示。

image圖 6:使用「Create a connected screen」項目新增畫面。

然後便會自動產生一個新畫面,預設的名稱為「New Screen」,你可以使用拖曳方式將其移動到適當位置,參考圖7所示。

image圖 7:使用拖曳方式將節點移動到適當位置。

接著只要雙擊新產生出的「New Screen」節點,進入編輯模式後直接變更名稱為「BookShelf」,參考圖8所示:

image圖 8:變更名稱為「BookShelf」。

利用相同的技巧,請自行利用拖曳方式產生一個連結到BookShelf的新畫面,並將名稱設定為「Book」,參考圖9所示。

image圖 9:利用拖曳方式產生一個連結到BookShelf的Book畫面。

在「Sketch Flow Map」面版中,有一個綠色三角型的藍色矩型節點代表的是應用程式的起始畫面。若畫面有多個,您可以選取任一代表畫面的矩型節點,按滑鼠右鍵,然後選取突顯式選單中的「Set as Start」選項來改變起始畫面,參考圖10所示。

image圖 10:使用「Set as Start」選項設定起始畫面。

使用者在操作Book畫面時,可能會想到回到BookShelf畫面,這時你可以設定雙向的連結。回到本文範例專案,請將滑鼠移動到「Sketch Flow Map」面版中選取Book節點,然後拖曳此節點到BookShelf節點的上方之後放開滑鼠,參考圖11所示。

image圖 11:設定雙向的連結。

這樣就建立BookShelf與Book畫面之間的雙向連結,參考圖12所示。

image圖 12:雙向連結。

新增視覺化標籤(Visual Tag)

在「Sketch Flow Map」面版中你可以針對其中的節點新增視覺化標籤(Visual Tag),為不同的節點設定不同的背景顏色,藉此將節點進行分類的動作。只要在節點上按滑鼠右鍵,然後選取突顯式選單中的「Visual Tag」就會有一個表列顏色的顯示選單出現,你可以選擇其中的選項來變更顏色。回到本文範例專案,進行以下設定步驟,在「Exit」節點上,點選「Change Visual Tag」圖示,將範例專案中Exit節點的背景顏色設定為紅色的,參考圖13所示。

image圖 13:使用「Change Visual Tag」選項變更背景顏色。

新增Sketch Flow控制項

在Sketch Flow專案設計畫面中,新加控制項的動作就和設計一般的Expression Blend 4程式差不多。在Expression Blend 4的「Assets」面版中,你可以看到許多後綴Sketch字串的控制項,這些就是為Sketch Flow專門設計的控制項,例如下圖所示的BasicTextBlock-Sketch、BasicTextBox-Sketch等等,參考圖14所示。

image圖 14:加入Sketch Flow控制項。

回到本文的範例專案,為了展示我們在Sketch Flow的Main Window設計畫面中加入一個Button - Sketch,請從「Tools」-> 「Button - Sketch」,將「Button - Sketch」拖曳到Main Window設計畫面。參考圖15所示,按鈕的外框線條看起來彎彎的,不是垂直線條,這是由Expression Blend 4自動產生的,但看起來就像是手繪的一樣,這是Sketch Flow的特殊設計,用意是在提醒使用者,這只是應用程式的介面的草圖,這個設計出的畫面只是用來幫助製作應用程式的雛型,而不是設計應用程式最終使用的畫面,未來在程式開發階段,你可以將Button代換成WPF真正的控制項。

image圖 15:加入一個Sketch Flow Button - Sketch。

若Sketch Flow控制項不敷所需,在必要時,仍可以將標準的Silverlight或Windows Presentation Foundation控制項加到設計畫面中使用。

回到本文範例專案,參考圖16所示,再加入一個TextBlock-Sketch控制項到「Main Window」設計畫面,並利用屬性視窗,設定Text屬性為「WPF Sketch flow Book Shelf展示」字串:

image圖 16:加入一個TextBlock-Sketch控制項,並設定Text屬性。

您可以利用相同的技巧,為應用程式中的其它畫面,加上文字性的描述,在此不再敘述。

使用SKETCHFLOW PLAYER執行

當Sketch Flow專案設計完成後,你可以按F5按鈕來執行。執行時會利用一個SKETCHFLOW PLAYER程式來進行撥放。這個播放程式提供瀏覽工具列,讓使用者檢視應用程式的不同畫面,或應用程式未來將要呈現的動畫效果。

參考圖17所示,檢視Expression Blend 4設計工具的左方,有一個「SKETCHFLOW PLAYER」區塊可以進行撥放。在「SKETCHFLOW PLAYER」中有一個像房子造型的圖示便是應用程式的第一個畫面,也就是首頁,以本例而言便是Main Window。

image圖 17:利用一個SKETCHFLOW PLAYER來進行撥放。

左方的「Navigate」區塊中列出Sketch Flow專案中所有的畫面,你可以任意點選瀏覽之,因為目前停留在Main Window的緣故,「Navigate」區塊跟據「Sketch Flow Map」面版中節點之間定義的連結關係,自動列出可以瀏覽到BookShelf與Exit畫面。

而點選「Map」後方的按鈕則可以在「Sketch Flow Player」的右下方Prototype Area畫面上顯示出整個Sketch Flow Map,如圖18的灰色區塊,你也可以直接點選Sketch Flow Map上的圖示來瀏覽到不同畫面。

image圖 18:顯示出整個Sketch Flow Map。

設定畫面控制項的瀏覽規則

若要設定畫面控制項的瀏覽規則,例如按下畫面上的按鈕後,想要瀏覽到BookShelf視窗,設定步驟很簡單,回到本文範例專案,參考圖19所示,將滑鼠停留在Button上方,選取「Navigate to」->「BookShelf」,這樣就可以了。

image圖 19:設定畫面控制項的瀏覽規則。

完成這個動作後,你可以觀察一下「Objects and Timeline」面版,在Button的下方將會自動建立一個NavigateToScreenAction項目,參考圖20所示。

image圖 20:自動建立一個NavigateToScreenAction項目控制瀏覽。

若從屬性視窗中觀察NavigateToScreenAction的屬性,參考圖21所示,可以看到當Source Object (Button)觸發了Click事件時,便根據TargetScreen的設定切換到BookShelf:

image圖 21:NavigateToScreenAction項目的設定。

設計Component Screen

你可以將Sketch Flow中的控制項包在同一個群組,成為一個Component Screen,這樣就可以重複的使用它。例如,當每個畫面都需要有一個選單列來進行瀏覽動作時,Component Screen就是一個不錯的選擇,可以節省你在每一個畫面中都拉一模一樣的控制項來組成選單的時間。在「Sketch Flow Map」面版中,Component Screen是一個綠色的橢圓型圖示,你可以為Component Screen加上動畫或特效。

回到本文範例專案,在「Sketch Flow Map」面版中修改一下BookShelf節點,新增連結畫面,讓BookShelf節點擁有四個子畫面,分別為Programming、Photography、Cooking與Comics,並建立雙向連結。接下來我們要產生一個選單,可以瀏覽到這四個子畫面,參考圖22所示:

image圖 22:新增BookShelf子畫面。

請回到BookShelf設計畫面,從「Tools」->「Button - Sketch」,拖曳按扭到畫面,請在畫面中加入四個按鈕,分別利用屬性視窗設定它們的Content屬性為Programming、Photography、Cooking與Comics字串,並設好喜愛的背景顏色(Background屬性)或樣式,參考圖23所示:

image圖 23:在畫面中加入四個按鈕。

接著利用前文提及的「Navigate to」功能,分別設定點選BookShelf畫面中的Programming 、Photography、Cooking與Comics按鈕後,將會瀏覽到Programming、Photography、Cooking與Comics畫面,參考圖24所示。

image圖 24:設定「Navigate to」。

完成之後,使用滑鼠同時選取BookShelf畫面中的Programming 、Photography、Cooking與Comics按鈕,按下滑鼠右鍵,從突顯示選單中,選取「Make Into Component Screen」項目,參考圖25所示:

image圖 25:選取「Make Into Component Screen」項目封裝成User Control。

接著便會出現一個「Make Into Component Screen」對話盒,你可以為Component Screen命名,本範例將其命為「myMenu」,Expression Blend 4便會自動將選取的按鈕包成一個User Control以便重複使用,參考圖26所示。

image圖 26:設定名稱。

當你按下「OK」按鈕之後,專案中將會出現一個myMenu.xaml檔案,參考圖27所示。

image圖 27:myMenu.xaml。

參考myMenu.xaml檔案的內容如下:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:pi="http://schemas.microsoft.com/prototyping/2010/interactivity"
    mc:Ignorable="d"
    x:Class="MyPrototypeScreens.myMenu"
    x:Name="UserControl"
    d:DesignWidth="524.262" d:DesignHeight="64" Height="64" Width="524.262">

    <Grid x:Name="LayoutRoot">
        <Button x:Name="btnProgramming" Content="Programming" HorizontalAlignment="Left" Style="{DynamicResource Button-Sketch}" Width="122.754">
            <Button.Background>
                <RadialGradientBrush>
                    <GradientStop Color="#FFF7FBFB" Offset="0"/>
                    <GradientStop Color="#FF20978F" Offset="1"/>
                </RadialGradientBrush>
            </Button.Background>
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <pi:NavigateToScreenAction TargetScreen="MyPrototypeScreens.Screen_1_2"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
        <Button x:Name="btnPhotography" Content="Photography" Margin="126.754,0,253.508,0" Style="{DynamicResource Button-Sketch}" RenderTransformOrigin="-0.019,0.5">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <pi:NavigateToScreenAction TargetScreen="MyPrototypeScreens.Screen_1_3"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <Button.Background>
                <RadialGradientBrush>
                    <GradientStop Color="#FFF7FBFB" Offset="0"/>
                    <GradientStop Color="#FFBBD814" Offset="1"/>
                </RadialGradientBrush>
            </Button.Background>
        </Button>
        <Button x:Name="btnCooking" Content="Cooking" Margin="0,0,126.754,0" Style="{DynamicResource Button-Sketch}" HorizontalAlignment="Right" Width="122.754">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <pi:NavigateToScreenAction TargetScreen="MyPrototypeScreens.Screen_1_4"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <Button.Background>
                <RadialGradientBrush>
                    <GradientStop Color="#FFF7FBFB" Offset="0"/>
                    <GradientStop Color="#FFE7892A" Offset="1"/>
                </RadialGradientBrush>
            </Button.Background>
        </Button>
        <Button x:Name="btnComics" Content="Comics" Style="{DynamicResource Button-Sketch}" HorizontalAlignment="Right" Width="122.754">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <pi:NavigateToScreenAction TargetScreen="MyPrototypeScreens.Screen_1_5"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <Button.Background>
                <RadialGradientBrush>
                    <GradientStop Color="#FFF7FBFB" Offset="0"/>
                    <GradientStop Color="#FFA028A7" Offset="1"/>
                </RadialGradientBrush>
            </Button.Background>
        </Button>
    </Grid>
</UserControl>


另外Sketch Flow Map畫面上會出現一個綠色、橢圓型的myMenu圖示,並且有一個綠色的箭頭,以及虛線來指向BookShelf節點,參考圖28所示。

image圖 28:Component Screen。

回到本文範例,你可以利用「Sketch Flow Map」面版,將Component Screen加到其它畫面,只要點選Component Screen的「Insert a Component screen」圖示,然後使用拖曳的方式,拖曳箭頭到代表畫面的節點上方放開滑鼠就行了,參考圖29所示。

image圖 29:Insert a Component screen」。

因為本範例的情境設定Programming、Photography、Cooking與Comics畫面都需要myMenu,你需為這幾個畫面加上Component Screen,參考圖30所示。

image圖 30:重複使用Component Screen。

若開啟Programming、Photography、Cooking與Comics對應的XAML設計畫面,畫面的上方會自動出現選單,參考圖31所示。

image圖 31:在視窗中使用Component Screen。

參考Screen_1_4.xaml檔案,XAML會自動引用選單的UserControl命名空間,並在Grid之中加入一個myMenu控制項:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:MyPrototypeScreens" x:Name="Screen_1_4_Name"
    mc:Ignorable="d"
    x:Class="MyPrototypeScreens.Screen_1_4"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot" Background="White">
        <local:myMenu Margin="0,0,115.738,0" VerticalAlignment="Top" Width="Auto" d:IsPrototypingComposition="True"/>
        <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Height="40" Margin="48,96,0,0" Style="{DynamicResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Width="168" FontSize="29.333"><Run Language="zh-tw" Text="Cooking"/></TextBlock>
    </Grid>
</UserControl>


 

未來若修改Component Screen的設計,要記得重新編譯你的專案,異動的部分才可以更新到每個使用到它的畫面,否則畫面上就會出現一個橘色的驚嘆號圖示。在看到此圖示時,只要選取Expression Blend 的「Project」選單->「Build Project」,當編譯的動作正確完成時,這個橘色的驚嘆號圖示便會自動消失,參考圖32所示。

image圖 32:橘色的驚嘆號圖示表尚未編譯。

總結

Sketch Flow内建在Expression Blend 4設計工具之中,能夠快速建立Windows Presentation Foundation與Silverlight類型的應用程式之雛型。利用Sketch Flow建立應用程式的雛型後,可以便於和客戶討論應用程式的架構,讓客戶能夠想像出未來應用程式的長像,客戶也可以提供一些設計上的回饋。

將Sketch Flow製作出的雛型提供給客戶時,可以利用內建Sketch Flow撥放程式(Sketch Flow Player) 來瀏覽應用程式的不同畫面,並可以利用互動式的介面,提供評論、意見或加上註解。Sketch Flow Map面版用來定義應用程式雛型的結構。

Component Screen是一個可以重複使用的單位,您可以將畫面中的控制項包在同一個Component Screen,以便在多個畫面中重複使用。

Tags:

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

新增評論




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






NET Magazine國際中文電子雜誌

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

月分類Month List