建立應用程式流程

[SketchFlow 地圖] 面板是一種圖形編輯器,可以用來定義應用程式的結構、流程、導覽和組合。

您可以將 [SketchFlow 地圖] 面板專門用於處理應用程式的結構,而畫板則專門用來處理個別螢幕的內容。

導覽螢幕

在您的原型中,每個螢幕都是以 [SketchFlow 地圖] 面板中的一個節點來代表。您可以使用導覽連線將一個螢幕連接到另一個螢幕,以表示螢幕之間的導覽關係。在 SketchFlow 播放程式中執行原型時,導覽節點之間的連線將會在 [導覽] 面板中模擬各螢幕間的導覽。

[SketchFlow 地圖] 面板中也會顯示元件螢幕。如需詳細資訊,請參閱本主題稍後的<元件螢幕>。

SketchFlow 地圖

您可透過幾種方式在 SketchFlow 中定義各螢幕間的導覽。您可以從 [SketchFlow 地圖] 面板中現有的螢幕來建立新的連線螢幕、連接 [SketchFlow 地圖] 面板中兩個未連線的螢幕,或是以滑鼠右鍵按一下螢幕上的物件,並使用快顯功能表上的 [導覽至] 命令來定義導覽。

新增連線的導覽螢幕至 SketchFlow 地圖

  1. 建立新的 SketchFlow 專案時,您會建立一個名稱為 "Screen 1.xaml" 的新檔案。這個檔案會顯示成 [SketchFlow 地圖] 面板中的節點,以及 [專案] 面板中的 UserControl

    Note注意:

    若要開啟新的 SketchFlow 專案,請參閱建立原型專案

    將指標移到 [SketchFlow 地圖] 面板左上角的第一個節點 (螢幕 1) 上。

    Note注意:

    如果看不到 [SketchFlow 地圖] 面板,請按一下 [視窗] 功能表上的 [SketchFlow 地圖],或按 SHIFT+F12。

    節點會以反白顯示,而且其關聯的 XAML 檔案名稱會顯示在工具提示中。另外,節點底部也會出現一個視覺化功能表:

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(zh-tw,Expression.40).png

  2. 將指標移到視覺化功能表中左側的圖示上。開始拖曳圖示。指標後面隨即出現一個新的「疊影」節點。

  3. 完成將導覽螢幕圖示拖曳到新螢幕預定顯示位置的動作。您現在可以直接在文字方塊中輸入名稱來命名螢幕。如果未重新命名新螢幕,新節點將名為 "Screen x ",其中 " x " 是出現在應用程式流程中的編號螢幕名稱系列的下一個號碼。

    Note注意:

    您可以變更名稱,變更方法是在節點上按一下滑鼠右鍵再按一下 [重新命名],或是按一下節點,再按 SHIFT+F2,然後直接在節點中輸入新名稱。

  4. 若要在新螢幕上進行繪製,請在 [SketchFlow 地圖] 面板中按兩下節點,選取關聯的文件索引標籤。

節點間的連線代表這些節點之間的導覽。您也可以建立沒有定義導覽連線的導覽節點。

新增未連線的導覽螢幕至 SketchFlow 地圖

  1. 在 [SketchFlow 地圖] 面板中按一下滑鼠右鍵,然後按一下 [建立螢幕]。

    Note注意:

    如果看不到 [SketchFlow 地圖] 面板,請按一下 [視窗] 功能表上的 [SketchFlow 地圖],或按 SHIFT+F12。

    Note注意:

    您可以變更名稱,變更方法是在節點上按一下滑鼠右鍵再按一下 [重新命名],或是按一下節點,再按 SHIFT+F2,然後直接在節點中輸入新名稱。

  2. 若要在新螢幕上進行繪製,請在 [SketchFlow 地圖] 面板中按兩下節點,選取關聯的文件索引標籤。

    tip note秘訣:

    或者,在 [SketchFlow 地圖] 工具列中,按一下 [建立螢幕] Ee341405.d63bd8e7-f302-48bb-a42e-119eb2fa06f8(zh-tw,Expression.40).png

連接兩個未連線的導覽螢幕

  1. 在 [SketchFlow 地圖] 面板中,將指標移到要做為連線起點的節點上。

    Note注意:

    如果看不到 [SketchFlow 地圖] 面板,請按一下 [視窗] 功能表上的 [SketchFlow 地圖],或按 SHIFT+F12。

    節點會以反白顯示,而且其關聯的 XAML 檔案名稱會顯示在工具提示中。另外,節點底部也會出現一個視覺化功能表:

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(zh-tw,Expression.40).png

  2. 將指標移到視覺化功能表中的 [連接現有的螢幕] Ee341405.edc454d7-a6dd-4721-a849-4069d5ffebe6(zh-tw,Expression.40).png 圖示 (左邊第二個)。開始拖曳圖示,以建立新的導覽連線。指標後面隨即出現一個箭號。

  3. 完成將箭號拖曳到所要連接之螢幕的動作。若要移除連線,請以滑鼠右鍵按一下箭號,再按一下 [移除]。

    tip note秘訣:

    或者,請按一下節點,並將節點拖曳到您要連接的節點。

元件螢幕

元件節點和導覽節點一樣都會出現在 [SketchFlow 地圖] 面板中。元件節點和導覽節點之間的一個重大差別在於,導覽節點有連入導覽連線,但是元件節點沒有;不過,元件節點可有連入組合連線。連線 (即代表應用程式流程節點之間連結的箭號) 指出元件螢幕會出現在哪些螢幕中。

元件節點包含可在多個螢幕上重複使用的內容。例如,您可以建立一個包含背景的元件節點,以及另一個包含功能表的元件節點,然後在整個原型的多個螢幕上使用這些元件。

建立新元件節點有幾種不同的方式。您可以直接在 [SketchFlow 地圖] 面板中新增元件節點,也可以在螢幕上選取內容,將它變成在 SketchFlow 地圖中顯示成元件節點的螢幕。

新增未連線的元件螢幕至 SketchFlow 地圖

  • 在 [SketchFlow 地圖] 面板中的任何地方按一下滑鼠右鍵,然後按一下 [建立元件螢幕]。

新增連線的元件螢幕至 SketchFlow 地圖

  1. 在 [SketchFlow 地圖] 面板中,將指標移到要做為新增連線元件螢幕起點的節點上。

    Note注意:

    如果看不到 [SketchFlow 地圖] 面板,請按一下 [視窗] 功能表上的 [SketchFlow 地圖],或按 SHIFT+F12。

    節點會以反白顯示,而且其關聯的 XAML 檔案名稱會顯示在工具提示中。另外,節點底部也會出現一個視覺化功能表。

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(zh-tw,Expression.40).png

  2. 將指標移到視覺化功能表中的 [建立及插入元件螢幕] Ee341405.91c06759-86fc-4dbf-a8b7-061300304308(zh-tw,Expression.40).png 圖示 (右邊第二個)。開始拖曳圖示,以建立新的元件連線。指標後面隨即出現一個箭號。

UserControl

元件螢幕是一種 UserControl 。當您建立元件螢幕時,它會出現在 SketchFlow 地圖中。您也可以建立非元件螢幕的 UserControl 。不是元件螢幕的使用者控制項不會出現在 SketchFlow 地圖中。

將 UserControl 變成元件螢幕

  1. 選取要轉換成元件螢幕的物件或物件群組。

    Note注意:

    若要選取物件群組,請在要包含的一組物件外圍拖曳出一個週框外框。

  2. 以滑鼠右鍵按一下選取項目,然後按一下 [變成元件螢幕]。

  3. 在 [變成元件螢幕] 對話方塊的 [名稱] 方塊中,輸入 UserControl 的名稱。

  4. 按一下 [確定]。

    Note注意:

    您可能必須重建專案 (F5),元件螢幕才會出現在導覽螢幕中。

從現有物件建立新的 UserControl

  1. 選取要轉換成 UserControl 的物件或物件群組。

    Note注意:

    若要選取物件群組,請在群組外圍拖曳出一個週框外框。您也可以直接在 [資源] 面板中選取物件。

  2. 以滑鼠右鍵按一下選取項目,然後按一下 [變成 UserControl]。

  3. 在 [變成 UserControl] 對話方塊的 [名稱] 方塊中,輸入 [UserControl] 的名稱。

    如需詳細資訊,請參閱建立空白使用者控制項

視覺化標籤

視覺化標籤可讓您在 SketchFlow 地圖中的各種螢幕和連線套上不同顏色,以協助您區分各種類型的螢幕和連線。

新增視覺化標籤至節點

  1. 在 [SketchFlow 地圖] 面板中,將指標移到您要加上標籤的節點上。

    Note注意:

    如果看不到 [SketchFlow 地圖] 面板,請按一下 [視窗] 功能表上的 [SketchFlow 地圖],或按 SHIFT+F12。

  2. 節點會以反白顯示,而且其關聯的 XAML 檔案名稱會顯示在工具提示中。另外,節點底部也會出現一個視覺化功能表:

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(zh-tw,Expression.40).png

  3. 將指標移到 [變更視覺化標籤] (右邊的圖示) 上。按一下圖示,再按一下您要套用到節點的顏色。

新增視覺化標籤至連線

  1. 在 [SketchFlow 地圖] 面板中,以滑鼠右鍵按一下您要加上標籤的連線。

    Note注意:

    如果看不到 [SketchFlow 地圖] 面板,請按一下 [視窗] 功能表上的 [SketchFlow 地圖],或按 SHIFT+F12。

    連線會以反白顯示。

  2. 按一下 [視覺化標籤],再按一下您要套用到連線的顏色。

您也可以透過修改 SketchFlow 專案設定來變更整個專案的視覺化標籤。

如需詳細資訊,請參閱修改 SketchFlow 專案設定

Copyright © 2011 by Microsoft Corporation. All rights reserved.